/* ==========================================================================
   deianova.com — Gestaltung "klar" (Redesign Oktober 2026, Version 2)
   Hell, ruhig, ein Akzent. Nur Gestaltung; Inhalte liegen in index.html.
   ========================================================================== */

:root{
  /* deianova-Markenfarben (Obsidian "Marke & Design"): Teal #123D49 / #0C2B34, Cyan #00A8CC / #39C6E3.
     Buttons: Cyan abgedunkelt (#08758D), damit weiße Schrift lesbar bleibt (5,3:1). */
  --ink:#123d49; --ink-2:#0c2b34; --teal:#123d49; --blue:#08758d;
  --cy:#00a8cc; --cy-hi:#39c6e3; --cy-ink:#08758d;
  --bg:#ffffff; --paper:#f2f7f8; --line:#dbe5e8; --line-d:rgba(255,255,255,.18);
  --tx:#2f454d; --tx-2:#55666d; --tx-d:#d5e6eb; --tx-d2:#a3c3cc;
  --r:20px; --r-sm:12px;
  --ease:cubic-bezier(.22,.61,.36,1); --out:cubic-bezier(.16,1,.3,1);
  --max:1200px; --gut:clamp(20px,4vw,56px); --head:72px;
  --dv-link:#08758d; --dv-link-hover:#123d49; --dv-focus:#08758d;
}
[data-dv-dark]{--dv-link:#39c6e3; --dv-link-hover:#ffffff; --dv-focus:#39c6e3}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--dv-link);text-decoration:none}
a:hover{color:var(--dv-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--dv-focus) !important;outline-offset:3px}
main{scroll-margin-top:100px}
main:focus{outline:none}
p{margin:0}
.dn{font-family:Geist,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.65;color:var(--tx);background:var(--bg);min-height:100vh;overflow-x:clip}
.dv-skip{position:absolute;left:-9999px;top:8px;z-index:200;padding:12px 18px;background:#fff;color:var(--ink);font:600 15px Geist,Helvetica,sans-serif;border:2px solid var(--ink);border-radius:10px}
.dv-skip:focus{left:8px;color:var(--ink)}

/* ---------- Typografie ---------- */
.h-xl,.h-1,.h-2,.h-3{font-family:Geist,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;margin:0;text-wrap:balance;color:var(--ink)}
.is-dark .h-xl,.is-dark .h-1,.is-dark .h-2,.is-dark .h-3,[data-dv-dark] .h-2,[data-dv-dark] .h-1{color:#fff}
.h-xl{font-size:clamp(40px,4.9vw,74px);line-height:1.03;letter-spacing:-.04em}
.h-1{font-size:clamp(36px,4.5vw,66px);line-height:1.05;letter-spacing:-.037em}
.h-2{font-size:clamp(28px,3.3vw,48px);line-height:1.1;letter-spacing:-.032em}
.h-3{font-size:clamp(19px,1.6vw,22px);line-height:1.25;letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.25vw,19px);line-height:1.65;color:var(--tx-2);text-wrap:pretty}
.lbl{display:block;font-size:14.5px;font-weight:500;line-height:1.3;color:var(--cy-ink);margin:0 0 18px}
.is-dark .lbl,[data-dv-dark] .lbl{color:var(--cy-hi)}
.w,.wi{display:inline}

/* ---------- Einblenden (ruhig) ---------- */
.dn-js [data-rv]{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease),transform .9s var(--out);transition-delay:var(--d,0ms)}
.dn-js [data-rv].is-in{opacity:1;transform:none}
.dn-js.dn-fail [data-rv]{opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion: reduce){.dn-js [data-rv]{opacity:1 !important;transform:none !important;transition:none !important}}

/* ---------- Buttons / Links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;padding:15px 26px;border-radius:999px;border:0;cursor:pointer;font:550 15.5px/1 Geist,Helvetica,sans-serif;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--out)}
.btn:hover svg{transform:translateX(3px)}
.btn--ink{background:var(--blue);color:#fff}
.btn--ink:hover{background:var(--ink);color:#fff}
.btn--cy{background:#fff;color:var(--ink)}
.btn--cy:hover{background:var(--cy-hi);color:var(--ink)}
.btn--line{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1.5px rgba(8,117,141,.45)}
.btn--line:hover{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn--ghost:hover{background:#fff;color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:.55em;font:550 15px/1.2 Geist,Helvetica,sans-serif;color:var(--ink);padding:4px 0;border-bottom:1.5px solid var(--line);transition:border-color .3s,color .3s}
.tlink svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--out)}
.tlink:hover{color:var(--cy-ink);border-color:var(--cy-ink)}
.tlink:hover svg{transform:translateX(3px)}

/* ---------- Seitenübergang ---------- */
.dn-wipe{position:fixed;inset:0;z-index:150;background:#fff;opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.dn-wipe.is-cover{opacity:1;pointer-events:all}
.dn-wipe.is-out{opacity:0;transition:opacity .45s var(--ease)}

/* ---------- Kopfzeile ---------- */
.dn-head{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--head);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.dn-head.is-solid{border-bottom-color:var(--line)}
.dn-head__in{max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;height:100%;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
.dn-brand{display:flex;align-items:center;gap:12px;color:var(--ink);flex:none}
.dn-brand img{width:30px;height:30px;display:block;filter:brightness(0) saturate(100%) invert(18%) sepia(42%) saturate(1400%) hue-rotate(185deg) brightness(.92)}
.dn-brand span{font:700 15px/1 Archivo,Helvetica,sans-serif;letter-spacing:.2em;white-space:nowrap}
.dn-brand:hover{color:var(--ink)}
.dn-nav{display:flex;align-items:center;gap:6px;margin:0 auto}
.dn-nav a{position:relative;padding:10px 14px;font:500 15px/1 Geist,Helvetica,sans-serif;color:var(--tx-2);white-space:nowrap;transition:color .25s}
.dn-nav a:hover{color:var(--ink)}
.dn-nav a[aria-current="page"]{color:var(--ink)}
.dn-nav a[aria-current="page"]::after{content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--cy);border-radius:2px}
.dn-head__r{display:flex;align-items:center;gap:18px;flex:none}
.dn-lang{display:flex;align-items:center;gap:6px;font:500 13.5px/1 Geist,Helvetica,sans-serif}
.dn-lang a{color:var(--tx-2);padding:6px 2px;transition:color .25s}
.dn-lang a:hover,.dn-lang a[aria-current="true"]{color:var(--ink)}
.dn-lang a[aria-current="true"]{font-weight:700}
.dn-lang i{color:#b3c1c6;font-style:normal}
.dn-head .btn{padding:12px 22px;font-size:14.5px}
.dn-burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--paper);cursor:pointer;position:relative;color:var(--ink)}
.dn-burger i{position:absolute;left:13px;right:13px;height:1.8px;background:currentColor;border-radius:2px;transition:transform .4s var(--out),top .4s var(--out)}
.dn-burger i:nth-child(1){top:18px}
.dn-burger i:nth-child(2){top:25px}
.dn-burger[aria-expanded="true"] i:nth-child(1){top:21.5px;transform:rotate(45deg)}
.dn-burger[aria-expanded="true"] i:nth-child(2){top:21.5px;transform:rotate(-45deg)}
.dn-menu{position:fixed;inset:var(--head) 0 0 0;z-index:90;background:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:28px var(--gut) 32px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.dn-menu[data-open="true"]{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s 0s}
.dn-menu a.m{display:block;font:600 clamp(30px,9vw,46px)/1.15 Geist,Helvetica,sans-serif;letter-spacing:-.03em;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line)}
.dn-menu a.m[aria-current="page"]{color:var(--cy-ink)}
.dn-menu__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
@media (max-width:1040px){
  .dn-nav,.dn-head__r .dn-lang,.dn-head__r .btn{display:none}
  .dn-burger{display:block}
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto}
.sec{position:relative;padding:clamp(72px,9vw,136px) var(--gut)}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink);color:#fff}
.is-dark{color:#fff}

/* ==========================================================================
   Hero Startseite: ein ruhiger Effekt, das Bildfenster weitet sich
   ========================================================================== */
.hero{position:relative;height:calc(100svh + 150vh);--e:0;--t:0;background:var(--bg)}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.hero__win{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--ink);--wt:calc(var(--head) + 32px);--wr:max(var(--gut),calc((100vw - var(--max)) / 2));--wb:32px;--wl:54%;
  clip-path:inset(calc((1 - var(--e)) * var(--wt)) calc((1 - var(--e)) * var(--wr)) calc((1 - var(--e)) * var(--wb)) calc((1 - var(--e)) * var(--wl)) round calc((1 - var(--e)) * var(--r)))}
.hero__zoom{position:absolute;inset:0;transform:scale(calc(1.02 + var(--e) * .06));will-change:transform}
/* Bildebene in Original-Pixeln (1550 x 1015); dn.js skaliert sie wie object-fit:cover */
.hero__art{position:absolute;left:0;top:0;width:1550px;height:1015px;transform-origin:0 0;--ox:.58;--oy:.42}
.dn-js .hero__art{opacity:0;transition:opacity .7s var(--ease)}
.dn-js .is-ready .hero__art,.dn-js.dn-fail .hero__art{opacity:1}
.art-base{position:absolute;left:0;top:0;width:1550px;height:1015px;max-width:none;display:block}
.ov{position:absolute;max-width:none;display:block;pointer-events:none}
.ov-screen{left:120px;top:426px;width:412px;height:244px;opacity:0}
.ov-glow{left:770px;top:352px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,196,70,.95) 0%,rgba(255,206,100,.55) 26%,rgba(255,222,150,0) 66%);mix-blend-mode:multiply;opacity:0}
.ov-bulb{left:844px;top:426px;width:53px;height:53px;opacity:0}
.ov-gear-a{left:563px;top:571px;width:91px;height:91px}
.ov-gear-b{left:626px;top:625px;width:59px;height:59px}
.ov-rocket{left:988px;top:315px;width:72px;height:82px}
.ov-rocket-shadow{left:964px;top:291px;width:120px;height:130px;opacity:0}
.ov-exhaust{left:1049px;top:386px;width:0;height:0;opacity:0}
.ov-exhaust::before{content:'';position:absolute;left:-4px;top:-2px;width:9px;height:22px;border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;background:linear-gradient(to bottom,rgba(255,236,170,.95),rgba(255,160,60,.85) 55%,rgba(255,120,40,0));transform:rotate(-40deg);transform-origin:50% 0}
.ov-exhaust i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,rgba(140,180,192,.7) 0%,rgba(165,198,208,.45) 45%,rgba(190,214,221,0) 72%)}
.hero__txt{position:absolute;z-index:3;left:max(var(--gut),calc((100vw - var(--max)) / 2));top:calc(var(--head) + clamp(36px,9svh,96px));width:min(42vw,560px);color:var(--ink);
  transform:translate3d(0,calc(var(--t) * -40px),0);opacity:calc(1 - var(--t) * 1.3);will-change:transform,opacity}
.hero__eyebrow{display:block;font-size:15px;font-weight:500;line-height:1.4;color:var(--cy-ink);margin:0 0 24px}
.hero__h1{margin:0;font-weight:600;font-size:clamp(40px,4.6vw,72px);line-height:1.03;letter-spacing:-.04em;text-wrap:balance}
.hero__lead{margin-top:28px;max-width:30em;font-size:clamp(16px,1.2vw,18.5px);line-height:1.62;color:var(--tx-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.dn-js .hero__eyebrow,.dn-js .hero__h1,.dn-js .hero__lead,.dn-js .hero__cta{opacity:0;transform:translate3d(0,18px,0);transition:opacity .9s var(--ease),transform 1s var(--out)}
.dn-js .hero__h1{transition-delay:.08s}.dn-js .hero__lead{transition-delay:.18s}.dn-js .hero__cta{transition-delay:.28s}
.dn-js .is-ready .hero__eyebrow,.dn-js .is-ready .hero__h1,.dn-js .is-ready .hero__lead,.dn-js .is-ready .hero__cta{opacity:1;transform:none}
.dn-js.dn-fail .hero__eyebrow,.dn-js.dn-fail .hero__h1,.dn-js.dn-fail .hero__lead,.dn-js.dn-fail .hero__cta{opacity:1;transform:none}
@media (max-width:1000px){
  .hero{height:calc(100svh + 120vh)}
  .hero__art{--ox:.38;--oy:.45}
  .hero__win{--wt:60svh;--wr:16px;--wb:16px;--wl:16px}
  .hero__txt{width:auto;right:var(--gut);top:calc(var(--head) + 22px)}
  .hero__h1{font-size:clamp(34px,10vw,54px)}
  .hero__eyebrow{margin-bottom:14px;font-size:14px}
  .hero__lead{margin-top:16px;font-size:15px;line-height:1.5;max-width:none}
  .hero__cta{margin-top:20px;gap:10px}
  .hero__cta .btn{padding:14px 20px;font-size:14.5px}
}
@media (max-width:1000px) and (max-height:760px){.hero__lead{display:none}.hero__win{--wt:50svh}}
@media (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .hero__stage{position:relative;height:100svh;min-height:640px}
  .dn-js .hero__eyebrow,.dn-js .hero__h1,.dn-js .hero__lead,.dn-js .hero__cta{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---------- Logos ---------- */
.logos{background:#fff;padding:clamp(40px,5vw,64px) 0;overflow:hidden;border-bottom:1px solid var(--line)}
.logos__lbl{max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto 28px;padding:0 var(--gut);font-size:14.5px;font-weight:500;color:var(--tx-2)}
.logos__row{display:flex;width:max-content;animation:dnMarquee 60s linear infinite;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.logos__row:hover{animation-play-state:paused}
.logos__it{display:flex;align-items:center;justify-content:center;width:150px;height:50px;margin:0 28px;flex:none}
.logos__it img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .4s,opacity .4s}
.logos__it:hover img{filter:none;opacity:1}
@keyframes dnMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.logos__row{animation:none;flex-wrap:wrap;width:auto;justify-content:center;-webkit-mask-image:none;mask-image:none}}

/* ---------- Geschäftsfelder (Startseite) ---------- */
.fields{background:var(--paper)}
.fields__top{max-width:760px}
.fields__top .h-2{margin:0}
.fields__top .lead{margin-top:22px}
.fields__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(44px,5vw,72px)}
.fcard{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .5s var(--out),transform .5s var(--out)}
.fcard:hover{box-shadow:0 30px 60px -36px rgba(11,31,38,.35);transform:translate3d(0,-4px,0)}
.fcard__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.fcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.fcard:hover .fcard__img img{transform:scale(1.03)}
.fcard__b{padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;flex:1}
.fcard__pr{margin-top:8px;color:var(--cy-ink);font-weight:500;font-size:16px;line-height:1.45}
.fcard ul{list-style:none;margin:20px 0 26px;padding:0}
.fcard li{padding:10px 0;font-size:15px;line-height:1.45;color:var(--tx-2);border-top:1px solid var(--line)}
.fcard .tlink{margin-top:auto;align-self:flex-start}
@media (max-width:820px){.fields__g{grid-template-columns:1fr}}

/* ---------- Fokus ---------- */
.focus{background:#fff}
.focus__g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,104px);align-items:center}
.focus__img{border-radius:var(--r);overflow:hidden;background:var(--paper);aspect-ratio:5/4;position:relative}
.focus__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.focus h2{margin:0}
.focus .lead{margin-top:22px}
.tick{list-style:none;margin:30px 0 0;padding:0}
.tick li{position:relative;padding:15px 0 15px 34px;border-top:1px solid var(--line);font-size:16.5px;color:var(--tx)}
.tick li:last-child{border-bottom:1px solid var(--line)}
.tick li::after{content:'';position:absolute;left:3px;top:50%;width:13px;height:7px;margin-top:-6px;border-left:2px solid var(--cy-ink);border-bottom:2px solid var(--cy-ink);transform:rotate(-45deg)}
.focus .btn{margin-top:36px}
@media (max-width:900px){.focus__g{grid-template-columns:1fr}}

/* ---------- Arbeitsweise (Zeitstrahl) ---------- */
.proc{background:var(--paper)}
.proc__g{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,120px);align-items:start}
.proc__head{position:sticky;top:calc(var(--head) + 48px)}
.proc__head .h-2{margin:0}
.proc__head .lead{margin-top:22px;max-width:28em}
.proc__note{margin-top:26px;padding-left:16px;border-left:2px solid var(--cy);font-weight:500;font-size:15.5px;max-width:26em}
.proc__list{position:relative;--p:0;padding-left:clamp(70px,6vw,92px)}
.proc__rail{position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.proc__rail::after{content:'';position:absolute;inset:0;background:var(--cy);transform-origin:top;transform:scaleY(var(--p))}
.pstep{position:relative;padding:clamp(24px,3.4vw,44px) 0;min-height:26vh}
.pstep__n{position:absolute;left:calc(clamp(70px,6vw,92px) * -1);top:clamp(24px,3.4vw,44px);width:48px;height:48px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line);display:grid;place-items:center;font:600 15px/1 Geist,Helvetica,sans-serif;color:var(--tx-2);transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.pstep.is-on .pstep__n{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 2px var(--blue)}
.pstep h3{margin:0;font-weight:600;font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.03em;color:var(--tx-2);transition:color .5s var(--ease)}
.pstep.is-on h3{color:var(--ink)}
.pstep__p{margin-top:14px;font-size:clamp(17px,1.3vw,19px);line-height:1.5;font-weight:500;color:var(--tx);max-width:30em;opacity:.5;transition:opacity .5s}
.pstep__d{margin-top:10px;max-width:34em;color:var(--tx-2);opacity:.5;transition:opacity .5s}
.pstep.is-on .pstep__p,.pstep.is-on .pstep__d{opacity:1}
@media (max-width:900px){.proc__g{grid-template-columns:1fr}.proc__head{position:static}.pstep{min-height:0}}

/* ---------- Kennzahlen (einziges dunkles Band) ---------- */
.stats{background:var(--ink);color:#fff}
.stats__top{max-width:760px}
.stats__top .h-2{margin:0}
.stats__top .lead{margin-top:20px;color:var(--tx-d)}
.stats__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--line-d)}
.stat{padding:28px clamp(16px,2vw,30px) 8px;border-left:1px solid var(--line-d)}
.stat:first-child{padding-left:0;border-left:0}
.stat__k{font-weight:600;font-size:clamp(40px,4.8vw,76px);line-height:1;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.stat__s{margin-top:16px;font-weight:600;font-size:clamp(16px,1.3vw,19px);line-height:1.25}
.stat__d{margin-top:6px;font-size:15px;line-height:1.55;color:var(--tx-d2)}
@media (max-width:980px){.stats__g{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}.stat:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.stats__g{grid-template-columns:1fr}.stat{padding-left:0;border-left:0;border-top:1px solid var(--line-d)}.stat:first-child{border-top:0}}

/* ---------- Projekte (Liste) ---------- */
.cases{background:#fff}
.cases__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.cases__top .h-2{margin:0}
.crows{margin-top:clamp(36px,4.5vw,64px);border-bottom:1px solid var(--line)}
.crow{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.3fr) 44px;gap:clamp(16px,3vw,44px);align-items:center;padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--line);color:var(--tx);transition:background .35s var(--ease)}
.crow:hover{background:var(--paper);color:var(--tx)}
.crow__logo{display:flex;align-items:center;height:48px}
.crow__logo img{max-height:36px;max-width:130px;object-fit:contain}
.crow__n{font-weight:600;font-size:clamp(20px,1.8vw,26px);line-height:1.15;letter-spacing:-.02em}
.crow__c{margin-top:6px;font-size:14.5px;font-weight:500;color:var(--cy-ink)}
.crow__t{font-size:15.5px;line-height:1.6;color:var(--tx-2)}
.crow__a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);transition:background .3s,box-shadow .3s,color .3s}
.crow__a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crow:hover .crow__a{background:var(--ink);color:#fff;box-shadow:none}
@media (max-width:900px){.crow{grid-template-columns:90px 1fr 40px;row-gap:12px}.crow__t{grid-column:1 / -1;order:5}.crow__a{width:40px;height:40px}.crow__logo img{max-width:84px}}

/* ---------- Über mich (Teaser) ---------- */
.about-t{background:var(--paper)}
.about-t__g{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,112px);align-items:center}
.about-t h2{margin:0}
.about-t .lead{margin-top:22px;max-width:30em}
.about-t .btn{margin-top:32px}
.portrait{width:min(100%,420px);justify-self:end}
.portrait .arch{border-radius:var(--r);overflow:hidden;background:var(--paper);aspect-ratio:4/5;position:relative}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (max-width:900px){.about-t__g{grid-template-columns:1fr}.portrait{order:-1;justify-self:start;width:min(70%,340px)}}

/* ---------- Abschluss + Footer ---------- */
.close{background:var(--ink);color:#fff;padding-top:clamp(88px,11vw,170px);padding-bottom:clamp(80px,9vw,140px)}
.close__in{max-width:var(--max);margin:0 auto}
.close h2{margin:0;font-weight:600;font-size:clamp(34px,5.4vw,84px);line-height:1.03;letter-spacing:-.04em;text-wrap:balance;max-width:14em}
.close__p{margin-top:28px;max-width:36em;font-size:clamp(17px,1.3vw,19.5px);line-height:1.65;color:var(--tx-d)}
.close .btn{margin-top:40px;padding:19px 32px;font-size:16.5px}
.foot{background:var(--ink);color:var(--tx-d);border-top:1px solid var(--line-d)}
.foot__g{max-width:var(--max);margin:0 auto;padding:clamp(52px,6vw,84px) var(--gut) 44px;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(28px,3vw,48px)}
.foot__brand{display:flex;align-items:center;gap:12px;color:#fff}
.foot__brand img{width:28px;height:28px}
.foot__brand span{font:700 14.5px/1 Archivo,Helvetica,sans-serif;letter-spacing:.2em}
.foot p{margin-top:18px;font-size:15px;line-height:1.6;max-width:24em;color:var(--tx-d2)}
.foot h4{margin:0 0 16px;font:600 14.5px/1 Geist,Helvetica,sans-serif;color:#fff}
.foot nav,.foot .col{display:flex;flex-direction:column;gap:11px}
.foot a{color:var(--tx-d);font-size:15px;transition:color .25s;display:inline-block}
.foot a:hover{color:#fff}
.foot__c{max-width:var(--max);margin:0 auto;padding:22px var(--gut) 32px;border-top:1px solid var(--line-d);font-size:14px;color:var(--tx-d2)}
@media (max-width:1000px){.foot__g{grid-template-columns:1fr 1fr}.foot__g > div:first-child{grid-column:1 / -1}}
@media (max-width:520px){.foot__g{grid-template-columns:1fr}}

/* ==========================================================================
   Unterseiten
   ========================================================================== */
.ihero{position:relative;background:var(--paper);padding:calc(var(--head) + clamp(48px,7vw,104px)) var(--gut) clamp(56px,7vw,100px)}
.ihero__g{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,88px);align-items:center}
.ihero__g--solo{grid-template-columns:1fr}
.ihero__txt .h-1{margin:0;color:var(--ink)}
.ihero__txt .lead{margin-top:24px;max-width:33em}
.ihero__media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4;background:#dfe7ea}
.ihero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.ihero__g{grid-template-columns:1fr}.ihero__media{aspect-ratio:16/10;order:2}}

/* Leistungen: Reihen */
.stack{background:#fff}
.stack__intro{max-width:46em;margin:0 0 clamp(40px,5vw,64px)}
.scard{margin-bottom:clamp(20px,2.4vw,32px);background:var(--paper);border-radius:var(--r);overflow:hidden}
.scard__in{display:grid;grid-template-columns:.9fr 1.1fr}
.scard:nth-of-type(even) .scard__in{grid-template-columns:1.1fr .9fr}
.scard:nth-of-type(even) .scard__img{order:2}
.scard__img{position:relative;overflow:hidden;background:#dfe7ea;min-height:340px}
.scard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scard__img[data-k="webdesign"]{background:#eef2f3}
.scard__img[data-k="webdesign"] img{object-fit:contain}
.scard__b{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.scard__b h2{margin:0}
.scard__pr{margin-top:12px;font-weight:500;font-size:clamp(17px,1.35vw,19px);color:var(--cy-ink);line-height:1.45}
.scard__l{margin-top:14px;color:var(--tx-2)}
.scard ul{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.scard li{font-size:14.5px;line-height:1.45;color:var(--tx-2);padding:11px 0;border-top:1px solid var(--line)}
.scard .tlink{margin-top:24px;align-self:flex-start}
@media (max-width:900px){.scard__in,.scard:nth-of-type(even) .scard__in{grid-template-columns:1fr}.scard:nth-of-type(even) .scard__img{order:0}.scard__img{min-height:230px}.scard ul{grid-template-columns:1fr}}

/* Vier Schritte */
.steps4{background:#fff}
.steps4__top{max-width:720px}
.steps4__top .h-2{margin:0}
.steps4__top .lead{margin-top:18px}
.steps4__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(36px,5vw,72px)}
.s4{padding-top:24px;border-top:1.5px solid var(--ink)}
.s4__n{font-weight:600;font-size:clamp(30px,3vw,46px);line-height:1;letter-spacing:-.04em;color:var(--cy-ink)}
.s4 h3{margin:20px 0 0;font-weight:600;font-size:clamp(19px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em}
.s4 p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--tx-2)}
@media (max-width:980px){.steps4__g{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}
@media (max-width:560px){.steps4__g{grid-template-columns:1fr}}

/* Projekte: Karten */
.pcards{background:#fff}
.pcards__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,32px);align-items:start}
.pcard{background:var(--paper);border-radius:var(--r);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column}
.pcard__logo{align-self:flex-start;display:flex;align-items:center;height:60px;padding:10px 18px;background:#fff;border-radius:14px}
.pcard__logo img{max-height:36px;max-width:140px;object-fit:contain}
.pcard h2{margin:28px 0 0;font-weight:600;font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.025em}
.pcard__c{margin-top:8px;font-size:14.5px;font-weight:500;color:var(--cy-ink)}
.pcard__t{margin-top:18px;color:var(--tx-2)}
.pcard__do{margin-top:26px;font-weight:600;font-size:15px}
.pcard ul{list-style:none;margin:12px 0 0;padding:0}
.pcard li{position:relative;padding:10px 0 10px 22px;font-size:15px;line-height:1.5;color:var(--tx-2);border-top:1px solid var(--line)}
.pcard li::before{content:'';position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--cy)}
.pcard dl{margin:26px 0 0;padding-top:20px;border-top:1.5px solid var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.pcard dt{font-size:13.5px;color:var(--tx-2)}
.pcard dd{margin:4px 0 0;font-weight:600;font-size:16.5px;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.pnote{margin:clamp(36px,4.5vw,60px) 0 0;font-size:14.5px;color:var(--tx-2);max-width:46em}
@media (max-width:900px){.pcards__g{grid-template-columns:1fr}}

/* Sport */
.sp-if{background:#fff}
.sp-if__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(28px,3.5vw,52px)}
.sp-if__c{padding:26px clamp(16px,2vw,28px) 8px;border-top:1.5px solid var(--ink)}
.sp-if__c:first-child{padding-left:0}
.sp-if__c h2{margin:0;font-weight:600;font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.015em}
.sp-if__c p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--tx-2)}
@media (max-width:980px){.sp-if__g{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-if__c{padding-left:0}}
@media (max-width:560px){.sp-if__g{grid-template-columns:1fr}}
.pull{background:var(--paper)}
.pull__in{max-width:var(--max);margin:0 auto}
.pull .h-2{margin:0;max-width:16em}
.pull__p{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(30px,4vw,52px)}
.pull__p p{color:var(--tx-2)}
.pull__p p:first-child{color:var(--tx)}
@media (max-width:800px){.pull__p{grid-template-columns:1fr}}
.facts{background:#fff}
.facts__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,52px)}
.fact{border-top:1.5px solid var(--ink);padding-top:24px}
.fact__k{font-weight:600;font-size:clamp(24px,2.5vw,38px);line-height:1.1;letter-spacing:-.03em;overflow-wrap:anywhere;hyphens:auto}
.fact__s{margin-top:14px;font-weight:600;font-size:clamp(15.5px,1.2vw,18px);color:var(--cy-ink)}
.fact__d{margin-top:6px;font-size:15px;color:var(--tx-2);line-height:1.55}
@media (max-width:800px){.facts__g{grid-template-columns:1fr}}
.spcase{background:var(--paper)}
.spcase__g{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,5vw,88px);border-top:1.5px solid var(--ink);padding-top:clamp(26px,3vw,40px);max-width:1100px}
.spcase__g h2{margin:18px 0 0;font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.025em}
.spcase__logo{margin-top:24px;display:inline-flex;align-items:center;height:58px;padding:10px 16px;background:#fff;border-radius:14px}
.spcase__logo img{max-height:36px;max-width:140px;object-fit:contain}
.spcase ul{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 34px}
.spcase li{padding:13px 0;border-top:1px solid var(--line);font-size:15px;color:var(--tx-2);line-height:1.5}
@media (max-width:800px){.spcase__g{grid-template-columns:1fr}}

/* Über mich */
.ab-split{background:#fff}
.ab-split__g{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,104px);align-items:center}
.ab-split h2{margin:0}
.ab-split .lead{margin-top:24px;color:var(--tx)}
.ab-split .lead + p{margin-top:16px;color:var(--tx-2)}
.ab-split .portrait{justify-self:start}
@media (max-width:900px){.ab-split__g{grid-template-columns:1fr}.ab-split .portrait{width:min(70%,340px)}}
.prin{background:var(--paper)}
.prin__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,6vw,104px);margin-top:clamp(24px,3vw,44px)}
.prin__c{padding:30px 0 34px;border-top:1.5px solid var(--ink)}
.prin__c h3{margin:0;font-weight:600;font-size:clamp(21px,2vw,28px);line-height:1.15;letter-spacing:-.02em}
.prin__c p{margin-top:12px;color:var(--tx-2);max-width:30em}
@media (max-width:760px){.prin__g{grid-template-columns:1fr}}
.exp{background:#fff}
.exp__top{max-width:720px}
.exp__top .h-2{margin:0}
.exp__top .lead{margin-top:18px}
.exp__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(36px,5vw,68px)}
.exp__c{background:var(--paper);border-radius:var(--r);padding:clamp(24px,2.6vw,36px)}
.exp__c h3{margin:0 0 22px;font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.2}
.exp__it{padding:16px 0;border-top:1px solid var(--line)}
.exp__logos{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.exp__logos img{height:26px;max-width:104px;object-fit:contain}
.exp__it p{margin-top:8px;font-size:14px;color:var(--tx-2);line-height:1.5}
.exp__legal{max-width:46em;margin:clamp(30px,4vw,52px) 0 0;font-size:13.5px;line-height:1.6;color:var(--tx-2)}
@media (max-width:980px){.exp__g{grid-template-columns:1fr}}

/* Kontakt */
.con{background:#fff}
.con__g{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,104px);align-items:start}
.con__side{position:sticky;top:calc(var(--head) + 40px)}
.con__side .h-2{margin:0;font-size:clamp(26px,2.8vw,40px)}
.con__side .lead{margin-top:20px}
.chan{display:flex;flex-direction:column;margin-top:32px;border-top:1px solid var(--line)}
.chan a{display:grid;grid-template-columns:44px 1fr 36px;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);color:var(--tx)}
.chan__i{width:44px;height:44px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font:600 14px/1 Geist,Helvetica,sans-serif;color:var(--cy-ink)}
.chan__t{display:block;font-weight:600;font-size:16px;line-height:1.2}
.chan__s{display:block;margin-top:4px;font-size:14.5px;color:var(--tx-2);word-break:break-all}
.chan__c{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--cy-ink)}
.chan__a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s}
.chan__a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chan a:hover .chan__a{background:var(--ink);color:#fff}
.form{background:var(--paper);border-radius:var(--r);padding:clamp(24px,3.2vw,44px)}
.form form{display:flex;flex-direction:column;gap:18px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld span{font-weight:600;font-size:14.5px;line-height:1.2;color:var(--tx)}
.fld input,.fld select,.fld textarea{border:0;background:#fff;border-radius:12px;padding:16px 18px;font-size:16px;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .25s;outline:none;width:100%}
.fld textarea{resize:vertical;min-height:150px;font-family:inherit}
.fld input:hover,.fld select:hover,.fld textarea:hover{box-shadow:inset 0 0 0 1.5px #c3d1d6}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:inset 0 0 0 2px var(--cy-ink)}
.form__note{font-size:13.5px;color:var(--tx-2)}
.form__row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.form button[disabled]{cursor:wait}
@media (max-width:900px){.con__g{grid-template-columns:1fr}.con__side{position:static}}

/* Leistungs-Unterseiten */
.svc{background:#fff}
.svc__top{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,88px);align-items:start}
.svc__top .lead{font-size:clamp(18px,1.5vw,22px);line-height:1.6;color:var(--tx)}
.svc__who{border-top:1.5px solid var(--ink);padding-top:20px}
.svc__who p{color:var(--tx-2)}
.svc__main{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,88px);align-items:start;margin-top:clamp(52px,6.5vw,104px)}
.svc__groups{display:flex;flex-direction:column;gap:clamp(36px,4.5vw,60px)}
.svc__groups h2{margin:0;font-weight:600;font-size:clamp(23px,2.3vw,32px);line-height:1.12;letter-spacing:-.025em}
.svc__groups .tick{margin-top:18px}
.svc__groups .tick li{font-size:16px;color:var(--tx-2)}
.svc__img{position:sticky;top:calc(var(--head) + 32px);border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--paper)}
.svc__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk{margin-top:clamp(52px,6.5vw,104px)}
.pk h2{margin:0;font-weight:600;font-size:clamp(23px,2.3vw,32px);line-height:1.12;letter-spacing:-.025em}
.pk__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.8vw,24px);margin-top:26px}
.pk__c{background:var(--paper);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.pk__c h3{margin:0;font-weight:600;font-size:16px;line-height:1.2}
.pk__p{margin-top:20px;font-weight:600;font-size:clamp(28px,2.8vw,42px);line-height:1;letter-spacing:-.035em;color:var(--ink)}
.pk__d{margin-top:14px;font-size:15px;line-height:1.6;color:var(--tx-2)}
.pk__n{margin-top:20px;font-size:14px;color:var(--tx-2)}
.svc__cta{margin-top:clamp(36px,4.5vw,56px)}
@media (max-width:900px){.svc__top,.svc__main{grid-template-columns:1fr}.svc__img{position:relative;top:0;aspect-ratio:4/3}}

/* FAQ */
.faq{background:var(--paper)}
.faq__g{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(30px,6vw,104px);align-items:start}
.faq__top{position:sticky;top:calc(var(--head) + 40px)}
.faq__top .h-2{margin:0}
.faq details{border-top:1px solid #cfdadd}
.faq details:last-child{border-bottom:1px solid #cfdadd}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-weight:600;font-size:clamp(17px,1.4vw,20px);line-height:1.35;letter-spacing:-.01em;color:var(--tx)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #bccbd0;background:linear-gradient(var(--tx),var(--tx)) center/12px 1.6px no-repeat,linear-gradient(var(--tx),var(--tx)) center/1.6px 12px no-repeat;transition:transform .4s var(--out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--cy-ink)}
.faq details p{padding:0 60px 26px 0;color:var(--tx-2);max-width:42em;animation:dnFaq .5s var(--out)}
@keyframes dnFaq{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
@media (max-width:900px){.faq__g{grid-template-columns:1fr}.faq__top{position:static}.faq details p{padding-right:0}}

/* Rechtstexte */
.legal{background:#fff}
.legal__in{max-width:820px}
.legal__b{padding:28px 0;border-top:1px solid var(--line)}
.legal__b h2{margin:0;font-weight:600;font-size:clamp(18px,1.6vw,22px);line-height:1.25}
.legal__b p{margin-top:12px;color:var(--tx-2);white-space:pre-line}

/* Kontaktseite: kein zweiter Kontakt-Block direkt vor dem Footer */
.dn[data-page="contact"] .close{display:none}