@font-face{font-family:"ABC Favorit Mono";src:url("../ABCFavoritMonoTrial-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"ABC Favorit Mono";src:url("../ABCFavoritMonoTrial-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"ABC Favorit";src:url("../ABCFavoritTrial-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"ABC Favorit";src:url("../ABCFavoritTrial-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Staff X Wide";src:url("../StaffXWide-Black.woff2") format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"Staff Wide";src:url("../ABCFavoritTrial-Medium.woff2") format("woff2");font-weight:100 900;font-display:block}
:root{
  --paper:#F2EFE9;
  --prussian:#003153;
  --ink:#1F2A44;
  --muted:rgba(31,42,68,.64);
  --rule:rgba(0,49,83,.22);
  --wide:"Staff X Wide","Archivo","Arial Black",Arial,sans-serif;
  --wide2:"Staff Wide","Archivo",Arial,sans-serif;
  --text:"ABC Favorit","Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --m:clamp(16px,2.4vw,36px);
  --gap:clamp(20px,3vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
main,header,footer,.statement,.hero .name,.contact .body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible{outline:2px solid var(--prussian);outline-offset:3px}
p{margin:0}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;background:url("../grain.webp") 0 0/240px 240px repeat}

.sm{font-size:14px;line-height:1.45}
.fit{display:block;white-space:nowrap;font-family:var(--wide);font-weight:800;color:var(--prussian);line-height:.8;letter-spacing:-.02em;margin:0;font-size:12vw;will-change:transform}
.fit.b{font-weight:700}
.link{font-weight:500;color:var(--prussian);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;white-space:nowrap}
.link:hover{text-decoration-thickness:3px}

/* Photo reveal */
.ph{position:relative;overflow:hidden;background:#dfe3e6}
.ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
@media (prefers-reduced-motion:reduce){.ph img{transform:none;transition:none}}

/* Top */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:var(--m)}
.top .mark{font-family:var(--wide2);font-weight:600;color:var(--prussian);text-decoration:none;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.top nav{display:flex;gap:4px 22px;flex-wrap:wrap;justify-content:flex-end}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* Hero */
.hero{position:relative;display:flex;flex-direction:column;height:100svh;min-height:620px;padding-left:var(--nw,0px)}
.hero .name{position:absolute;left:var(--m);top:var(--m);bottom:var(--m);display:flex;align-items:flex-end;pointer-events:none}
.hero .vfit{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-family:var(--wide);font-weight:800;color:var(--prussian);line-height:.8;letter-spacing:-.02em;font-size:10vh}
.hero .intro{padding-top:clamp(40px,10vh,120px)}
.hero .intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px var(--gap);padding:clamp(22px,3vw,40px) var(--m) clamp(22px,3vw,40px);align-items:end}
.hero h1{grid-column:1/6;font-family:var(--text);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.35;margin:0;max-width:26ch}
.hero .claim{grid-column:8/13;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.hero .claim span{color:var(--muted)}
.hero .ph{flex:1;height:auto;min-height:0}

/* Statement */
.statement{padding:clamp(90px,14vw,210px) var(--m) 0}
.statement .fit{margin-block:.05em}
.statement .row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:clamp(48px,7vw,110px);align-items:end}
.statement .row p{grid-column:8/13;max-width:32ch}

/* Services */
.services{padding:clamp(110px,15vw,220px) var(--m) 0;display:flex;flex-direction:column;gap:clamp(90px,12vw,180px)}
.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap);align-items:end}
.svc .ph{grid-column:1/8;aspect-ratio:3/2}
.svc .ph.sq{aspect-ratio:1/1;grid-column:2/7}
.svc .txt{grid-column:8/13;display:flex;flex-direction:column;gap:18px;min-width:0}
.svc:nth-child(even) .ph{grid-column:6/13;order:2}
.svc:nth-child(even) .ph.sq{grid-column:7/12}
.svc:nth-child(even) .txt{grid-column:1/6;order:1}
.svc .no{font-family:var(--wide2);font-weight:600;color:var(--prussian);font-size:14px}
.svc .fit{font-weight:700;line-height:.82}
.svc p{max-width:34ch}

/* Work */
.work{padding-top:clamp(120px,16vw,240px)}
.work .lead{padding-top:0}
.work > .ph{height:min(88svh,1000px);min-height:380px}
.work .lead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:clamp(22px,3vw,40px) var(--m) 0}
.work .lead p{grid-column:8/13;max-width:32ch}
.projects{padding:clamp(70px,9vw,130px) var(--m) 0}
.proj{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px var(--gap);align-items:end;border-top:1.5px solid var(--prussian);padding-block:22px 26px;text-decoration:none}
.proj:last-child{border-bottom:1.5px solid var(--prussian)}
.proj .l{display:flex;flex-direction:column;gap:14px;min-width:0}
.proj .fit{font-weight:700;line-height:.82}
.proj p{max-width:40ch}
.proj .shot{width:clamp(120px,16vw,230px);aspect-ratio:833/1021;border:1px solid var(--rule);overflow:hidden}
.proj .shot img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.35);transition:filter .6s}
.proj:hover .shot img{filter:none}

/* About */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:clamp(120px,16vw,240px) var(--m) 0;align-items:start}
.about .ph{grid-column:1/8;aspect-ratio:3/2}
.about .txt{grid-column:8/13;align-self:end;display:flex;flex-direction:column;gap:16px;max-width:38ch}
.about h2{font-family:var(--wide2);font-weight:600;color:var(--prussian);font-size:15px;margin:0 0 6px}

/* Contact */
.contact{padding-top:clamp(120px,16vw,240px)}
.contact .ph{height:min(70svh,760px);min-height:320px}
.contact .body{padding:clamp(40px,6vw,90px) var(--m) var(--m)}
.contact .row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-top:clamp(28px,4vw,48px)}
.mail{font-family:var(--text);font-weight:500;color:var(--prussian);font-size:clamp(1.3rem,3vw,2.4rem);text-decoration:none;border-bottom:2px solid var(--prussian);padding-bottom:4px;word-break:break-all}
.mail:hover{border-bottom-width:4px}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(60px,8vw,110px) var(--m) var(--m);color:var(--muted)}
footer nav{display:flex;gap:22px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:760px){
  .hero .intro{grid-template-columns:1fr}
  .hero h1,.hero .claim{grid-column:1/-1}
  .hero{height:auto;min-height:0}
  .hero .ph{flex:none;height:auto;aspect-ratio:3/2;min-height:0}
  .about .ph{margin-inline:calc(-1 * var(--m));aspect-ratio:3/2;max-width:none}
  .statement .row,.svc,.about,.work .lead{grid-template-columns:1fr}
  .statement .row p,.statement .row .ph,.svc .ph,.svc .ph.sq,.svc .txt,.svc:nth-child(even) .ph,.svc:nth-child(even) .ph.sq,.svc:nth-child(even) .txt,.about .ph,.about .txt,.work .lead p{grid-column:1/-1;order:0}
  .svc .ph{order:0}.svc .txt{order:1}
  .svc:nth-child(even) .ph{order:0}.svc:nth-child(even) .txt{order:1}
  .work > .ph{height:auto;aspect-ratio:3/2;min-height:0}
  .proj{grid-template-columns:1fr}
  .proj .shot{width:46%}
  .contact .ph{height:auto;aspect-ratio:3/2;min-height:0}
  .svc .ph{margin-inline:calc(-1 * var(--m));aspect-ratio:3/2;max-width:none}
  .svc{gap:28px}
  .hero .ph{aspect-ratio:3/2}
  .work > .ph{aspect-ratio:3/2}
}

/* Hochkant-Hero: Name links, Text Mitte, schmales hohes Bild rechts */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;height:100svh;min-height:640px;padding-left:0}
.hero .name{position:relative;left:auto;top:auto;bottom:auto;grid-column:1;grid-row:1/4;padding:var(--m) clamp(28px,4vw,80px) var(--m) clamp(20px,3.5vw,64px);display:flex;align-items:stretch;gap:.06em}
.hero .v1{align-self:flex-end;will-change:transform}.hero .v2{align-self:flex-end}
.hero .top{grid-column:2/4;grid-row:1}
.hero .intro{grid-column:2;grid-row:2;align-self:start;padding-top:clamp(40px,12vh,140px)!important;display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:0 var(--gap) var(--m) 0}
.hero .intro h1{max-width:20ch}
.hero .claim{justify-content:flex-start!important}
.hero .ph{grid-column:3;grid-row:2/4;align-self:end;width:min(58vw,calc((100svh - 130px) * 1.5));aspect-ratio:3/2;height:auto;min-height:0;margin:0 var(--m) var(--m) 0}
@media (max-width:760px){
  .hero{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;height:auto;min-height:0}
  .hero .name{padding:var(--m) 22px var(--m) 14px}
  .hero .top{grid-column:2}
  .hero .ph{grid-column:2;grid-row:2;width:auto;aspect-ratio:3/2;margin:8px var(--m) 0 0}
  .hero .intro{grid-column:2;grid-row:3;padding:24px var(--m) var(--m) 0}
}

/* v5: Bild randlos rechts und oben, Navigation und H1 in schmaler Spalte */
.hero{grid-template-columns:auto minmax(210px,19vw) minmax(0,1fr)}
.hero .top{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;padding:var(--m) var(--gap) 0 0}
.hero .top nav{flex-direction:column;align-items:flex-start;gap:6px}
.hero .ph{grid-column:3;grid-row:1/4;align-self:stretch;width:auto;aspect-ratio:auto;height:auto;margin:0}
.hero .intro{grid-column:2;grid-row:3;align-self:end;padding:0 var(--gap) var(--m) 0!important}
@media (max-width:760px){
  .hero{grid-template-columns:auto minmax(0,1fr)}
  .hero .top{grid-column:2;grid-row:1;flex-direction:row;padding:var(--m) var(--m) 0 0}
  .hero .top nav{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
  .hero .ph{grid-column:2;grid-row:2;aspect-ratio:3/2;margin:14px 0 0 0}
  .hero .intro{grid-column:2;grid-row:3;padding:24px var(--m) var(--m) 0!important}
}

/* v6: Bild breiter, Navigation oben auf dem Bild, Text im Offwhite-Kasten */
.hero{grid-template-columns:auto minmax(0,1fr)}
.hero .ph{grid-column:2;grid-row:1/4;position:relative;z-index:0}
.hero .top{grid-column:2;grid-row:1;justify-self:end;align-self:start;position:relative;z-index:1;flex-direction:row;background:var(--paper);padding:14px var(--m) 16px 22px}
.hero .top nav{flex-direction:row;gap:4px 22px}
.hero .top > span{display:none}
.hero .intro{grid-column:2;grid-row:3;justify-self:start;align-self:end;position:relative;z-index:1;background:var(--paper);padding:26px 30px 24px var(--m)!important;max-width:min(420px,90%)}
@media (max-width:760px){
  .hero{grid-template-columns:auto minmax(0,1fr)}
  .hero .ph{grid-column:2;grid-row:1/3;aspect-ratio:auto;margin:0;min-height:72svh}
  .hero .top{grid-column:2;grid-row:1;padding:10px var(--m) 12px 14px}
  .hero .top nav{flex-wrap:wrap;gap:2px 14px;justify-content:flex-end}
  .hero .intro{grid-column:2;grid-row:2;padding:18px 18px 16px 16px!important;max-width:92%}
}

/* v7: Text als einzeilige Bildunterschrift am unteren Bildrand */
.hero .intro{flex-direction:row;align-items:baseline;gap:28px;max-width:none;padding:14px 26px 15px var(--m)!important}
.hero .intro h1{max-width:none;white-space:nowrap;font-size:clamp(15px,1.15vw,18px)}
.hero .intro .claim{white-space:nowrap}
@media (max-width:760px){
  .hero .intro{flex-direction:column;gap:10px;max-width:92%}
  .hero .intro h1{white-space:normal}
}

.hero .top{background:none;padding:var(--m) var(--m) 0 0}
@media (max-width:760px){.hero .top{padding:12px var(--m) 0 0}}

/* v8: Unterschrift ohne Fläche, größer, Medium, hell auf dem Bild */
.hero .intro{background:none;padding:0 var(--m) var(--m) clamp(20px,2.4vw,40px)!important}
.hero .intro h1{font-weight:500;font-size:clamp(20px,1.9vw,30px);color:var(--paper);text-shadow:0 1px 14px rgba(31,42,68,.35)}
.hero .intro .link{color:var(--paper);text-decoration-color:var(--paper);font-size:clamp(15px,1.15vw,18px);text-shadow:0 1px 10px rgba(31,42,68,.35)}
@media (max-width:760px){.hero .intro{padding:0 var(--m) 18px 16px!important}.hero .intro h1{font-size:19px}}

.hero .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,rgba(31,42,68,.5),rgba(31,42,68,.18) 45%,rgba(31,42,68,0));pointer-events:none}

/* Button: eckig, wenig Padding, Lichtfleck folgt der Maus */
.btn{position:relative;display:inline-block;overflow:hidden;isolation:isolate;background:var(--prussian);color:var(--paper);font:400 13px/1 "ABC Favorit Mono","Courier New",monospace;letter-spacing:0;text-transform:lowercase;padding:9px 16px;border-radius:0;text-decoration:none;--x:50%;--y:50%}
.btn::before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(circle at var(--x) var(--y),#5A86C0 0%,#3F74B5 22%,rgba(63,116,181,0) 55%);opacity:0;transition:opacity .35s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;mix-blend-mode:overlay;filter:contrast(1.8);transition:opacity .35s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.btn:hover::after,.btn:focus-visible::after{opacity:1}
.btn:focus-visible{outline:2px solid var(--prussian);outline-offset:3px}
.statement .row .cta{grid-column:8/13}
.contact .row{align-items:center}
@media (max-width:760px){.statement .row .cta{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.btn::before,.btn::after{transition:none}}

/* v9: mehr Luft um den Namen */
.hero .name{padding:clamp(40px,7vh,80px) clamp(44px,5vw,96px) clamp(40px,7vh,80px) clamp(36px,4.5vw,84px);gap:.16em}
@media (max-width:760px){.hero .name{padding:24px 20px 24px 16px;gap:.12em}}

.hero .name{padding:clamp(48px,9vh,100px) clamp(64px,8vw,150px) clamp(48px,9vh,100px) clamp(56px,7vw,130px);gap:.22em}
@media (max-width:760px){.hero .name{padding:28px 24px 28px 20px;gap:.16em}}

.hero .name{gap:.75em}
@media (max-width:760px){.hero .name{gap:.5em}}

/* v10: H1 dunkel in der hellen Spalte oben, kein Overlay */
.hero .ph::after{display:none}
.hero .intro{grid-column:1;grid-row:1;justify-self:start;align-self:start;flex-direction:column;align-items:flex-start;gap:14px;background:none;max-width:none;padding:var(--m) var(--m) 0 clamp(56px,7vw,130px)!important;z-index:2}
.hero .intro h1{white-space:normal;max-width:17ch;color:var(--ink);text-shadow:none;font-weight:500;font-size:clamp(17px,1.35vw,21px);line-height:1.3}
.hero .intro .link{color:var(--prussian);text-decoration-color:var(--prussian);text-shadow:none;font-size:15px}
@media (max-width:760px){
  .hero .intro{grid-column:1/3;grid-row:3;padding:20px var(--m) var(--m) 16px!important}
  .hero .ph{grid-row:1/3}
}

.hero .name{padding-top:clamp(170px,24vh,260px)}
@media (max-width:760px){
  .hero .name{grid-row:1/3;padding-top:24px}
  .hero .intro{grid-row:3}
}

/* v11: H1 unter dem Namen */
.hero .name{padding-top:clamp(48px,9vh,100px);padding-bottom:clamp(190px,26vh,280px)}
.hero .intro{grid-row:3;align-self:end;padding:0 var(--m) var(--m) clamp(56px,7vw,130px)!important}
@media (max-width:760px){
  .hero .name{padding-top:24px;padding-bottom:24px}
  .hero .intro{grid-row:3;padding:20px var(--m) var(--m) 16px!important}
}

.hero .name{padding-top:calc(var(--m) + 6px);padding-bottom:clamp(230px,31vh,330px)}
.hero .v1,.hero .v2{align-self:flex-start}
@media (max-width:760px){.hero .name{padding-top:20px;padding-bottom:24px}}

/* Hover-Licht auf grossen Ueberschriften */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.fit,.hero .vfit{--x:50%;--y:50%;background-image:radial-gradient(circle at var(--x) var(--y),#6E95CB 0,#3F74B5 calc(var(--r) * .45),var(--prussian) var(--r));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:--r .55s cubic-bezier(.2,.6,.2,1)}
.fit:hover,.hero .vfit:hover{--r:clamp(160px,18vw,320px)}
@media (hover:none),(prefers-reduced-motion:reduce){.fit,.hero .vfit{transition:none}}

.hero .name{pointer-events:auto}

/* Bilder bis an den Seitenrand */
@media (min-width:761px){
  .svc .ph{margin-left:calc(-1 * var(--m));max-width:none}
  .svc:nth-child(even) .ph{margin-left:0;margin-right:calc(-1 * var(--m))}
  .about .ph{margin-left:calc(-1 * var(--m));max-width:none}
}

/* Hover: Box groesser damit nichts abgeschnitten wird, langsamer */
.fit{padding-block:.14em;margin-block:-.14em}
.hero .vfit{padding:.16em;margin:-.16em}
.fit,.hero .vfit{transition:--r 1.8s cubic-bezier(.25,.6,.2,1)}

.statement .fit{margin-block:-.09em}
.svc .fit,.proj .fit,.contact .fit{margin-block:-.14em}

/* Projekte als Plakate: Name riesig, freigestelltes Produkt davor */
.plates{padding-top:clamp(50px,7vw,100px)}
.plate{position:relative;min-height:min(92svh,900px);display:flex;align-items:center;padding:0 var(--m);border-top:1.5px solid var(--prussian);overflow:clip}
.plate:last-child{border-bottom:1.5px solid var(--prussian)}
.plate .fit{position:relative;z-index:1;width:100%;line-height:.82}
.plate .obj{position:absolute;z-index:2;left:var(--ox,60%);top:50%;height:var(--oh,70%);transform:translate(-50%,-50%);pointer-events:none}
.plate .obj img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 30px 40px rgba(31,42,68,.18))}
.plate .cap{position:absolute;z-index:3;left:var(--m);right:var(--m);bottom:var(--m);display:flex;align-items:baseline;gap:18px 28px;flex-wrap:wrap}
.plate .cap p{max-width:44ch;margin:0}
.plate .cap .no{font-family:"ABC Favorit Mono",monospace;font-size:13px;color:var(--prussian)}
.plate .cap .link{margin-left:auto}
@media (max-width:760px){
  .plate{min-height:0;flex-direction:column;align-items:stretch;padding:56px var(--m) 28px}
  .plate .obj{position:relative;left:auto;top:auto;transform:none;height:auto;width:62%;margin:-10vw auto 0}
  .plate .obj img{width:100%;height:auto}
  .plate .cap{position:relative;left:auto;right:auto;bottom:auto;margin-top:22px;flex-direction:column;align-items:flex-start}
  .plate .cap .link{margin-left:0}
}

/* Plakate v2: Logo gross im Hintergrund, Produkt und freigestellte Sections davor */
.plate .logo{position:absolute;inset:0 var(--m);display:flex;align-items:center;justify-content:center;z-index:1}
.plate .logo img{width:100%;height:auto;max-height:78%;object-fit:contain}
.plate .sec{position:absolute;z-index:2;left:var(--sx);top:var(--sy);width:var(--sw);margin:0;background:#fff;box-shadow:0 24px 50px rgba(31,42,68,.16),0 2px 6px rgba(31,42,68,.08)}
.plate .sec img{width:100%;height:auto}
.plate .obj{z-index:3}
.plate .cap{z-index:4}
@media (max-width:760px){
  .plate .logo{position:relative;inset:auto;padding:0}
  .plate .logo img{max-height:none}
  .plate .sec{position:relative;left:auto;top:auto;width:100%;margin-top:18px}
}

/* Mobile Menue-Button */
.menu-btn{display:none;font:400 13px/1 "ABC Favorit Mono","Courier New",monospace;text-transform:lowercase;background:var(--prussian);color:var(--paper);border:0;border-radius:0;padding:9px 14px;cursor:pointer}
.menu-btn:focus-visible{outline:2px solid var(--prussian);outline-offset:3px}
.mnav{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--m) calc(env(safe-area-inset-bottom,0px) + 28px)}
.mnav[hidden]{display:none}
.mnav .menu-close{display:block;align-self:flex-end}
.mnav nav{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.mnav nav a{font-family:var(--text);font-weight:500;font-size:clamp(34px,10vw,48px);line-height:1.15;color:var(--prussian);text-decoration:none}
.mnav-mail{margin-top:36px;font-family:"ABC Favorit Mono",monospace;font-size:14px;color:var(--ink)}
@media (max-width:760px){
  .hero .top nav{display:none}
  .menu-btn{display:block;position:absolute;z-index:5;top:12px;right:var(--m)}
  .mnav .menu-close{position:static}
  body.menu-open{overflow:hidden}
}

/* Portraet nach dem Slogan, Hochformat 2:3 */
.statement .row{grid-template-rows:auto auto;align-items:end}
.statement .row .portrait{grid-column:1/6;grid-row:1/3;aspect-ratio:2/3;margin:0 0 0 calc(-1 * var(--m));max-width:none}
.statement .row p{grid-column:7/12;grid-row:1;align-self:end}
.statement .row .cta{grid-column:7/12;grid-row:2;align-self:start}
@media (max-width:760px){
  .statement .row .portrait{grid-column:1/-1;grid-row:auto;margin:0 calc(-1 * var(--m));width:auto}
  .statement .row p,.statement .row .cta{grid-column:1/-1;grid-row:auto}
}

.statement .row .portrait{grid-column:2/5;margin:0}
@media (max-width:760px){.statement .row .portrait{margin:0;width:72%}}

.statement .row .portrait{grid-column:2/8;aspect-ratio:3/2;margin:0}
.statement .row p,.statement .row .cta{grid-column:9/13}
@media (max-width:760px){.statement .row .portrait{grid-column:1/-1;width:100%;margin:0}.statement .row p,.statement .row .cta{grid-column:1/-1}}

@media (min-width:761px){
  .statement .row .portrait{grid-column:7/13;margin:0 calc(-1 * var(--m)) 0 0}
  .statement .row p,.statement .row .cta{grid-column:1/6}
}
.statement .cta .partner{display:block;height:26px;width:auto;margin-top:clamp(40px,5vw,64px);opacity:.9}
footer{align-items:center}
footer .partner-f{height:18px;width:auto;opacity:.7}
.svc .kw{display:flex;gap:14px;align-items:baseline;font:500 15px/1.3 var(--sans,"ABC Favorit"),sans-serif;color:var(--ink);margin:0;letter-spacing:0}
.svc .kw .no{font-size:14px}
.svc .more{align-self:flex-start;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;font-size:15px}
.svc .more:hover{color:var(--prussian);text-decoration-thickness:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* plates v2: collage + caption row */
.plate{display:block;min-height:0;padding:0 var(--m)}
.plate .stage{position:relative;height:min(84svh,820px);display:flex;align-items:center}
.plate .logo{inset:0 2%}
.plate .logo img{max-height:56%}
.plate .sec{transform:rotate(var(--r,0deg))}
.plate .sec.phone{border-radius:14px;overflow:hidden;background:#fff}
.plate .cap{position:relative;left:auto;right:auto;bottom:auto;display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr) auto;align-items:start;gap:16px 40px;padding:28px 0 40px;border-top:1px solid rgba(0,49,83,.18)}
.plate .cap .no{padding-top:3px}
.plate .cap h3{font:500 17px/1.3 "ABC Favorit",sans-serif;margin:0 0 6px;color:var(--prussian)}
.plate .cap p{max-width:46ch}
.plate .tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.plate .tags li{font-size:13px;line-height:1;padding:7px 10px;border:1px solid rgba(0,49,83,.28);color:var(--ink)}
.plate .cap .link{margin-left:0;white-space:nowrap}
@media (max-width:900px){
  .plate{padding:0 var(--m)}
  .plate .stage{height:auto;flex-direction:column;align-items:stretch;padding:48px 0 0}
  .plate .logo{position:relative;inset:auto}
  .plate .logo img{max-height:none;width:100%}
  .plate .sec{position:relative;left:auto;top:auto;width:88%;margin:18px 0 0;transform:rotate(var(--r,0deg))}
  .plate .sec:nth-of-type(even){margin-left:auto}
  .plate .sec.phone{width:46%;margin-inline:auto}
  .plate .obj{position:relative;left:auto;top:auto;transform:none;height:auto;width:58%;margin:-8vw auto 0}
  .plate .cap{grid-template-columns:1fr;gap:14px;padding:24px 0 36px;margin-top:24px}
}
@media (max-width:900px){.plate .sec.phone{display:none}.plate .sec{width:84%}.plate .obj{width:52%;margin-top:-12vw}}

/* projects v3: grid */
.pjs{padding-top:clamp(40px,6vw,90px)}
.pj{padding:0 var(--m) clamp(90px,11vw,160px)}
.pj .meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 22px;padding:16px 0 18px;border-top:1.5px solid var(--prussian)}
.pj .meta .no{font:400 13px/1 "ABC Favorit Mono",monospace;color:var(--prussian)}
.pj .meta h3{font:500 17px/1.2 "ABC Favorit",sans-serif;margin:0;color:var(--prussian)}
.pj .tags{list-style:none;margin:0 0 0 auto;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.pj .tags li{font-size:13px;color:var(--muted,#5b6475)}
.pj .pgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;gap:var(--gap)}
.pj figure{margin:0;overflow:hidden;background:#C9D3DB}
.pj figure img{width:100%;height:100%;object-fit:cover;display:block}
.pj .pa{grid-column:1/9;grid-row:1/3;aspect-ratio:3/2}
.pj .pb{grid-column:9/13;grid-row:1}
.pj .pc{grid-column:9/13;grid-row:2;align-self:end;background:#fff}
.pj .pc img{object-fit:contain;height:auto}
.pj .pb img{object-position:top}
.pj .pb img.cut{object-fit:contain;padding:8%}
.pj .pgrid.empty{display:block;padding:clamp(40px,6vw,90px) 0}
.pj .foot{display:flex;justify-content:space-between;align-items:baseline;gap:20px 40px;flex-wrap:wrap;padding-top:20px}
.pj .foot p{margin:0;max-width:52ch}
@media (max-width:900px){
  .pj .tags{margin-left:0;width:100%}
  .pj .pa{grid-column:1/-1;grid-row:auto}
  .pj .pb{grid-column:1/7;grid-row:auto}
  .pj .pc{grid-column:7/-1;grid-row:auto;align-self:center}
}
.pj .pgrid{grid-template-rows:1fr auto}
.pj .pb{position:relative;min-height:0}
.pj .pb img{position:absolute;inset:0}
@media (max-width:900px){.pj .pb{aspect-ratio:4/5}}
/* projects v4 */
.pj .meta{align-items:center;padding:22px 0 24px}
.pj .meta h3.lg{margin:0;line-height:0}
.pj .meta h3.lg img{height:clamp(30px,3.2vw,46px);width:auto;display:block}
.pj .tags{gap:8px 10px}
.pj .tags li{font-size:15px;line-height:1;color:var(--ink);padding:9px 13px;border:1px solid rgba(0,49,83,.3)}
.pj .pb.prod{background:#C9D3DB}
.pj .pb.prod img{object-fit:contain;padding:9% 10%;filter:drop-shadow(0 24px 30px rgba(31,42,68,.22))}
.pj .pc{background:#fff;padding:0}
@media (max-width:900px){.pj .tags li{font-size:14px;padding:8px 11px}.pj .pb{aspect-ratio:1/1}}
@media (max-width:900px){.pj .pb,.pj .pc{grid-column:1/-1}.pj .pb{aspect-ratio:4/3}}

/* projects v5: staggered cards */
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(60px,8vw,120px) var(--m) clamp(40px,6vw,80px)}
.card .cimg{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#C9D3DB;color:#fff;text-decoration:none}
.card .cbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.card .cimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,40,.32) 0%,rgba(20,26,40,0) 30%);pointer-events:none}
.card .clogo{position:absolute;z-index:2;left:clamp(18px,2.4vw,34px);top:clamp(18px,2.4vw,34px);height:clamp(26px,2.6vw,40px);width:auto;filter:brightness(0) invert(1)}
.card .cmore{position:absolute;z-index:2;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);background:var(--prussian);color:var(--paper);font:400 13px/1 "ABC Favorit Mono",monospace;text-transform:lowercase;padding:9px 16px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.card .cimg:hover .cbg{transform:scale(1.04)}
.card .cimg:hover .cmore,.card .cimg:focus-visible .cmore{opacity:1;transform:none}
.card .cph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 clamp(28px,4vw,64px)/1 "Staff X Wide",sans-serif;color:var(--prussian)}
.card .cname{font:500 18px/1.25 "ABC Favorit",sans-serif;color:var(--prussian);margin:18px 0 4px}
.card .ctype{margin:0 0 14px;max-width:44ch}
.card .tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.card .tags li{font-size:14px;line-height:1;padding:8px 11px;border:1px solid rgba(0,49,83,.3);color:var(--ink)}
.card.c1{grid-column:2/6}
.card.c2{grid-column:8/12;margin-top:clamp(140px,16vw,260px)}
.card.c3{grid-column:4/8;margin-top:clamp(60px,8vw,120px)}
@media (max-width:900px){
  .cards{grid-template-columns:1fr;row-gap:64px}
  .card.c1,.card.c2,.card.c3{grid-column:1/-1;margin-top:0}
  .card .cmore{opacity:1;transform:none}
}
.card .cimg:hover .cbg{transform:none}
.card .cbg{transition:none}
.card .cimg::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,49,83,.55);opacity:0;transition:opacity .5s ease}
.card .cimg:hover::before,.card .cimg:focus-visible::before{opacity:1}
.card .cmore{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,calc(-50% + 8px));background:var(--paper);color:var(--prussian)}
.card .cimg:hover .cmore,.card .cimg:focus-visible .cmore{transform:translate(-50%,-50%)}
@media (max-width:900px){.card .cmore{opacity:0}.card .cimg:hover .cmore{opacity:1}}
.card .cl{display:inline-block;margin-top:18px}
.link{font-weight:400;text-decoration-thickness:1px;text-underline-offset:5px}
.link:hover{text-decoration-thickness:1.5px}
.card .cl{font-size:15px}
.card .clogo{height:clamp(44px,4.6vw,68px)}
.card .clogo.l1{filter:brightness(0)}
.card.c1 .cimg::after{display:none}
.card .chead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 4px}
.card .chead .cname{margin:0}
.card .cstat{display:inline-flex;align-items:center;gap:7px;font:400 13px/1 "ABC Favorit Mono",monospace;color:var(--prussian);white-space:nowrap}
.card .cstat::before{content:"";width:7px;height:7px;border-radius:50%;background:#3F74B5}
.card .clogo.l3{height:auto;width:62%}
.card .clogo.l1{top:auto;bottom:clamp(18px,2.4vw,34px)}
.card .tags{gap:6px 20px}
.card .tags li{border:0;padding:0;font:400 13px/1.5 "ABC Favorit Mono",monospace;color:var(--ink);opacity:.8}
.card .tags{gap:4px 10px}
.card .tags li:not(:last-child)::after{content:"/";margin-left:10px;opacity:.45}
.card .cph img{width:52%;height:auto}
.card .tags li:not(:last-child)::after{content:"#"}
.card .clogo.l2{height:auto;width:40%}
.card .clogo.l2{width:66%;mix-blend-mode:difference}
.card .clogo.l2{mix-blend-mode:normal}
@media (min-width:901px){.card.c3{grid-column:3/7;margin-top:calc(-1 * clamp(40px,5vw,90px))}}

/* more shops + app */
.more-shops{grid-column:8/12;align-self:end;margin-top:clamp(40px,5vw,80px)}
.ms-label{font:400 13px/1.4 "ABC Favorit Mono",monospace;color:var(--ink);opacity:.8;margin:0 0 14px}
.ms-list{list-style:none;margin:0 0 22px;padding:0;font:400 clamp(20px,1.8vw,28px)/1.35 "ABC Favorit",sans-serif;color:var(--prussian)}
.app{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:start;margin:clamp(60px,8vw,120px) var(--m) 0;padding-top:clamp(28px,3vw,40px);border-top:1.5px solid var(--prussian)}
.app-icon{width:clamp(64px,6vw,96px);height:auto}
.app h2{font:500 clamp(22px,2vw,30px)/1.2 "ABC Favorit",sans-serif;color:var(--prussian);margin:0 0 10px}
.app-txt p:last-child{max-width:56ch;margin:0}
.app-meta{text-align:right}
.app-rating{margin:0 0 14px}
.app-rating span{font:600 clamp(28px,2.6vw,40px)/1 "Staff X Wide",sans-serif;color:var(--prussian);display:block;margin-bottom:6px}
@media (max-width:900px){
  .more-shops{grid-column:1/-1;margin-top:0}
  .app{grid-template-columns:auto 1fr}
  .app-meta{grid-column:1/-1;text-align:left}
}
.ms-logos{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.4vw,36px) clamp(24px,3vw,48px);align-items:center}
.ms-logos li{display:flex;align-items:center;height:clamp(34px,3.2vw,48px)}
.ms-logos img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.ms-logos li{height:clamp(28px,2.6vw,40px)}
.ms-logos img{max-width:78%}
.ms-logos{font-size:clamp(7px,.72vw,10.5px)}
.ms-logos li{height:auto;min-height:5em}
.ms-logos img{max-width:100%;height:auto;max-height:none;opacity:.55}
.ms-logos{row-gap:clamp(16px,1.8vw,26px)}
.ms-logos li{min-height:4.6em}
/* logos below gallery */
.more-shops{grid-column:auto;margin:clamp(70px,9vw,140px) var(--m) 0;padding-top:clamp(24px,2.6vw,36px);border-top:1px solid rgba(0,49,83,.2)}
.more-shops .ms-logos{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:clamp(20px,2.6vw,44px);row-gap:clamp(18px,2.2vw,32px);font-size:clamp(6px,.6vw,9px)}
.more-shops .ms-logos li{justify-content:center}
@media (max-width:1100px){.more-shops .ms-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.more-shops .ms-logos{grid-template-columns:repeat(2,minmax(0,1fr));font-size:7px}}
.more-shops .ms-logos{margin-bottom:0}
.app{align-items:center}
.ms-label{font:400 15px/1.4 "ABC Favorit",sans-serif;opacity:.7}
.app{grid-template-columns:auto minmax(0,1fr);max-width:880px;margin-left:auto;margin-right:auto;width:calc(100% - 2 * var(--m));align-items:start}
.app-meta{grid-column:2;text-align:left;margin-top:-6px}
.card.c4{grid-column:8/12;margin-top:clamp(60px,8vw,140px)}
.card .clogo.l4{filter:brightness(0) invert(1);height:auto;width:66%}
@media (min-width:901px){.card.c3{grid-row:2}.card.c4{grid-row:2}}
@media (max-width:900px){.card.c4{grid-column:1/-1;margin-top:0}}
.app2{padding:clamp(110px,14vw,200px) var(--m) 0}
.app2 .fit{display:block;font-weight:700;line-height:.82;margin-block:-.14em}
.app2-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px var(--gap);margin-top:clamp(28px,3vw,44px)}
.app2-row .kw{grid-column:1/5;font:500 15px/1.3 "ABC Favorit",sans-serif;color:var(--ink);margin:0}
.app2-row p{grid-column:5/10;margin:0;max-width:52ch}
.app2-row .link{grid-column:10/13;justify-self:end;align-self:start}
@media (max-width:900px){.app2-row .kw,.app2-row p,.app2-row .link{grid-column:1/-1;justify-self:start}}
.card .clogo.l4{filter:brightness(0)}
.card.c4 .cimg::after{display:none}
.app2{padding:clamp(80px,10vw,140px) var(--m) 0}
.app2-row{margin-top:0;align-items:start}
.app2-h{grid-column:1/5}
.app2-big{display:block;font:600 clamp(24px,2.4vw,36px)/1 "Staff X Wide",sans-serif;color:var(--prussian);margin-bottom:10px}
.app2-row .kw{grid-column:auto}
@media (max-width:900px){.app2-h{grid-column:1/-1}}
.app2-big{font-weight:800;letter-spacing:-.01em}
.app2-icon{width:clamp(44px,3.6vw,56px);height:auto;display:block;margin-bottom:18px}
.app2-links{grid-column:10/13;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media (max-width:900px){.app2-links{grid-column:1/-1;justify-self:start;align-items:flex-start}}
.card .clogo.l4{top:auto;bottom:clamp(18px,2.4vw,34px);filter:brightness(0) invert(1)}
.card.c4 .cimg::after{display:block;background:linear-gradient(0deg,rgba(20,26,40,.55) 0%,rgba(20,26,40,0) 34%)}
.app2-icon{margin:20px 0 0}
.app2-h{display:flex;align-items:center;gap:clamp(14px,1.4vw,20px)}
.app2-icon{margin:0;width:auto;height:clamp(56px,4.6vw,70px);flex:none}
/* nav v2 */
.hero .top nav{align-items:center;gap:4px clamp(18px,1.8vw,28px);font-size:15px}
.hero .top nav > a,.dd > a{color:var(--ink)}
.hero .top nav .btn{margin-left:6px;color:var(--paper)}
.hero .top nav .btn:hover{text-decoration:none}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:-16px;padding:14px 16px;margin-top:10px;background:var(--paper);display:flex;flex-direction:column;gap:8px;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .25s,transform .25s,visibility .25s;z-index:20}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{text-decoration:none;color:var(--ink)}
.dd-menu a:hover{text-decoration:underline;text-underline-offset:4px}
.work-head{padding:0 var(--m)}
.work-head .kw{font:500 15px/1.3 "ABC Favorit",sans-serif;color:var(--ink);margin:0 0 14px}
.work-head .fit{font-weight:800;line-height:.82;margin-block:-.14em}
.work .cards{padding-top:clamp(50px,6vw,90px)}
/* quotes */
.quotes{padding:clamp(110px,14vw,200px) var(--m) 0}
.q-big{margin:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.q-big blockquote{grid-column:1/11;margin:0;font:400 clamp(24px,2.6vw,40px)/1.28 "ABC Favorit",sans-serif;color:var(--prussian);letter-spacing:-.01em}
.q-big figcaption{grid-column:1/11;display:flex;align-items:center;gap:18px;margin-top:clamp(18px,2vw,28px)}
.q-big figcaption img{height:30px;width:auto;opacity:.75}
.q-small{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,56px);margin-top:clamp(70px,8vw,120px)}
.q-small figure{margin:0}
.q-small blockquote{margin:0 0 14px}
.q-small figcaption,.q-big figcaption span{font-size:14px;opacity:.75}
@media (max-width:900px){.q-big blockquote,.q-big figcaption{grid-column:1/-1}.q-small{grid-template-columns:1fr}}
@media (min-width:901px){.card.c4{grid-column:9/13}}
.dd-cta{margin-left:6px}
.dd-cta .dd-menu{left:auto;right:0;min-width:100%}
.hero .top nav .dd-cta .btn{margin-left:0}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.pros{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pros li{padding:16px 0;border-top:1px solid rgba(0,49,83,.18)}
.pros li:last-child{border-bottom:1px solid rgba(0,49,83,.18)}
.pros strong{display:block;font-weight:500;color:var(--prussian);margin-bottom:4px}
.about .txt{max-width:44ch}
.about .txt .kw{font:500 15px/1.3 "ABC Favorit",sans-serif;color:var(--ink);margin:0;letter-spacing:0}
.about .txt .fit{font-weight:700;line-height:.82;margin-block:-.14em}
.about .txt{max-width:none}
.about .pros{max-width:44ch;margin-top:8px}
.vs{margin-top:10px}
.vs-h,.vs li{display:grid;grid-template-columns:1fr 1.25fr;gap:20px}
.vs-h{font-size:14px;opacity:.6;padding-bottom:10px}
.vs ul{list-style:none;margin:0;padding:0}
.vs li{padding:13px 0;border-top:1px solid rgba(0,49,83,.18);align-items:baseline}
.vs li:last-child{border-bottom:1px solid rgba(0,49,83,.18)}
.vs-a{opacity:.5;text-decoration:line-through;text-decoration-thickness:1px}
.vs-b{color:var(--prussian);font-weight:500}
@media (max-width:600px){.vs-h,.vs li{gap:12px;font-size:15px}}
.tools{margin-top:28px}
.seo{padding:clamp(80px,9vw,140px) var(--m) 0}.seo h2{font:500 15px/1.3 "ABC Favorit",sans-serif;color:var(--prussian);margin:0 0 28px;max-width:60ch}.seo-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}.seo h3{font:500 14px/1.3 "ABC Favorit",sans-serif;color:var(--ink);margin:0 0 8px}.seo p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}.seo a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.seo .seo-nap{margin-top:32px;font:400 13px/1.6 "ABC Favorit Mono",monospace}@media (max-width:1000px){.seo-cols{grid-template-columns:1fr 1fr}}@media (max-width:600px){.seo-cols{grid-template-columns:1fr}}

.about .tools-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:clamp(32px,4vw,64px)}.about .tools-row .tools{margin-top:0;grid-column:span 6}@media (max-width:760px){.about .tools-row .tools{grid-column:1/-1}}

.tools-l{font-size:14px;opacity:.7;margin:0 0 10px}
.tools .tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.tools .tags li{font:400 13px/1.5 "ABC Favorit Mono",monospace;color:var(--ink);opacity:.8}
.tools .tags li:not(:last-child)::after{content:"#";margin-left:10px;opacity:.45}
.contact{position:relative}
.contact .body{position:relative;padding-top:0}
.contact .body > .fit{position:relative;z-index:2;margin-top:-.62em}
.contact .body > .fit{margin-top:-1.02em}
.contact .row{margin-top:clamp(40px,5vw,72px)}
.mail{border-bottom:0;box-shadow:inset 0 -2px 0 var(--prussian);transition:box-shadow .2s}
.mail:hover{border-bottom:0;box-shadow:inset 0 -4px 0 var(--prussian)}
.link,.link:hover{text-decoration-thickness:1px}
.contact .body > .fit{margin-top:-.81em}
.k-row{align-items:flex-end}
.k-left{display:flex;flex-direction:column;gap:14px}
.k-note{margin:0 0 6px;max-width:46ch;opacity:.8}
.k-line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.k-tel{font-weight:500;color:var(--prussian);font-size:clamp(1.1rem,2vw,1.6rem);text-decoration:none}
.k-copy{background:none;border:0;padding:0;font:400 14px/1 "ABC Favorit",sans-serif;color:var(--ink);opacity:.8;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.k-copy:hover{opacity:1}
.k-right{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.btn.btn-lg{font-size:16px;padding:16px 30px}
.k-alt{display:flex;gap:22px;flex-wrap:wrap}
@media (max-width:760px){.k-right{align-items:flex-start}}
/* faq */
.faq{padding:clamp(110px,14vw,200px) var(--m) 0}
.faq > .kw{font:500 15px/1.3 "ABC Favorit",sans-serif;color:var(--ink);margin:0 0 14px}
.faq > .fit{font-weight:700;line-height:.82;margin-block:-.14em}
.faq-list{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.faq-i{grid-column:1/-1;border-top:1px solid rgba(0,49,83,.2)}
.faq-i:last-child{border-bottom:1px solid rgba(0,49,83,.2)}
.faq-i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i h3{margin:0;font:500 clamp(18px,1.6vw,24px)/1.3 "ABC Favorit",sans-serif;color:var(--prussian)}
.faq-x{position:relative;flex:none;width:16px;height:16px}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--prussian);transition:transform .3s}
.faq-x::after{transform:rotate(90deg)}
.faq-i[open] .faq-x::after{transform:rotate(0)}
.faq-i p{margin:0 0 26px;max-width:62ch}
/* footer */
.ft{display:block;background:var(--prussian);color:var(--paper);padding:clamp(60px,8vw,110px) var(--m) 0;margin-top:clamp(110px,14vw,200px);overflow:hidden}
.ft a{color:var(--paper);text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.ft-say{margin:0;font:400 clamp(20px,2vw,30px)/1.3 "ABC Favorit",sans-serif;max-width:32ch}
.ft-up{font-size:14px;opacity:.75}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px var(--gap);margin-top:clamp(60px,7vw,100px)}
.ft-cols nav{display:flex;flex-direction:column;gap:8px}
.ft-cols p{margin:0 0 6px;font-size:14px;opacity:.55}
.ft-partner{align-self:start;justify-self:end}
.ft-partner img{height:22px;width:auto;opacity:.8}
.ft-mark{font:800 21.5vw/.8 "Staff X Wide",sans-serif;letter-spacing:-.03em;white-space:nowrap;margin:clamp(60px,7vw,100px) 0 0 -.03em;color:var(--paper);opacity:.95;transform:translateY(.12em)}
.ft-legal{position:relative;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0 22px;font-size:13px;border-top:1px solid rgba(242,239,233,.2);background:var(--prussian)}
.ft-legal nav{display:flex;gap:22px}
.ft-legal span{opacity:.6}
@media (max-width:900px){.ft-cols{grid-template-columns:1fr 1fr}.ft-partner{justify-self:start}}
/* contact v3 */
.contact .k-visual{position:relative}
.contact .k-visual .ph{height:min(70svh,760px);min-height:320px}
.k-head{position:absolute;left:0;right:0;bottom:0;padding:0 var(--m);z-index:2;pointer-events:none}
.k-head .fit{margin:0;line-height:.8;transform:translateY(var(--ky,0px))}
.k-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gap);padding:clamp(48px,6vw,90px) var(--m) 0;align-items:start}
.k-direct{grid-column:1/8;display:flex;flex-direction:column;gap:18px}
.k-book{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.k-book p{margin:0;max-width:40ch}
.k-line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.k-tel{font-size:clamp(1.3rem,3vw,2.4rem)}
.k-wa{font-size:15px}
@media (max-width:900px){.k-direct,.k-book{grid-column:1/-1}.contact .k-visual .ph{height:auto;aspect-ratio:3/2;min-height:0}}
.ft-mark{font-size:calc((100vw - 2 * var(--m)) / 8.28);transform:translateY(.14em)}
.k-head .fit{transform:translateY(.21em)}
.calm{position:fixed;inset:0;z-index:100;background:rgba(15,22,36,.55);display:flex;align-items:center;justify-content:center;padding:var(--m)}
.calm[hidden]{display:none}
.calm-box{background:var(--paper);width:min(1000px,100%);height:min(760px,100%);display:flex;flex-direction:column}
.calm-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:var(--prussian);font-weight:500}
.calm-x{background:var(--prussian);color:var(--paper);border:0;font:400 13px/1 "ABC Favorit Mono",monospace;padding:9px 14px;cursor:pointer}
.calm iframe{flex:1;width:100%;border:0;background:#fff}
.calm-alt{font-size:13px;padding:10px 18px;color:var(--ink);opacity:.7}
.ft-mark{transform:none;line-height:1;padding-bottom:.08em;margin-bottom:clamp(20px,2.4vw,36px)}
.ft-legal{border-top:1px solid rgba(242,239,233,.2)}
.q-src{display:inline-block;margin-top:clamp(40px,5vw,64px);font-size:15px}
.ft-cols nav .ft-partner{margin-top:18px;justify-self:auto}
.ft-cols nav .ft-partner img{height:20px}
/* faq artsy */
.faq > .kw{margin-bottom:0}
.faq-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:clamp(30px,4vw,60px);align-items:start}
.faq-side{grid-column:1/4;position:sticky;top:var(--m)}
.faq-v{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font:800 clamp(90px,11vw,190px)/.8 "Staff X Wide",sans-serif;letter-spacing:-.02em;color:var(--prussian)}
.faq-list{grid-column:4/13;display:block;margin-top:0}
.faq-i{border-top:1px solid rgba(0,49,83,.25)}
.faq-i summary{padding:clamp(22px,2.4vw,34px) 0;align-items:flex-start}
.faq-i h3{font:500 clamp(22px,2.4vw,38px)/1.18 "ABC Favorit",sans-serif;letter-spacing:-.01em;max-width:24ch;transition:color .3s}
.faq-i summary:hover h3,.faq-i[open] h3{color:#3F74B5}
.faq-x{width:clamp(18px,1.6vw,26px);height:clamp(18px,1.6vw,26px);margin-top:.5em}
.faq-x::before,.faq-x::after{height:1px}
.faq-i p{margin:0 0 clamp(26px,3vw,40px) auto;max-width:46ch;width:55%;font-size:17px}
@media (max-width:900px){
  .faq-side{grid-column:1/-1;position:static}
  .faq-v{writing-mode:horizontal-tb;transform:none;font-size:clamp(56px,18vw,90px)}
  .faq-list{grid-column:1/-1}
  .faq-i p{width:auto;margin-left:0}
}
.faq-i h3{font-size:clamp(19px,1.8vw,28px);max-width:30ch}
.faq-x{margin-top:.3em}
.faq-i h3{font-size:17px;line-height:1.35;max-width:60ch}
.faq-i summary{padding:18px 0}
.faq-x{width:14px;height:14px;margin-top:.35em}
.faq-i p{font-size:16px;margin-bottom:24px}
.k-head .fit{transform:translateY(calc(.21em - 2px))}
/* form */
.k-form{grid-column:1/8;display:flex;flex-direction:column;gap:26px}
.k-f2{display:grid;grid-template-columns:1fr 1fr;gap:26px var(--gap)}
.k-f{display:flex;flex-direction:column;gap:6px}
.k-f label{font-size:14px;opacity:.7}
.k-f label span{opacity:1}
.k-f input,.k-f textarea{font:400 clamp(18px,1.6vw,22px)/1.4 "ABC Favorit",sans-serif;color:var(--prussian);background:transparent;border:0;border-bottom:1px solid rgba(0,49,83,.35);border-radius:0;padding:8px 0;outline:none;resize:vertical;transition:border-color .2s}
.k-f input:focus,.k-f textarea:focus{border-bottom-color:var(--prussian);box-shadow:inset 0 -1px 0 var(--prussian)}
.k-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.k-send{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.k-status{margin:0;font-size:15px}
.k-book{grid-column:9/13}
.k-direct{margin-top:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.k-small{color:var(--prussian);text-decoration:none;font-weight:500}
.k-small:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:900px){.k-form,.k-book{grid-column:1/-1}.k-f2{grid-template-columns:1fr}}
button.btn{border:0;cursor:pointer;font-family:"ABC Favorit Mono",monospace}
.k-f textarea{resize:none}
.k-f input:-webkit-autofill,.k-f input:-webkit-autofill:hover,.k-f input:-webkit-autofill:focus,.k-f textarea:-webkit-autofill{-webkit-text-fill-color:var(--prussian);-webkit-box-shadow:0 0 0 1000px var(--paper) inset;box-shadow:0 0 0 1000px var(--paper) inset;caret-color:var(--prussian);transition:background-color 9999s}
.k-f input:autofill{background:transparent}

/* Tablet: Projekte zweispaltig, rechte Spalte versetzt */
@media (min-width:601px) and (max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:72px}
  .card.c1,.card.c3{grid-column:1;margin-top:0}
  .card.c2,.card.c4{grid-column:2;margin-top:0}
  .card.c1{grid-row:1}.card.c2{grid-row:1;margin-top:120px}
  .card.c3{grid-row:2}.card.c4{grid-row:2;margin-top:120px}
}

.mnav-sub{list-style:none;margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px 22px}
.mnav-sub a{font:400 15px/1.3 var(--text);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (max-width:600px){.k-book .btn.btn-lg{display:block;text-align:center;white-space:nowrap;padding:16px 12px;font-size:15px}}

@media (hover:none){.btn:hover::before,.btn:hover::after{opacity:0}}

.ft-cols a[href^="mailto"]{white-space:nowrap}
@media (max-width:420px){.ft-cols{column-gap:20px}.ft-cols a[href^="mailto"]{font-size:14px}}

.k-book .btn.btn-lg{white-space:nowrap;max-width:100%}
@media (max-width:1280px){.k-book .btn.btn-lg{font-size:14px;padding:15px 18px}}

@media (min-width:901px) and (max-width:1000px){.k-book .btn.btn-lg{font-size:13px;padding:14px 14px}}

/* Desktop: projekt anfragen bleibt oben rechts stehen */
.cta-float{position:fixed;z-index:59;top:var(--m);right:var(--m);margin:0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s}
.cta-float.show{opacity:1;visibility:visible;transform:none}
.cta-float .btn{color:var(--paper)}
@media (max-width:900px){.cta-float{display:none}}

.cta-float .dd-menu{background:var(--paper);outline:1px solid var(--rule)}

/* Mobil: Wortmarke waagerecht oben, Bild volle Breite, H1 darunter */
@media (max-width:760px){
  .hero{display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;padding:0!important}
  .hero .top{display:none}
  .hero .menu-btn:not(.menu-close){position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:var(--m);z-index:5}
  .hero .name{order:1;position:relative!important;inset:auto!important;display:flex!important;flex-direction:column;align-items:flex-start;gap:0;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--m) 0!important;grid-column:auto;grid-row:auto}
  .hero .vfit{writing-mode:horizontal-tb!important;transform:none!important;font-size:calc((100vw - 2 * var(--m)) * .2041)!important;line-height:.82!important;padding:.18em .04em .22em 0!important;margin:-.18em -.04em -.22em 0!important;align-self:flex-start!important}
  .hero .ph{order:2;width:auto!important;margin:22px 0 0!important;aspect-ratio:4/5!important;min-height:0!important;height:auto!important;flex:none!important;grid-column:auto;grid-row:auto}
  .hero .ph img{object-position:38% 50%}
  .hero .intro{order:3;align-self:stretch!important;width:auto!important;position:static!important;max-width:none!important;background:none!important;padding:22px var(--m) 8px!important;display:flex!important;flex-direction:column;align-items:flex-start;gap:12px}
  .hero .intro h1{color:var(--ink)!important;text-shadow:none!important;font-size:21px!important;white-space:normal!important;max-width:22ch!important}
  .hero .intro .link{color:var(--prussian)!important;text-decoration-color:currentColor!important;text-shadow:none!important;font-size:16px!important}
}
.nw{white-space:nowrap}

@media (max-width:760px){
  .hero .ph{order:1!important;margin:0!important}
  .hero .name{order:2!important;padding:26px var(--m) 0!important}
  .hero .intro{order:3!important;padding-top:20px!important}
  .hero .menu-btn:not(.menu-close){top:calc(env(safe-area-inset-top,0px) + var(--m))}
}

/* Leistungen als breites Menü */
.dd-menu.mega{display:grid;grid-template-columns:repeat(3,minmax(0,230px));gap:0 34px;padding:22px 26px 24px;white-space:normal;left:-26px;width:max-content}
.dd-menu.mega p{font-size:13px;color:var(--muted);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.dd-menu.mega a{display:block;padding:7px 0;text-decoration:none}
.dd-menu{outline:none;border:1px solid rgba(0,49,83,.22);box-shadow:0 22px 44px -26px rgba(0,49,83,.45)}
.dd-menu.mega a b{display:block;font-weight:500;color:var(--prussian)}
.dd-menu.mega a span{display:block;font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}
.dd-menu.mega a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:1100px){.dd-menu.mega{grid-template-columns:repeat(3,minmax(0,190px));gap:0 22px}}

.dd:has(> .mega){position:static}
nav:has(.mega){position:relative}
.dd-menu.mega{left:auto;right:0}
.k-head{position:static;padding:clamp(16px,1.8vw,26px) var(--m) 0}.k-head .fit{transform:none!important}
.fit{padding-right:.06em;margin-right:-.06em}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease var(--rd,0ms),transform .6s cubic-bezier(.2,.6,.2,1) var(--rd,0ms)}.rv.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.facts{list-style:none;margin:clamp(90px,12vw,180px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.facts li{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px)}
.facts b{font-family:var(--wide);font-weight:800;font-size:clamp(56px,7.4vw,128px);line-height:.85;letter-spacing:-.02em;color:var(--prussian);white-space:nowrap}
.facts b i{font-family:var(--text);font-style:normal;font-weight:500;font-size:.5em;vertical-align:.62em;margin-left:.06em}
.facts span{font-size:clamp(14px,1.15vw,18px);line-height:1.35;color:var(--ink);max-width:20ch}
@media (max-width:760px){.facts{grid-template-columns:1fr;gap:34px}.facts li{flex-direction:row;align-items:flex-end;gap:16px}.facts b{font-size:clamp(52px,17vw,80px)}.facts span{padding-bottom:.35em}}

/* ===== Unterseiten ===== */
.sh{position:relative;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:var(--m)}
.sh-mark{font:800 clamp(20px,1.8vw,27px)/1 var(--wide);letter-spacing:-.02em;color:var(--prussian);text-decoration:none;white-space:nowrap}
.sh nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px clamp(18px,1.8vw,28px);font-size:15px}
.sh nav > a,.sh .dd > a:not(.btn){color:var(--ink);text-decoration:none}
.sh nav > a:hover,.sh .dd > a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sh nav > a[aria-current]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sh nav .btn{color:var(--paper)}
.sh .menu-btn{display:none}
@media (max-width:760px){.sh nav{display:none}.sh .menu-btn{display:block;position:static}.sh{padding:14px var(--m)}}

.kw-l{font:500 15px/1.3 var(--text);color:var(--ink);margin:0 0 14px;letter-spacing:0}
.kw-l a{color:inherit}
.muted{color:var(--muted)}

/* Seitenkopf */
.pg-hero{padding:clamp(56px,9vw,150px) var(--m) 0}
.pg-hero .fit{font-weight:800;line-height:.82;margin-block:-.14em}
.pg-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px var(--gap);margin-top:clamp(34px,4.6vw,70px);align-items:end}
.pg-intro .lead{grid-column:1/7;font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:40ch}
.pg-intro .lead p+p{margin-top:.8em}
.pg-intro .side{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media (max-width:900px){.pg-intro .lead,.pg-intro .side{grid-column:1/-1}}
.pg-img{margin-top:clamp(56px,7vw,110px)}
.pg-img .ph{aspect-ratio:3/2;max-height:88svh;width:100%}
@media (max-width:760px){.pg-img .ph{max-height:none}}

/* Preis */
.price-l{font-size:15px;margin:0}
.price-v{font:500 clamp(40px,4.6vw,70px)/1 var(--text);letter-spacing:-.02em;color:var(--prussian);margin:0}
.price-n{font-size:14px;color:var(--muted);margin:0;max-width:34ch}

/* Abschnitte: Keyword links, Inhalt rechts */
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px var(--gap);padding:clamp(90px,11vw,170px) var(--m) 0;align-items:start}
.sec > .sec-h{grid-column:1/5;position:sticky;top:calc(var(--m) + 10px)}
.sec > .sec-h h2{font:500 15px/1.35 var(--text);color:var(--ink);margin:0;max-width:26ch}
.sec > .sec-h .no{display:block;font:600 14px/1 var(--wide2);color:var(--prussian);margin-bottom:10px}
.sec > .sec-b{grid-column:6/13;min-width:0}
@media (max-width:900px){.sec > .sec-h{grid-column:1/-1;position:static}.sec > .sec-b{grid-column:1/-1}}
.sec-big{font:500 clamp(22px,2.1vw,32px)/1.28 var(--text);letter-spacing:-.01em;color:var(--prussian);margin:0 0 .9em;max-width:30ch}

/* Fließtext */
.prose{max-width:66ch;font-size:17px;line-height:1.62}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.05em}
.prose h2{font:500 clamp(23px,2vw,30px)/1.25 var(--text);letter-spacing:-.01em;color:var(--prussian);margin:2.2em 0 .7em;scroll-margin-top:24px}
.prose h3{font:500 19px/1.35 var(--text);color:var(--prussian);margin:1.8em 0 .5em}
.prose h4{font:500 17px/1.4 var(--text);margin:1.4em 0 .4em}
.prose a{color:var(--prussian);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.prose a:hover{text-decoration-thickness:1.5px}
.prose strong{font-weight:500;color:var(--prussian)}
.prose ul,.prose ol{margin:0 0 1.2em;padding:0;list-style:none}
.prose li{position:relative;padding-left:1.3em;margin:0 0 .45em}
.prose ul > li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;background:var(--prussian)}
.prose ol{counter-reset:o}
.prose ol > li{counter-increment:o}
.prose ol > li::before{content:counter(o);position:absolute;left:0;top:.18em;font:400 13px/1.4 "ABC Favorit Mono",monospace;color:var(--prussian)}
.prose .tw{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:520px}
.prose th{text-align:left;font-weight:500;color:var(--prussian);padding:10px 14px 10px 0;border-bottom:1px solid var(--prussian);vertical-align:bottom}
.prose td{padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose blockquote{margin:1.4em 0;padding-left:20px;border-left:1px solid var(--prussian);color:var(--prussian)}
.prose code{font:400 .86em/1.4 "ABC Favorit Mono",monospace;background:rgba(0,49,83,.07);padding:1px 5px}
.prose pre{background:#E8E4DC;padding:16px 18px;overflow-x:auto;margin:0 0 1.3em;font-size:13px}
.prose pre code{background:none;padding:0}
.prose .step{border-top:1px solid var(--rule);padding-top:4px;margin:1.6em 0}
.prose .step h3{margin-top:.8em}
.prose aside.note{border-left:1px solid var(--prussian);padding:2px 0 2px 20px;margin:1.6em 0;color:var(--ink)}
.prose aside.note > *:last-child{margin-bottom:0}
.prose img{max-width:100%;height:auto;margin:1em 0}

/* Liste mit Linien */
.lines{list-style:none;margin:0;padding:0}
.lines li{padding:18px 0;border-top:1px solid var(--rule)}
.lines li:last-child{border-bottom:1px solid var(--rule)}
.lines strong{display:block;font-weight:500;color:var(--prussian);margin-bottom:4px}
.lines p{margin:0;max-width:60ch}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px var(--gap)}
.steps li{border-top:1px solid var(--prussian);padding-top:14px}
.steps .n{display:block;font:400 13px/1 "ABC Favorit Mono",monospace;color:var(--prussian);margin-bottom:14px}
.steps strong{display:block;font-weight:500;color:var(--prussian);margin-bottom:6px}
.steps p{margin:0;font-size:15px;line-height:1.5}

/* Artikel-Liste */
.plist{list-style:none;margin:0;padding:0}
.plist li{border-top:1px solid var(--rule)}
.plist li:last-child{border-bottom:1px solid var(--rule)}
.plist a{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:20px;align-items:center;padding:16px 0;text-decoration:none;color:var(--ink)}
.plist .ph{aspect-ratio:3/2}
.plist .t{display:block;font:500 18px/1.3 var(--text);color:var(--prussian)}
.plist .m{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.plist a:hover .t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:600px){.plist a{grid-template-columns:110px minmax(0,1fr);gap:14px}.plist .t{font-size:16px}}

/* Projektkarten auf Unterseiten */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--gap)}
.pcards .card{grid-column:auto!important;margin-top:0!important}
.pcards .card:nth-child(2){margin-top:clamp(40px,6vw,110px)!important}
@media (max-width:600px){.pcards{grid-template-columns:1fr}.pcards .card:nth-child(2){margin-top:0!important}}

/* FAQ auf Unterseiten */
.faq.sub{padding-top:clamp(100px,12vw,180px)}

/* Kontakt auf Unterseiten etwas weniger Abstand */
.sub-contact{padding-top:clamp(110px,13vw,200px)}

/* Projektseite */
.pj-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px var(--gap);margin:clamp(40px,5vw,70px) 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.pj-facts dt{font-size:14px;color:var(--muted);margin:0 0 6px}
.pj-facts dd{margin:0;font-size:16px;line-height:1.45}
.pj-facts .tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.pj-facts .tags li{font:400 13px/1.5 "ABC Favorit Mono",monospace;color:var(--ink)}
.pj-facts .tags li:not(:last-child)::after{content:"#";margin-left:10px;opacity:.45}
@media (max-width:900px){.pj-facts{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.pj-facts{grid-template-columns:1fr}}
.pj-hero-img{margin-top:clamp(56px,7vw,110px)}
.pj-hero-img .ph{aspect-ratio:16/9;max-height:90svh}
.pj-hero-img .ph.cover-top img{object-position:50% 30%}
@media (max-width:760px){.pj-hero-img .ph{aspect-ratio:4/5}}
.screens{background:#C9D3DB;margin-top:clamp(90px,11vw,170px);padding:clamp(40px,6vw,100px) var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:start}
.screens figure{margin:0}
.screens img{display:block;width:100%;height:auto;outline:1px solid rgba(0,49,83,.12)}
.screens .d{grid-column:1/-1}
.screens .d.half{grid-column:span 6}
.screens .m{grid-column:span 4}
.screens .m img{border-radius:22px;outline:none}
.screens figcaption{font-size:14px;color:var(--ink);margin-top:12px;opacity:.8}
.screens .m-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px);max-width:1100px;margin:0 auto;width:100%}
@media (max-width:760px){.screens .d.half{grid-column:1/-1}.screens .m-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.screens .m img{border-radius:12px}}
.pj-quote{padding:clamp(100px,12vw,180px) var(--m) 0}
.pj-quote blockquote{margin:0;font:400 clamp(24px,2.6vw,40px)/1.28 var(--text);color:var(--prussian);letter-spacing:-.01em;max-width:34ch}
.pj-quote figcaption{margin-top:20px;font-size:14px;opacity:.75}
.pj-next{display:block;margin:clamp(110px,13vw,200px) var(--m) 0;padding-top:20px;border-top:1px solid var(--prussian);text-decoration:none;color:var(--prussian)}
.pj-next .kw-l{margin-bottom:18px}
.pj-next .fit{font-weight:800;line-height:.82;margin-block:-.14em}
.pj-note{font-size:14px;color:var(--muted);margin-top:18px;max-width:60ch}

/* Blog */
.bl-topics{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(30px,4vw,56px);font-size:15px}
.bl-topics a{color:var(--ink);text-decoration:none}
.bl-topics a:hover,.bl-topics a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;color:var(--prussian)}
.bl-feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap);padding:clamp(56px,7vw,110px) var(--m) 0;align-items:end;text-decoration:none;color:var(--ink)}
.bl-feat .ph{grid-column:1/9;aspect-ratio:3/2;margin-left:calc(-1 * var(--m))}
.bl-feat .tx{grid-column:9/13}
.bl-feat h2{font:500 clamp(24px,2.4vw,36px)/1.2 var(--text);letter-spacing:-.01em;color:var(--prussian);margin:10px 0 12px}
.bl-feat:hover h2{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
@media (max-width:900px){.bl-feat .ph,.bl-feat .tx{grid-column:1/-1}.bl-feat .ph{margin-right:calc(-1 * var(--m))}}
.bl-sec{padding:clamp(90px,11vw,160px) var(--m) 0}
.bl-sec-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px var(--gap);margin-bottom:clamp(30px,4vw,56px);align-items:end}
.bl-sec-h h2{grid-column:1/6;font:500 15px/1.3 var(--text);margin:0}
.bl-sec-h p{grid-column:6/12;margin:0;max-width:56ch}
.bl-sec-h .more{grid-column:12/13;justify-self:end;font-size:15px;white-space:nowrap}
@media (max-width:900px){.bl-sec-h h2,.bl-sec-h p,.bl-sec-h .more{grid-column:1/-1;justify-self:start}}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,72px) var(--gap)}
@media (max-width:900px){.bl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bl-grid{grid-template-columns:1fr}}
.bc{display:block;text-decoration:none;color:var(--ink)}
.bc .ph{aspect-ratio:3/2}
.bc .m{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
.bc h3{font:500 19px/1.3 var(--text);color:var(--prussian);margin:0 0 8px}
.bc p{margin:0;font-size:15px;line-height:1.5}
.bc:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.bc .ph::after,.bl-feat .ph::after,.plist .ph::after{content:"";position:absolute;inset:0;background:rgba(0,49,83,.55);opacity:0;transition:opacity .5s ease}
.bc:hover .ph::after,.bl-feat:hover .ph::after,.plist a:hover .ph::after{opacity:1}

/* Artikel */
.ar-hero{padding:clamp(56px,8vw,130px) var(--m) 0}
.ar-meta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 20px}
.ar-meta a{color:var(--ink)}
.ar-hero h1{font:500 clamp(34px,4.6vw,72px)/1.06 var(--text);letter-spacing:-.02em;color:var(--prussian);margin:0;max-width:20ch}
.ar-hero .lead{font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:52ch;margin:clamp(24px,3vw,40px) 0 0}
.ar-img{margin-top:clamp(50px,6vw,90px)}
.ar-img .ph{aspect-ratio:3/2;max-height:86svh;width:100%}
.ar-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px var(--gap);padding:clamp(60px,7vw,110px) var(--m) 0;align-items:start}
.ar-side{grid-column:1/4;position:sticky;top:calc(var(--m) + 10px);font-size:14px}
.ar-side p{margin:0 0 10px;color:var(--muted)}
.ar-side ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ar-side a{color:var(--ink);text-decoration:none;line-height:1.35}
.ar-side a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ar-body{grid-column:5/12;min-width:0}
@media (max-width:1000px){.ar-side{display:none}.ar-body{grid-column:1/-1}}
.ar-sum{margin:0 0 clamp(40px,5vw,64px)}
.ar-sum h2{font:500 15px/1.3 var(--text);color:var(--ink);margin:0 0 6px}
.ar-sum ul{list-style:none;margin:0;padding:0}
.ar-sum li{padding:12px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.5}
.ar-sum li:last-child{border-bottom:1px solid var(--rule)}
.ar-sum strong{font-weight:500;color:var(--prussian)}
.ar-author{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center;margin-top:clamp(50px,6vw,80px);padding-top:22px;border-top:1px solid var(--prussian);max-width:66ch}
.ar-author img{width:96px;height:96px;object-fit:cover;object-position:60% 30%}
.ar-author p{margin:0;font-size:15px;line-height:1.5}
.ar-author strong{display:block;font-weight:500;color:var(--prussian)}
.ar-upd{font-size:14px;color:var(--muted);margin-top:28px}

/* Kosten */
.rate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap);padding:clamp(90px,11vw,170px) var(--m) 0;align-items:end}
.rate .big{grid-column:1/7;font:500 clamp(70px,11vw,190px)/.86 var(--text);letter-spacing:-.04em;color:var(--prussian);margin:0}
.rate .big small{display:block;font-size:clamp(16px,1.3vw,20px);letter-spacing:0;color:var(--ink);margin-top:18px;font-weight:400}
.rate .tx{grid-column:8/13}
@media (max-width:900px){.rate .big,.rate .tx{grid-column:1/-1}}
.ptable{list-style:none;margin:0;padding:0}
.ptable li{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.7fr);gap:10px var(--gap);padding:20px 0;border-top:1px solid var(--rule);align-items:baseline}
.ptable li:last-child{border-bottom:1px solid var(--rule)}
.ptable .t{font-weight:500;color:var(--prussian);display:block}
.ptable .d{display:block;font-size:15px;line-height:1.5;margin-top:4px;max-width:52ch}
.ptable .dur{font-size:15px}
.ptable .p{font:500 clamp(20px,1.8vw,26px)/1.1 var(--text);color:var(--prussian);text-align:right;white-space:nowrap}
.ptable .p small{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:4px}
.ptable a.t{text-decoration:none}
.ptable a.t:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:700px){.ptable li{grid-template-columns:1fr auto}.ptable .dur{grid-column:1;order:3;color:var(--muted)}.ptable .p{grid-column:2;grid-row:1}}

/* Rechner */
.calc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px var(--gap);padding:clamp(70px,8vw,130px) var(--m) 0;align-items:start}
.calc form{grid-column:1/6;display:flex;flex-direction:column;gap:24px}
.calc .out{grid-column:7/13}
@media (max-width:900px){.calc form,.calc .out{grid-column:1/-1}}
.calc label{display:block;font-size:14px;opacity:.75;margin-bottom:6px}
.calc input,.calc select{width:100%;font:400 20px/1.4 var(--text);color:var(--prussian);background:transparent;border:0;border-bottom:1px solid rgba(0,49,83,.35);border-radius:0;padding:8px 0;outline:none;-webkit-appearance:none;appearance:none}
.calc input:focus,.calc select:focus{border-bottom-color:var(--prussian);box-shadow:inset 0 -1px 0 var(--prussian)}
.calc .rows{list-style:none;margin:0;padding:0}
.calc .rows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;padding:14px 0;border-top:1px solid var(--rule);align-items:baseline}
.calc .rows li.best{color:var(--prussian)}
.calc .rows li:last-child{border-bottom:1px solid var(--rule)}
.calc .rows b{font-weight:500}
.calc .rows .v{font:500 20px/1 var(--text);color:var(--prussian);white-space:nowrap}
.calc .rec{font:500 clamp(22px,2vw,30px)/1.25 var(--text);color:var(--prussian);margin:0 0 20px;max-width:28ch}
.calc .hint{font-size:14px;color:var(--muted);margin-top:16px;max-width:60ch}

/* Über mich */
.ab-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
.ab-facts li{padding:14px 0;border-top:1px solid var(--rule)}
.ab-facts span{display:block;font-size:14px;color:var(--muted);margin-bottom:3px}
@media (max-width:600px){.ab-facts{grid-template-columns:1fr}}

/* Rechtliches */
.legal{padding:clamp(56px,8vw,120px) var(--m) 0}
.legal .prose{margin-top:clamp(40px,5vw,70px)}

/* Projekte Übersicht: Karten wie Startseite */
.pr-list{padding-top:clamp(40px,5vw,80px)}

/* Vorschau ohne Server: nichts */
.screens .m-row .m{grid-column:auto}
.screens .m-row{max-width:980px}
.screens .m-row .m{grid-column:auto}

/* Leistungen als breites Menü */
.dd-menu.mega{display:grid;grid-template-columns:repeat(3,minmax(0,230px));gap:0 34px;padding:22px 26px 24px;white-space:normal;left:-26px;width:max-content}
.dd-menu.mega p{font-size:13px;color:var(--muted);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.dd-menu.mega a{display:block;padding:7px 0;text-decoration:none}
.dd-menu.mega a b{display:block;font-weight:500;color:var(--prussian)}
.dd-menu.mega a span{display:block;font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}
.dd-menu.mega a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:1100px){.dd-menu.mega{grid-template-columns:repeat(3,minmax(0,190px));gap:0 22px}}

.dd:has(> .mega){position:static}
nav:has(.mega){position:relative}
.dd-menu.mega{left:auto;right:0}
.cv{list-style:none;padding:0;margin:0 0 1em}
.cv li{display:grid;grid-template-columns:9.5em 1fr;gap:1em;padding:.7em 0;border-top:1px solid var(--line, rgba(0,0,0,.12))}
.cv li:last-child{border-bottom:1px solid var(--line, rgba(0,0,0,.12))}
.cv li span{color:var(--prussian);font-variant-numeric:tabular-nums}
@media (max-width:600px){.cv li{grid-template-columns:1fr;gap:.2em}}
.uml{position:relative;background:var(--prussian);-webkit-background-clip:text;background-clip:text}
.uml::before{content:"";position:absolute;top:-.17em;left:calc(50% - .37em);width:.22em;height:.16em;background:var(--prussian);box-shadow:.52em 0 0 var(--prussian)}
.pg-hero .fit:has(.uml){margin-top:.24em}
.sec .acc{margin-top:0}
.sec .acc .faq-i h3{margin:0;font-size:clamp(20px,1.9vw,30px);max-width:none}
.sec .acc .faq-i summary{flex-wrap:nowrap}
.sec .acc .faq-i p{width:auto;margin-left:0;max-width:56ch}
.sec .acc .faq-i p.ex{margin-top:-.4em;color:var(--prussian)}
.k-head{position:static;padding:clamp(16px,1.8vw,26px) var(--m) 0}.k-head .fit{transform:none!important}
.fit{padding-right:.06em;margin-right:-.06em}
.price-s{font:400 15px/1.5 var(--text);color:var(--ink);margin:0 0 18px;max-width:34ch}.price-s span{display:block;color:var(--muted,#6b6f78)}
.sec.sec-full > .sec-h{grid-column:1/-1;position:static}
.sec.sec-full > .sec-b{grid-column:1/-1}
.lines.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.lines.grid3 li{border-bottom:0}
.lines.grid3 li:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}
.lines.grid3 p{max-width:38ch}
@media (max-width:900px){.lines.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.lines.grid3 li:nth-last-child(-n+3){border-bottom:0}.lines.grid3 li:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}}
@media (max-width:600px){.lines.grid3{grid-template-columns:1fr}.lines.grid3 li:nth-last-child(-n+2){border-bottom:0}.lines.grid3 li:last-child{border-bottom:1px solid var(--rule)}}
.sec > .sec-h h2{font:500 clamp(22px,2.1vw,32px)/1.2 var(--text);letter-spacing:-.01em;color:var(--prussian);max-width:16ch}.sec.sec-full > .sec-h h2{max-width:none}
.prose .tw{overflow:visible}
.prose table{min-width:0}
@media (max-width:700px){.prose table,.prose tbody,.prose tr,.prose td{display:block;width:100%}.prose thead{display:none}.prose tr{padding:14px 0;border-bottom:1px solid var(--rule)}.prose tr:first-child{border-top:1px solid var(--rule)}.prose td{padding:3px 0;border:0}.prose td[data-label]::before{content:attr(data-label);display:block;font-size:13px;color:var(--muted)}.prose td:first-child{font-weight:500;color:var(--prussian)}.prose td:first-child::before{display:none}}
.prose pre,pre{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}
.sec-cta{margin-top:28px}
.sec-cta .btn,.sec-cta .btn span{color:var(--paper)!important;text-decoration:none!important;background-image:none}
.sec-cta .btn{background-color:var(--prussian)}
.cards.cards-sub{padding:0}
.sec.sec-full > .cards{grid-column:1/-1}
.card .clogo.l5{height:auto;width:44%;filter:none;top:auto;bottom:clamp(18px,2.4vw,34px)}
.card .clogo.l6{height:auto;width:48%;filter:brightness(0);top:30%}
.ckpi{font:500 clamp(24px,2.3vw,36px)/1.12 var(--text);letter-spacing:-.01em;color:var(--prussian);margin:4px 0 8px}
.card .clogo.l7{height:auto;width:56%;filter:none}
.card .clogo.l8{height:auto;width:62%;filter:brightness(0)}
.cimg:has(.clogo.l8)::after{display:none}
.card .clogo.l9{height:auto;width:46%;filter:none}
.cimg:has(.clogo.l9)::after{display:none}
.card .clogo.l10{height:auto;width:40%;filter:none}
.cards-sub .card.c5{grid-column:1/-1;margin-top:0}
@media (min-width:601px) and (max-width:900px){.cards-sub .card.c5{grid-column:1;grid-row:3}}
@media (min-width:901px){.cards-sub .card.c5{grid-column:2/6;grid-row:3;margin-top:clamp(40px,5vw,90px)}}
.card .clogo.l11{height:auto;width:58%;filter:brightness(0) invert(1)}
.card .clogo.l12{height:auto;width:46%;filter:brightness(0)}
.cimg:has(.clogo.l12)::after{display:none}
.card .clogo.l13{height:auto;width:52%;filter:none;top:auto;bottom:clamp(18px,2.4vw,34px)}
.cimg:has(.clogo.l13)::after{display:none}
.card .clogo.l14{height:auto;width:40%;filter:brightness(0) invert(1)}
.card .clogo.l15{height:auto;width:30%;filter:brightness(0) invert(1)}
.cards.cards-all .card{grid-row:auto;margin-top:0}
.cards.cards-all .card.pa,.cards.cards-all .card.pb{grid-column:1/-1}
@media (min-width:601px) and (max-width:900px){.cards.cards-all .card.pa{grid-column:1;grid-row:var(--r)}.cards.cards-all .card.pb{grid-column:2;grid-row:var(--r);margin-top:120px}}
@media (min-width:901px){.cards.cards-all .card.pa{grid-column:2/6;grid-row:var(--r)}.cards.cards-all .card.pb{grid-column:8/12;grid-row:var(--r);margin-top:clamp(140px,16vw,260px)}}
/* Blog: Bausteine */
.prose figure{margin:2.2em 0}
.prose figure.shot img{display:block;width:100%;height:auto;margin:0;border:1px solid rgba(0,49,83,.16);box-shadow:0 10px 30px rgba(31,42,68,.08)}
.prose figcaption{font-size:14px;line-height:1.45;color:var(--muted);margin-top:12px;max-width:60ch}
.prose figure.draw{margin:2.6em 0}
.prose .merk{margin:2em 0;padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,36px);background:rgba(201,211,219,.5);font:500 clamp(19px,1.6vw,23px)/1.4 var(--text);color:var(--prussian)}
.prose .merk p{margin:0}
.prose .ar-cta{margin:2.6em 0;padding:clamp(24px,2.6vw,36px);background:#E8E4DC;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.prose .ar-cta p{margin:0;font:500 clamp(18px,1.4vw,21px)/1.4 var(--text);color:var(--prussian);max-width:40ch}
.prose .ar-cta .btn,.prose .ar-cta .btn span{color:var(--paper)!important;text-decoration:none!important}
.prose .ar-cta .btn{background-color:var(--prussian)}
svg.dg{display:block;width:100%;height:auto;overflow:visible}
svg.dg text{font-family:var(--text)}
svg.dg .t{fill:var(--prussian);font-size:19px;font-weight:500}
svg.dg .s{fill:var(--ink);font-size:16px;font-weight:400}
svg.dg .m{fill:#6E7781;font-size:13px}
svg.dg .n{fill:var(--prussian);font-size:15px;font-weight:500;letter-spacing:.04em}
svg.dg .box{fill:none;stroke:var(--prussian);stroke-width:1.5}
svg.dg .fill{fill:#C9D3DB}
svg.dg .f1{fill:var(--prussian)}
svg.dg .f2{fill:#C9D3DB}
svg.dg .ln{fill:none;stroke:var(--prussian);stroke-width:1.5}
svg.dg .cube{fill:#3F74B5}
svg.dg .a{fill:var(--prussian);font-size:19px;font-weight:500}
@media (max-width:600px){svg.dg .t{font-size:25px}svg.dg .s{font-size:21px}svg.dg .m{font-size:18px}svg.dg .n{font-size:20px}svg.dg .a{font-size:22px}}

.prose .ar-app{background:var(--prussian)}
.prose .ar-app p{color:var(--paper)}
.prose .ar-app .lab{font:500 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:#C9D3DB;margin-bottom:-6px}
.prose .ar-app .btn{background-color:var(--paper)}
.prose .ar-app .btn,.prose .ar-app .btn span{color:var(--prussian)!important}

.calc .num{position:relative;display:block}
.calc .num input{padding-right:44px;-moz-appearance:textfield;appearance:textfield}
.calc .num input::-webkit-outer-spin-button,.calc .num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc .num-nav{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.calc .num-nav button{width:24px;height:14px;padding:0;border:0;background:transparent;cursor:pointer;display:block}
.calc .num-nav button::before{content:"";display:block;width:24px;height:12px;background:#C9D3DB;transition:background .2s}
.calc .num-up::before{clip-path:polygon(0 100%,50% 0,100% 100%)}
.calc .num-down::before{clip-path:polygon(0 0,100% 0,50% 100%)}
.calc .num-nav button:hover::before{background:var(--prussian)}

.prose .eu-notice img{max-width:520px;width:100%;height:auto}
.prose .eu-garan img{display:inline-block;vertical-align:bottom;height:auto;margin:0 24px 12px 0;max-width:100%}
.prose .eu-garan img:first-child{width:220px}.prose .eu-garan img:nth-child(2){width:260px}
.prose .dl-box{margin:2.6em 0;padding:clamp(24px,2.6vw,36px);background:rgba(201,211,219,.5)}
.prose .dl-box .lab{font:500 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--prussian);margin:0 0 14px}
.prose .dl-box ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.prose .dl-box li{margin:0;padding:0}.prose .dl-box li::before{content:none}
.prose .dl-box a{color:var(--prussian)}
.prose .dl-box p:last-child{margin:0;font-size:15px}
.card .clogo.l16{height:auto;width:46%;filter:brightness(0) invert(1);top:auto;bottom:clamp(18px,2.4vw,34px)}
.cimg:has(.clogo.l16)::after{display:none}
.pj-results{padding:clamp(70px,9vw,140px) var(--m) 0}
.pj-results .kw-l{margin:0 0 clamp(28px,3vw,44px)}
.pj-results .pj-stats{margin:0 0 clamp(48px,6vw,80px)}
.pj-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gap)}
.pj-benefits li{padding:18px 0;border-top:1px solid rgba(0,49,83,.18);font-size:clamp(16px,1.25vw,19px);line-height:1.4;color:var(--prussian)}
@media (max-width:760px){.pj-benefits{grid-template-columns:1fr}}