/* MD-Designworks · Konzept "Kinetik" (kinetische Typografie, Light + Dark)
   Signature: der "/"-Diagonal-Wisch + Wort-Reveals aus dem Rand.
   Farben als Tokens -> per html[data-theme] umschaltbar. Standard: dunkel. */
:root{
  /* Light-Theme (Tokens; --ink dient auch als "invertierter Block") */
  --bg:#f1efe9; --bg-2:#e7e4db; --ink:#0d0d0e; --ink-2:#4d4e52; --ink-3:#595b61;
  --blue:#0060aa; --blue-2:#1a79cf; --btn-blue:#0060aa; --line:rgba(13,13,14,.16);
  --nav-bg:rgba(241,239,233,.85);
  --ease:cubic-bezier(.16,.84,.44,1); --skew:-9deg;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0e0f13; --bg-2:#181a21; --ink:#f1efe9; --ink-2:#b7b9c0; --ink-3:#868a94;
  --blue:#2e8bff; --blue-2:#5aa6ef; --btn-blue:#0a63b0; --line:rgba(255,255,255,.16);
  --nav-bg:rgba(14,15,19,.86);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a,button,input,textarea,select,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:2px}
.skip{position:fixed;top:-120px;left:8px;z-index:200;background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:1px;font-size:14px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;transition:top .2s var(--ease)}
.skip:focus{top:8px}
img{max-width:100%;display:block}
.display{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em}
.mono{font-family:"Space Grotesk";font-variant-numeric:tabular-nums}
.wrap{max-width:1340px;margin-inline:auto;padding-inline:clamp(18px,4vw,56px)}
/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:8px clamp(18px,4vw,56px);mix-blend-mode:normal;transition:background .3s,border-color .3s}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .lg{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.02em}
.nav .lg img{height:130px;width:auto;filter:none}
.nav .nright{display:flex;align-items:center;gap:clamp(14px,2.5vw,24px)}
.theme{width:46px;height:46px;border:2px solid var(--ink);background:transparent;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;border-radius:1px;color:var(--ink);position:relative;
  transition:background .3s,color .3s,border-color .3s}
.theme:hover{background:var(--ink);color:var(--bg)}
.theme svg{width:20px;height:20px;position:absolute;transition:opacity .35s,transform .45s var(--ease)}
.theme .i-moon{opacity:1;transform:none}
.theme .i-sun{opacity:0;transform:rotate(-40deg) scale(.6)}
html[data-theme="dark"] .theme .i-moon{opacity:0;transform:rotate(40deg) scale(.6)}
html[data-theme="dark"] .theme .i-sun{opacity:1;transform:none}
.nav .links{display:flex;gap:26px;align-items:center}
.nav .links a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);transition:color .25s}
.nav .links a:hover{color:var(--ink)}
.nav .ncta{background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:1px;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;transition:background .3s}
.nav .ncta:hover{background:var(--blue)}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:8px;min-width:44px;min-height:44px}
.burger span{width:24px;height:2px;background:var(--ink)}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font-size:14px;text-transform:uppercase;letter-spacing:.05em;
  padding:16px 26px;border:2px solid var(--ink);color:var(--ink);background:transparent;border-radius:1px;
  transition:transform .5s var(--ease),background .3s,color .3s;will-change:transform;font-weight:600}
.btn .a{transition:transform .4s var(--ease)}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn:hover .a{transform:translateX(5px)}
.btn.primary{background:var(--btn-blue);border-color:var(--btn-blue);color:#fff}
.btn.primary:hover{background:var(--ink);border-color:var(--ink)}
/* Hero – riesige kinetische Typo */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 60px;position:relative;overflow:hidden}
.hero .ey{font-size:13px;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-2);margin-bottom:22px;display:flex;gap:10px;align-items:center}
.hero .ey b{color:var(--blue)}
.htype{font-family:"Anton",sans-serif;text-transform:uppercase;line-height:.84;letter-spacing:-.005em;
  font-size:clamp(2.8rem,12.5vw,10.5rem)}
.htype .ln{display:block;overflow:hidden;padding-right:.06em}
.htype .ln .w{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.htype .ln.in .w{transform:translateY(0)}
.htype .cut{color:var(--blue);position:relative}
.hero .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:44px}
.hero .foot p{max-width:44ch;color:var(--ink-2);font-size:1.08rem}
.hero .foot .cr{display:flex;gap:12px;flex-wrap:wrap}
/* Diagonaler Wisch-Trenner (Signature): voll gefülltes Band mit schräger Schnittkante */
.wipe{height:clamp(76px,11vw,138px);position:relative;overflow:hidden;margin:0;
  background:var(--blue);display:flex;align-items:center;
  clip-path:polygon(0 15%,100% 0,100% 85%,0 100%)}
.wipe.ink{background:var(--ink)}
.wipe .run{white-space:nowrap;display:flex;gap:44px;align-items:center;color:var(--bg);
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(1.4rem,3.2vw,2.6rem);letter-spacing:.02em;will-change:transform}
.wipe .run .d{color:var(--bg);opacity:.5}
/* Section */
.sec{padding:clamp(60px,10vh,120px) 0;position:relative}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.sec-h .k{font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--blue);margin-bottom:14px;display:block}
.sec-h h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,6vw,5rem);line-height:.9;letter-spacing:.004em;
  text-shadow:0 0 4px var(--bg),0 0 4px var(--bg)}
.sec-h p{max-width:38ch;color:var(--ink-2)}
/* Leistungen – große Typo-Liste, Text läuft aus dem Rand */
.big{border-top:2px solid var(--ink)}
.big .it{padding:22px 0;border-bottom:2px solid var(--ink);display:grid;grid-template-columns:auto 1fr auto;
  gap:26px;align-items:center;position:relative;overflow:hidden;transition:color .4s}
.big .it .bn{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;align-self:start;padding-top:14px}
.big .it .bt{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.8rem,6vw,4.4rem);
  line-height:.92;letter-spacing:.006em;transition:transform .5s var(--ease),color .4s}
.big .it .bd{color:var(--ink-2);font-size:.95rem;max-width:34ch;text-align:right;opacity:.9}
.big .it::after{content:"";position:absolute;left:0;right:0;bottom:0;top:0;background:var(--blue);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.big .it:hover{color:#fff}
.big .it:hover::after{transform:translateY(0)}
.big .it:hover .bt{transform:translateX(18px);color:#fff}
.big .it:hover .bd{color:rgba(255,255,255,.85)}
.big .it:hover .bn{color:rgba(255,255,255,.7)}
/* Prozess – nummerierte Blöcke mit Diagonale */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.steps .st{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:24px 20px;min-height:230px;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:background .4s}
.steps .st .sn{font-family:"Anton",sans-serif;font-size:3.4rem;color:var(--blue);line-height:.8}
.steps .st h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.steps .st p{color:var(--ink-2);font-size:.9rem}
.steps .st:hover{background:var(--ink)}
.steps .st:hover h3,.steps .st:hover p{color:var(--bg)}
.steps .st:hover .sn{color:var(--blue-2)}
/* Projekte – Diagonale Grafik + große Titel */
.pj{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.pj a{position:relative;border:2px solid var(--ink);overflow:hidden;background:var(--bg-2);display:block}
.pj a .art{aspect-ratio:16/10;position:relative;overflow:hidden}
.pj a .art canvas{width:100%;height:100%;display:block}
.pj a .art img{width:100%;height:100%;object-fit:cover;display:block}
.pj a .tg.live{background:var(--blue);border-color:var(--blue);color:#fff}
.pj a .tg.wip{background:#e0a400;border-color:#e0a400;color:#0d0d0e}
.pj a.soon{cursor:default}
.pj a.soon:hover{transform:none;box-shadow:none}
.pj a .cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-top:2px solid var(--ink)}
.pj a .cap h2,.pj a .cap h3,.pj a .cap h4{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.5rem;letter-spacing:.01em}
.pj a .cap span{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.pj a .tg{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--bg);border:2px solid var(--ink);padding:4px 10px}
.pj a:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--blue)}
.pj a{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* CTA */
.cta{position:relative;overflow:hidden;padding:clamp(70px,12vw,150px) 0;background:var(--ink);color:var(--bg);margin-top:0}
.cta .huge{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2.8rem,13vw,11rem);line-height:.92;letter-spacing:.005em}
.cta .huge .cut{color:var(--blue-2)}
.cta p{max-width:46ch;color:var(--bg);opacity:.75;margin:26px 0 34px;font-size:1.08rem}
.cta .btn{border-color:var(--bg);color:var(--bg)}
.cta .btn:hover{background:var(--bg);color:var(--ink)}
.cta .btn.primary{background:var(--btn-blue);border-color:var(--btn-blue);color:#fff}
.cta .btn.primary:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
/* Reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}
/* Responsive */
@media(max-width:1000px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:820px){
  .nav .links{display:none}
  .burger{display:flex}
  .nav .links.open{display:flex;position:absolute;top:100%;right:14px;left:14px;flex-direction:column;gap:6px;
    background:var(--bg);border:2px solid var(--ink);padding:16px}
  .nav .links.open a{display:flex;align-items:center;min-height:44px;padding:8px 6px}
  .pj{grid-template-columns:1fr}
  .big .it{grid-template-columns:auto 1fr;gap:14px}
  .big .it .bd{display:none}
  .hero .foot{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .steps .st{min-height:auto}
  .sec-h{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .htype .ln .w{transform:none}
}

/* ============ MULTIPAGE-ERGÄNZUNGEN ============ */
/* aktiver Nav-Link */
.nav .links a.active{color:var(--ink)}
.nav .links a.active::after{content:"";display:block;height:2px;background:var(--blue);margin-top:3px}
/* Subpage-Hero (kleiner als der Start-Hero) */
.phero{padding:clamp(148px,20vh,210px) 0 clamp(30px,6vh,64px);position:relative}
.phero .ey{font-size:13px;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-2);
  margin-bottom:20px;display:flex;gap:10px;align-items:center}
.phero .ey b{color:var(--blue)}
.phero h1{font-family:"Anton",sans-serif;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;
  font-size:clamp(2.6rem,10vw,7.5rem);overflow-wrap:break-word;hyphens:auto}
.phero h1 .cut{color:var(--blue)}
.phero .sub{max-width:52ch;color:var(--ink-2);font-size:1.12rem;margin-top:24px}
/* Footer erweitert (Multipage-Spalten) */
.foot-x{background:var(--ink);color:var(--bg)}
.foot-x .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:clamp(48px,8vh,84px) clamp(18px,4vw,56px) 20px}
.foot-x .fbrand img{height:74px;width:auto;margin-bottom:18px;filter:none}
html[data-theme="light"] .foot-x .fbrand img{filter:none}
.foot-x .fbrand p{opacity:.6;font-size:.92rem;max-width:34ch;text-transform:none;letter-spacing:0;line-height:1.5}
.foot-x .fcol h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-bottom:14px}
.foot-x .fcol a{display:block;color:var(--bg);opacity:.82;padding:10px 0;font-size:.95rem;
  text-transform:none;letter-spacing:0;transition:opacity .25s}
.foot-x .fcol a:hover{opacity:1}
.foot-x .fbar{border-top:1px solid rgba(128,128,128,.3);margin:20px clamp(18px,4vw,56px) 0;
  padding:20px 0 34px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.6}
@media(max-width:820px){ .foot-x .wrap{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .foot-x .wrap{grid-template-columns:1fr} }
/* Utility */
.center{text-align:center}
.mt-0{margin-top:0}

/* ---- Header-CTA Kontrast-Fix + Logo-Feinschliff ---- */
.nav .links a.ncta{background:var(--ink);color:var(--bg);font-weight:600}
.nav .links a.ncta:hover{background:var(--blue);color:#fff}
.nav .links a.ncta::after{display:none}
@media(max-width:560px){ .nav .lg img{height:94px} .nav{padding:8px 16px} }

/* Mobil: CTA-/Hero-Buttons volle Breite (gestreckt, gleichmäßig) */
@media(max-width:560px){
  .cr{flex-direction:column;align-items:stretch;width:100%}
  .cr .btn{width:100%;justify-content:center}
  .hero .foot .cr{width:100%}
}