/* ============================================================
   Kamusin — Air-Struktur × Kamusin-Marke. Dark only.
   Flache Flächen, 1px-Borders, keine Schatten, keine Gradients.
   Radien: Buttons 8px · Karten 12px · Bilder 11px · Inputs 4px
   ============================================================ */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/bricolage-grotesque-500.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/bricolage-grotesque-600.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/bricolage-grotesque-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/bricolage-grotesque-800.woff2') format('woff2')}

:root{
  /* Farben — Kamusin warm, dark only */
  --bg:#0B0A09;
  --bg-2:#121110;
  --ink:#F4EFE9;
  --ink-dim:#A39B91;
  --ink-faint:#6E6760;
  --accent:#E8B68F;          /* Peach — Links, Akzentwörter, Hairlines */
  --accent-2:#F2D0AE;
  --copper:#C0794A;
  --haze:#F4EFE9;            /* helle Insel-Fläche (Air: Haze Card) */
  --on-haze:#1A120C;
  --border:rgba(244,239,233,.10);
  --border-strong:rgba(244,239,233,.22);

  /* Typo */
  --font-head:'Bricolage Grotesque',sans-serif;
  --font-body:'Hanken Grotesk',sans-serif;

  /* Layout */
  --page-max:1150px;
  --nav-h:72px;

  /* Radien */
  --r-btn:8px;
  --r-card:12px;
  --r-img:11px;
  --r-input:4px;

  --flow-l:70;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;position:relative;
}
/* feines Korn — einziges Textur-Element */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.04;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--accent);color:#241910}

.wrap{max-width:var(--page-max);margin:0 auto;padding:0 32px}

/* ---------- NAV — minimal, 72px ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
nav.scrolled{
  background:rgba(11,10,9,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:28px;width:auto;display:block}

.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{
  color:var(--ink-dim);text-decoration:none;font-size:14px;font-weight:500;
  padding:4px 0;border-bottom:2px solid transparent;
  transition:color .25s,border-color .25s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- BUTTONS — Air: nur Ghost oder helle Fläche ---------- */
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--ink);
  border:1px solid var(--border-strong);
  padding:10px 18px;border-radius:var(--r-btn);
  font-family:var(--font-body);font-weight:500;font-size:14px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:border-color .25s,background .25s;
}
.btn-ghost:hover{border-color:var(--accent);background:rgba(232,182,143,.06)}
.btn-ghost svg{width:15px;height:15px}

.btn-solid{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--haze);color:var(--on-haze);
  border:1px solid var(--haze);
  padding:10px 18px;border-radius:var(--r-btn);
  font-family:var(--font-body);font-weight:500;font-size:14px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.btn-solid:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-solid svg{width:15px;height:15px}

/* Underline-Link (Air: Unterstreichung ist die Affordanz) */
.ulink{
  color:var(--accent);text-decoration:none;
  border-bottom:2px solid var(--accent);
  padding:0 2px 1px;
  transition:color .25s,border-color .25s;
}
.ulink:hover{color:var(--accent-2);border-color:var(--accent-2)}

/* ---------- SEKTIONS-GERÜST ---------- */
section{position:relative}
.sect{padding:120px 0}
.sect-head{margin-bottom:56px;max-width:640px}
.sect-head.centered{margin-left:auto;margin-right:auto;text-align:center}
.sect-label{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:18px;
}
.sect-title{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08;letter-spacing:-.02em;
}
.sect-title em{font-style:normal;color:var(--accent)}
.sect-intro{color:var(--ink-dim);font-size:1.08rem;margin-top:18px;text-wrap:pretty}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border);padding:48px 0}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-inner .brand img{height:24px}
.foot-meta{color:var(--ink-faint);font-size:.9rem}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--ink-dim);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .25s}
.foot-links a:hover{color:var(--ink)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}.reveal.d5{transition-delay:.35s}.reveal.d6{transition-delay:.42s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:880px){
  .nav-links{display:none}
  .wrap{padding:0 22px}
  .sect{padding:88px 0}
}