/* =====================================================================
   BEZUGSSYSTEME — Shared Layout (Nav, Footer, Buttons, Theme, Reveals)
   Geladen auf allen Seiten zwischen system.css und home/subpage.css.
   ===================================================================== */

:root {
  --bg:     oklch(0.975 0.006 92);
  --surf:   oklch(0.955 0.008 90);
  --surf-2: oklch(0.928 0.010 88);
  --ink:    oklch(0.225 0.014 70);
  --ink-2:  oklch(0.41 0.013 72);
  --ink-3:  oklch(0.35 0 0);
  --hairline:   oklch(0.88 0.008 82);
  --hairline-2: oklch(0.81 0.010 82);
  --display-font: "Hanken Grotesk", system-ui, sans-serif;
  --display-weight: 800;
  --ki:  #1A73E8;
  --org: #D4541A;
  --web: #188038;
  --ki-nav: #5B9FF5;
  --ki-deep:  color-mix(in srgb, var(--ki) 58%, #000);
  --org-deep: color-mix(in srgb, var(--org) 56%, #000);
  --web-deep: color-mix(in srgb, var(--web) 56%, #000);
  --ki-soft:  color-mix(in srgb, var(--ki) 14%, var(--bg));
  --org-soft: color-mix(in srgb, var(--org) 14%, var(--bg));
  --web-soft: color-mix(in srgb, var(--web) 14%, var(--bg));
  --brand: var(--org);
  --sel: color-mix(in srgb, var(--org) 30%, transparent);
  color-scheme: light;
}

body { background: var(--bg); color: var(--ink); font-family: var(--sans); }
::selection { background: var(--sel); }
.display { font-family: var(--display-font); font-weight: var(--display-weight, 400); letter-spacing: -0.02em; /* Basis line-height für Display-Headlines. Wird in subpage.css bewusst auf 0.98 überschrieben. */ line-height: 0.95; }

/* Säulenfarbe → generische Akzent-Tokens */
body.pillar-ki  { --acc: var(--ki);  --acc-soft: var(--ki-soft);  }
body.pillar-org { --acc: var(--org); --acc-soft: var(--org-soft); }
body.pillar-web { --acc: var(--web); --acc-soft: var(--web-soft); }
body.pillar-ink { --acc: var(--ink); --acc-soft: var(--surf); }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; transform: scaleX(0); transform-origin: 0 50%;
   background: linear-gradient(90deg, var(--ki), var(--org) 50%, var(--web)); }

/* Reveals */
[data-reveal] { opacity: 0; transform: translateY(40px) scale(.985); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="2"].in { transition-delay: .1s; } [data-reveal="3"].in { transition-delay: .2s; }
[data-reveal="4"].in { transition-delay: .3s; } [data-reveal="5"].in { transition-delay: .4s; }
.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.no-motion [data-parallax] { transform: none !important; }
/* Above-the-fold: kein FOUC im Hero/Subhero */
.hero [data-reveal], .subhero [data-reveal] { opacity: 1; transform: none; filter: none; }

/* NAV */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 70px; display: flex; align-items: center; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.solid { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--hairline); --nav-fg: var(--ink); }
.nav:not(.solid) { --nav-fg: #fff; --nav-cta-bg: #fff; --nav-cta-fg: #14121a; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.2rem; color: var(--nav-fg, var(--ink)); transition: color .3s; }
.logo .dots { display: flex; gap: 4px; } .logo .dots i { width: 9px; height: 9px; border-radius: 50%; }
.dots i:nth-child(1) { background: var(--ki); }
.dots i:nth-child(2) { background: var(--org); }
.dots i:nth-child(3) { background: var(--web); }
.nav:not(.solid) .logo .dots i:nth-child(1) { background: var(--ki-nav); }
.tabs span:nth-child(1) i { background: var(--ki); }
.tabs span:nth-child(2) i { background: var(--org); }
.tabs span:nth-child(3) i { background: var(--web); }
.navlinks { display: flex; gap: 4px; align-items: center; }
.navlinks a { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 13px; border-radius: 100px; color: var(--nav-fg, var(--ink-2)); white-space: nowrap; transition: background .25s, color .25s; }
.navlinks a:hover { background: color-mix(in srgb, var(--nav-fg, var(--ink)) 14%, transparent); }
.navlinks a.active { color: var(--nav-fg); }
.navlinks a.cta { background: var(--nav-cta-bg, var(--ink)); color: var(--nav-cta-fg, var(--bg)); }
.navlinks a.cta:hover { background: var(--acc, var(--org)); color: #fff; }
@media (max-width: 820px){ .navlinks a.lnk { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; padding: 14px 22px; border-radius: 100px; transition: transform .25s, background .25s, color .25s, border-color .25s; }
.btn .icon { width: 17px; height: 17px; transition: transform .3s; }
.btn:hover .icon { transform: translateX(3px); }
.btn-light { background: #fff; color: #14121a; } .btn-light:hover { transform: translateY(-2px); background: rgba(255,255,255,.88); }
.btn-ghost-d { border: 1px solid rgba(255,255,255,.65); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.35); } .btn-ghost-d:hover { border-color: #fff; background: rgba(255,255,255,.15); transform: translateY(-2px); }

/* Section kickers */
.sec-kick { font-family: var(--mono); font-size: clamp(11px,.85vw,13px); letter-spacing: .16em; text-transform: uppercase; color: var(--acc, var(--org)); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 11px; }
.sec-kick::before { content:""; width: 30px; height: 1px; background: currentColor; }
.sec-intro { max-width: 64ch; margin-bottom: clamp(36px,5vw,60px); }

/* Images */
.img-slot { display: block; position: relative; overflow: hidden; }
.img-slot--rounded { border-radius: 16px; }
.img-slot--rounded img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Contact channels */
.cchan { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.cchan a { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--hairline); transition: transform .3s, background .3s; }
.cchan a:hover { transform: translateX(14px); background: var(--surf); }
.cchan .ic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--org); }
.cchan .ic .icon { width: 20px; height: 20px; }
.cchan .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cchan .val { font-family: var(--serif); font-size: 1.2rem; }
.cchan .arr { width: 18px; height: 18px; color: var(--ink-2); transition: transform .3s; }
.cchan a:hover .arr { transform: translateX(4px); color: var(--org); }

/* Footer */
footer.site { background: var(--surf); border-top: 1px solid var(--hairline); padding: clamp(44px,6vw,72px) 0 40px; color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px){ .foot-grid { grid-template-columns: 1fr 1fr; } }
footer.site h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
footer.site .blurb { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); max-width: 34ch; line-height: 1.45; }
footer.site .dots { display: flex; gap: 5px; margin-bottom: 16px; } footer.site .dots i { width: 10px; height: 10px; border-radius: 50%; }
footer.site ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
footer.site ul a:hover { color: var(--ink); }
footer.site .copy { margin-top: clamp(36px,4vw,56px); padding-top: 22px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* CTA band */
.cta-band { background: oklch(0.2 0.016 262); color: #fff; }
.cta-band .wrap { padding: clamp(56px,8vw,104px) var(--gut); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; }
@media (max-width: 820px){ .cta-band .wrap { grid-template-columns: 1fr; gap: 28px; } }
.cta-band h2 { font-family: var(--display-font); font-weight: var(--display-weight); font-size: clamp(2rem,4.6vw,3.6rem); line-height: 1.0; letter-spacing: -0.02em; text-wrap: balance; }
.cta-band h2 em { font-style: normal; color: var(--acc, var(--org)); }
.cta-band p { color: rgba(255,255,255,.9); margin-top: 14px; max-width: 42ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 821px){ .cta-band .actions { justify-content: flex-end; } }

/* Breadcrumbs */
.crumbs { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.crumbs .icon { width: 13px; height: 13px; }
.crumbs--light { color: rgba(255,255,255,.88); margin-bottom: 22px; }
.crumbs--light a { color: rgba(255,255,255,.88); } .crumbs--light a:hover { color: #fff; }
.crumbs--dark { color: var(--ink-2); margin-bottom: 18px; }
.crumbs--dark a { color: var(--ink-2); } .crumbs--dark a:hover { color: var(--ink); }

/* Download gate (Platzhalter) */
.download-gate {
  background: var(--surf-2);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.download-gate__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 680px) {
  .download-gate__inner { grid-template-columns: 1fr; }
}
.download-gate__eyebrow {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acc, var(--org));
  margin-bottom: .75rem;
}
.download-gate__title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  margin-bottom: .75rem;
}
.download-gate__desc {
  font-size: .95rem;
  color: var(--ink-2);
  line-height: 1.6;
}
.download-gate__placeholder {
  font-size: .9rem;
  color: var(--ink-3);
  font-style: italic;
}