/* KRESSS – Website-Stil. Werte aus dem Design-System „KRESSS“ (tokens.json). */
@font-face{font-family:"Geist";src:url("../fonts/Geist-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --graphit:#323332;--kalk:#F7F6F3;--zinn:#B9B8B2;--messing:#9C8459;--glut:#C8643C;
  --ground:#323332;--ground-deep:#262726;--surface:#3B3C3B;
  --ink:#F7F6F3;--ink-muted:#B9B8B2;--hairline:#4A4B4A;--segment-off:#55564F;
  --mark-consulting:#9C8459;--mark-media:#B9B8B2;--mark-ai:#C8643C;
  --text-consulting:#B39A6B;--text-media:#B9B8B2;--text-ai:#E0835E;
  --danger:#E8907A;
  --font-sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;
  --radius-sm:2px;
  --gutter:var(--space-12);--section:var(--space-24);--maxw:1200px;
  color-scheme:dark;
}
@media (max-width:720px){:root{--gutter:var(--space-4);--section:var(--space-16)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-weight:400;font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);padding:8px 12px;z-index:10}
.skip:focus{left:var(--gutter)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* Typografie */
.display-xl{font-weight:300;font-size:72px;line-height:76px;letter-spacing:-.02em;margin:0;text-wrap:balance}
.display{font-weight:300;font-size:48px;line-height:54px;letter-spacing:-.015em;margin:0;text-wrap:balance}
.title{font-weight:300;font-size:28px;line-height:36px;letter-spacing:-.01em;margin:0;text-wrap:balance}
.heading{font-weight:500;font-size:19px;line-height:28px;margin:0}
.lead{font-weight:300;font-size:19px;line-height:31px;color:var(--ink);max-width:62ch;margin:0}
.body{max-width:65ch}
.muted{color:var(--ink-muted)}
.label{font-size:12px;line-height:16px;letter-spacing:.22em;color:var(--ink-muted);text-transform:lowercase;margin:0}
.caption{font-size:13px;line-height:20px;color:var(--ink-muted)}
@media (max-width:720px){
  .display-xl{font-size:44px;line-height:48px}
  .display{font-size:36px;line-height:42px}
  .title{font-size:24px;line-height:31px}
  .lead{font-size:17px;line-height:28px}
}

/* Wortmarke (HTML, damit sie animiert werden kann) */
.wm{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--ink)}
.wm .w{letter-spacing:.14em;margin-right:-.14em;white-space:nowrap}
.wm .w b{font-weight:500}
.wm .w span{font-weight:300;color:var(--ink-muted)}
.wm .bar{display:flex;justify-content:flex-end;gap:.14em;margin:.24em -.9em 0 0;height:3px;align-items:flex-start}
.wm .bar i{display:block;height:2px;width:.62em;background:var(--segment-off)}
.wm .bar i:nth-child(1){background:var(--mark-consulting)}
.wm .bar i:nth-child(2){background:var(--mark-media)}
.wm .bar i:nth-child(3){background:var(--mark-ai)}
.wm[data-area=consulting] .bar i:not(:nth-child(1)),
.wm[data-area=media] .bar i:not(:nth-child(2)),
.wm[data-area=ai] .bar i:not(:nth-child(3)){background:var(--segment-off)}

/* Kopf */
.site-head{border-bottom:1px solid var(--hairline)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;padding-block:var(--space-6) calc(var(--space-6) + 4px)}
.site-head .wm{font-size:22px}
.nav{display:flex;gap:var(--space-8);flex-wrap:wrap}
.nav a{text-decoration:none;font-size:14px;letter-spacing:.06em;color:var(--ink-muted);padding:var(--space-1) 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink-muted)}
@media (max-width:720px){.nav{gap:var(--space-6)}.site-head .wrap{padding-block:var(--space-4)}}

/* Abschnitte */
.section{padding-block:var(--section)}
.section.deep{background:var(--ground-deep)}
.section-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-12)}
.rule{border:0;border-top:1px solid var(--hairline);margin:0}

/* Startseite: Kopf mit Punktnetz */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hairline)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{position:relative;padding-block:var(--space-24) var(--space-16);display:flex;flex-direction:column;gap:var(--space-8)}
.hero .display-xl span{display:block}
.areas-pick{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-4)}
.areas-pick a{text-decoration:none;font-size:13px;letter-spacing:.22em;color:var(--ink-muted);padding:var(--space-2) 0;display:inline-flex;flex-direction:column;gap:var(--space-2);transition:color .4s}
.areas-pick a i{display:block;width:28px;height:2px;background:var(--segment-off);transition:background-color .4s,width .4s}
.areas-pick a[data-area=consulting]:hover,.areas-pick a[data-area=consulting]:focus-visible{color:var(--text-consulting)}
.areas-pick a[data-area=media]:hover,.areas-pick a[data-area=media]:focus-visible{color:var(--text-media)}
.areas-pick a[data-area=ai]:hover,.areas-pick a[data-area=ai]:focus-visible{color:var(--text-ai)}
.areas-pick a[data-area=consulting]:hover i{background:var(--mark-consulting);width:40px}
.areas-pick a[data-area=media]:hover i{background:var(--mark-media);width:40px}
.areas-pick a[data-area=ai]:hover i{background:var(--mark-ai);width:40px}
@media (max-width:720px){.hero .wrap{padding-block:var(--space-16) var(--space-12)}}

/* Leitmotiv */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.trio > div{border-top:1px solid var(--hairline);padding-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.trio p{margin:0;color:var(--ink-muted)}
@media (max-width:860px){.trio{grid-template-columns:minmax(0,1fr)}}

/* Bereichskarten */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.card{background:var(--ground);padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none;color:var(--ink);border:1px solid transparent;transition:border-color .3s}
.card:hover{border-color:var(--hairline)}
.card .seg{display:flex;gap:var(--space-1);margin-bottom:var(--space-2)}
.card .seg i{display:block;width:28px;height:2px;background:var(--segment-off)}
.card[data-area=consulting] .seg i:nth-child(1){background:var(--mark-consulting)}
.card[data-area=media] .seg i:nth-child(2){background:var(--mark-media)}
.card[data-area=ai] .seg i:nth-child(3){background:var(--mark-ai)}
.card[data-area=consulting] .label{color:var(--text-consulting)}
.card[data-area=media] .label{color:var(--text-media)}
.card[data-area=ai] .label{color:var(--text-ai)}
.card h3{font-weight:300;font-size:24px;line-height:30px;letter-spacing:-.01em;margin:0}
.card p{margin:0;color:var(--ink-muted);font-size:15px;line-height:24px}
.card .more{margin-top:auto;padding-top:var(--space-4);font-size:14px;color:var(--ink)}
@media (max-width:860px){.cards{grid-template-columns:minmax(0,1fr)}}

.audience{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);font-weight:300;font-size:24px;line-height:34px}
.audience li{display:flex;align-items:center;gap:var(--space-3)}
.audience li::before{content:"";width:12px;height:2px;background:var(--ink-muted);flex:0 0 auto}
@media (max-width:720px){.audience{font-size:20px;line-height:28px;flex-direction:column}}

/* Schaltflächen */
.btn{display:inline-block;font:400 15px/20px var(--font-sans);letter-spacing:.02em;padding:12px 22px;border-radius:var(--radius-sm);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-pri{background:var(--ink);color:var(--ground)}
.btn-pri:hover{background:var(--ink-muted)}
.btn-sec{background:transparent;color:var(--ink);border-color:var(--ink-muted)}
.lnk{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:2px}
.lnk:hover{border-bottom-color:var(--ink)}
.cta{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}

/* Bereichsseiten */
.area-hero .wrap{padding-block:var(--space-16) var(--space-12);display:flex;flex-direction:column;gap:var(--space-6)}
.area-hero .segline{display:flex;gap:var(--space-2)}
.area-hero .segline i{display:block;width:64px;height:3px;background:var(--segment-off)}
.area-hero[data-area=consulting] .segline i:nth-child(1){background:var(--mark-consulting)}
.area-hero[data-area=media] .segline i:nth-child(2){background:var(--mark-media)}
.area-hero[data-area=ai] .segline i:nth-child(3){background:var(--mark-ai)}
.area-hero[data-area=consulting] .label{color:var(--text-consulting)}
.area-hero[data-area=media] .label{color:var(--text-media)}
.area-hero[data-area=ai] .label{color:var(--text-ai)}
.fields{list-style:none;margin:0;padding:0}
.fields li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-8);padding-block:var(--space-6);border-top:1px solid var(--hairline)}
.fields li:last-child{border-bottom:1px solid var(--hairline)}
.fields p{margin:0;color:var(--ink-muted);max-width:60ch}
@media (max-width:720px){.fields li{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}}
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}
.quad > div,.steps li{border-top:1px solid var(--hairline);padding-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.quad p,.steps p{margin:0;color:var(--ink-muted);font-size:15px;line-height:24px}
@media (max-width:960px){.quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.quad{grid-template-columns:minmax(0,1fr)}}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);font-size:13px;color:var(--text-ai);font-variant-numeric:tabular-nums}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-12)}
.grid2 > div{padding-block:var(--space-6);border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:var(--space-2)}
.grid2 p{margin:0;color:var(--ink-muted)}
@media (max-width:720px){.grid2{grid-template-columns:minmax(0,1fr)}}

/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-16)}
@media (max-width:860px){.contact{grid-template-columns:minmax(0,1fr);gap:var(--space-12)}}
.direct{display:flex;flex-direction:column;gap:var(--space-6)}
.direct div{display:flex;flex-direction:column;gap:var(--space-1)}
.direct a{font-weight:300;font-size:22px;line-height:30px;text-decoration:none}
.direct a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
form{display:flex;flex-direction:column;gap:var(--space-6)}
.f{display:flex;flex-direction:column;gap:var(--space-2)}
.f label{font-size:13px;letter-spacing:.04em;color:var(--ink-muted)}
.f input,.f textarea{font:400 16px/24px var(--font-sans);color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:12px 14px;width:100%}
.f textarea{min-height:180px;resize:vertical}
.f input:focus,.f textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink-muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:13px;line-height:20px;color:var(--ink-muted);margin:0}
.msg{padding:var(--space-4) var(--space-6);border:1px solid var(--hairline);margin:0}
.msg.err{border-color:var(--danger);color:var(--danger)}

/* Rechtstexte */
.legal{max-width:70ch}
.legal h2{font-weight:500;font-size:17px;line-height:26px;margin:var(--space-12) 0 var(--space-2)}
.legal p,.legal li{color:var(--ink-muted)}
.legal p{margin:0 0 var(--space-3)}
.legal ul{margin:0 0 var(--space-3);padding-left:1.2em}

/* Fuß */
.site-foot{border-top:1px solid var(--hairline);padding-block:var(--space-12)}
.site-foot .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.site-foot .wm{font-size:16px}
.foot-line{display:flex;gap:var(--space-6);flex-wrap:wrap;font-size:13px;line-height:20px;color:var(--ink-muted)}
.foot-line a{text-decoration:none}
.foot-line a:hover{color:var(--ink)}

/* Bewegung */
.js .wm.anim .w{opacity:0;transition:opacity .9s ease}
.js .wm.anim.on .w{opacity:1}
.js .wm.anim .bar i{width:0;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.js .wm.anim.on .bar i{width:.62em}
.js .wm.anim.on .bar i:nth-child(1){transition-delay:.9s}
.js .wm.anim.on .bar i:nth-child(2){transition-delay:1.12s}
.js .wm.anim.on .bar i:nth-child(3){transition-delay:1.34s}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .js .wm.anim .w{opacity:1}.js .wm.anim .bar i{width:.62em}
}

@media print{
  :root{--ground:#fff;--ground-deep:#fff;--ink:#323332;--ink-muted:#62635F;--hairline:#D9D7D1}
  .hero canvas,.nav,.areas-pick{display:none}
}