/* KLANG² · gemeinsame Basis für Subseiten */
/* Design-DNA: brutalistisch, S/W, JetBrains Mono + Space Grotesk, architektonisch */

:root{
  --bg:#0a0a0a;
  --fg:#fafafa;
  --dim:#8a8a8a;
  --line:#222;
  --line-2:#3a3a3a;
  --gut: clamp(20px, 4vw, 56px);
  --maxw: 1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#fafafa;color:#0a0a0a}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Layout-Helper */
.frame{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative}
.hr{border:0;border-top:1px solid var(--line);margin:0}
.coord{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.num{font-variant-numeric:tabular-nums}

/* NAV (gemeinsam) */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:rgba(10,10,10,.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.nav-mark{display:flex;align-items:center;gap:10px}
.nav-mark img{width:22px;height:22px;display:block}
.nav-mark sup{font-size:.7em}
.nav-links{display:flex;gap:28px;color:var(--dim)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a:hover{color:var(--fg)}
.nav-cta{display:flex;align-items:center;gap:10px;color:var(--fg)}
.nav-cta .dot{width:6px;height:6px;background:var(--fg);border-radius:0}
.nav-back{font-size:11px;letter-spacing:.22em;color:var(--dim);transition:color .25s}
.nav-back:hover{color:var(--fg)}
@media (max-width:760px){
  .nav-links{display:none}
}

/* SECTION HEAD */
.sect-head{
  display:grid;
  grid-template-columns: 100px 1fr auto;
  align-items:baseline;gap:24px;
  padding-top:96px;padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.sect-head .id{font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.sect-head h1, .sect-head h2{
  margin:0;
  font-family:'Space Grotesk','JetBrains Mono',sans-serif;
  font-weight:300;
  font-size:clamp(40px, 6vw, 84px);
  line-height:.95;letter-spacing:-.02em;text-transform:uppercase;
}
.sect-head .meta{
  font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;
  text-align:right;white-space:nowrap;
}
@media (max-width:760px){
  .sect-head{grid-template-columns:1fr;gap:8px;padding-top:96px}
  .sect-head .meta{text-align:left}
  .sect-head h1, .sect-head h2{font-size:clamp(32px,9vw,56px)}
}

/* PANEL INVERT (Bauhaus-Wechsel S↔W) */
.panel-invert{
  background:var(--fg);color:var(--bg);
  margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));
  padding-left:var(--gut);padding-right:var(--gut);
  border-top:1px solid var(--bg);border-bottom:1px solid var(--bg);
}
.panel-invert .sect-head{border-bottom-color:rgba(0,0,0,.18)}
.panel-invert .sect-head .id, .panel-invert .sect-head .meta, .panel-invert .coord{color:rgba(0,0,0,.65)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 22px;border:1px solid var(--fg);color:var(--fg);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  background:transparent;cursor:pointer;
  transition:background .3s, color .3s, transform .3s;
}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn:active{transform:translateY(1px)}
.btn-ghost{border-color:var(--line-2);color:var(--dim)}
.btn-ghost:hover{border-color:var(--fg);color:var(--fg);background:transparent}
.panel-invert .btn{border-color:var(--bg);color:var(--bg)}
.panel-invert .btn:hover{background:var(--bg);color:var(--fg)}

/* Pill */
.pill{
  display:inline-flex;align-items:center;
  padding:8px 14px;border:1px solid var(--line-2);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}
.panel-invert .pill{border-color:rgba(0,0,0,.25);color:rgba(0,0,0,.65)}

/* Footer */
footer.frame{padding-top:72px;padding-bottom:48px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr}}
.ft-col h5{
  font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;
  margin:0 0 14px;font-weight:500;
}
.ft-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.ft-col a{color:#cfcfcf;font-size:13px;transition:color .2s}
.ft-col a:hover{color:var(--fg)}
.ft-disclaimer{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.06em;color:var(--dim);
}
.ft-bottom{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}

/* Reveal-on-scroll Helper */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  .reveal{opacity:1;transform:none}
}