/* ==========================================================
   Chamäleon Industries — eigene Website

   Kernidee: --skin-h ist EINE Zahl (ein Farbton). Alles Farbige
   der Seite leitet sich daraus ab. Beim Scrollen setzt jede
   Sektion einen anderen Wert, dadurch häutet sich die ganze
   Seite. Wählt der Besucher selbst eine Farbe, gewinnt seine
   Wahl und das Wechseln hört auf.

   Bewusst nur eine dunkle Fassung: Die Marke ist ein Chamäleon
   auf dunklem Grund, dort wirken die Farbwechsel am stärksten.
   Das ist eine Entscheidung, kein vergessener Hell-Modus.

   Keine externen Schriften — Systemstack. Schnell, und es geht
   nichts an Google Fonts raus (verkaufen wir Kunden genauso).
   ========================================================== */

:root {
  color-scheme: dark;

  /* Der eine Regler */
  --skin-h: 158;
  --skin-s: 72%;

  --skin:        hsl(var(--skin-h) var(--skin-s) 58%);
  --skin-bright: hsl(var(--skin-h) var(--skin-s) 70%);
  --skin-deep:   hsl(var(--skin-h) var(--skin-s) 38%);
  --skin-soft:   hsl(var(--skin-h) var(--skin-s) 58% / 0.14);
  --skin-line:   hsl(var(--skin-h) var(--skin-s) 58% / 0.32);
  --skin-glow:   hsl(var(--skin-h) var(--skin-s) 58% / 0.20);

  /* Neutrale mit Grünstich — passend zur Chamäleonhaut, nicht geerbtes Grau */
  --ink-950: #070B09;
  --ink-900: #0A100D;
  --ink-800: #111917;
  --ink-700: #18231F;
  --ink-600: #22302B;

  --text:       #EAF3EE;
  --text-mute:  #93A79D;
  --line:       rgba(234, 243, 238, 0.10);
  --line-firm:  rgba(234, 243, 238, 0.22);

  --font-display: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-quote: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --skin-ease: 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; margin: 0 0 0.4em;
}
h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
a { color: inherit; }

.kicker {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--skin); margin: 0 0 1.5em;
  transition: color var(--skin-ease);
}
.section-lede { color: var(--text-mute); font-size: clamp(1rem, 1.9vw, 1.16rem); max-width: 56ch; margin-bottom: 3em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(22px, 5vw, 48px); }
.wrap-narrow { max-width: 640px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--skin); color: var(--ink-950); padding: 10px 16px;
  border-radius: 8px; font-weight: 700; transition: top 0.2s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--skin); outline-offset: 4px; border-radius: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  padding: 17px 30px; border-radius: 999px; font-weight: 700; font-size: 0.98rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), background-color var(--skin-ease),
              color var(--skin-ease), border-color var(--skin-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--skin); color: var(--ink-950); }
.btn-solid:hover { background: var(--skin-bright); }
.btn-line { border-color: var(--line-firm); color: var(--text); }
.btn-line:hover { border-color: var(--skin); color: var(--skin); }
.btn-sm { padding: 11px 20px; font-size: 0.86rem; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: color-mix(in srgb, var(--ink-950) 78%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--ink-950) 94%, transparent); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }

.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--skin); box-shadow: 0 0 0 4px var(--skin-soft), 0 0 16px var(--skin-glow);
  transition: background-color var(--skin-ease), box-shadow var(--skin-ease);
}
.logo-text { font-family: var(--font-display); font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; }
.logo-text em { font-style: normal; color: var(--text-mute); font-weight: 500; }

.nav-toggle { display: inline-flex; background: none; border: 0; cursor: pointer; padding: 10px; color: var(--text); }
.burger, .burger::before, .burger::after {
  display: block; width: 22px; height: 2px; background: currentColor; position: relative;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; }
.burger::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { transform: translateY(-7px) rotate(-45deg); }

.primary-nav {
  position: fixed; inset: 62px 0 auto 0; z-index: 899;
  background: var(--ink-900); border-bottom: 1px solid var(--line);
  display: none; flex-direction: column; padding: 16px 24px 26px;
}
.primary-nav.is-open { display: flex; }
.primary-nav a { text-decoration: none; padding: 14px 0; font-weight: 600; border-bottom: 1px solid var(--line); }
.primary-nav a:last-child { border: 0; margin-top: 16px; align-self: flex-start; }

@media (min-width: 940px) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static; display: flex; flex-direction: row; align-items: center;
    gap: 32px; background: none; border: 0; padding: 0;
  }
  .primary-nav a { border: 0; padding: 4px 0; font-size: 0.93rem; color: var(--text-mute); transition: color 0.2s; }
  .primary-nav a:hover { color: var(--text); }
  .primary-nav a:last-child { margin: 0; color: var(--ink-950); }
}

/* ==========================================================
   DAS CHAMÄLEON AM AST
   Fortschrittsanzeige und Markenzeichen in einem.
   ========================================================== */
.climber {
  position: fixed; left: 26px; top: 14vh; bottom: 14vh; width: 74px;
  z-index: 800; pointer-events: none; display: none;
}
@media (min-width: 1180px) { .climber { display: block; } }

.branch {
  position: absolute; left: 12px; top: 0; bottom: 0; width: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.branch-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(var(--skin-deep), var(--skin));
  transition: background var(--skin-ease);
}
.cham {
  position: absolute; left: -14px; top: 0; color: var(--skin);
  transition: color var(--skin-ease);
  filter: drop-shadow(0 4px 18px var(--skin-glow));
  will-change: transform;
}
.cham-eyeball { transition: none; }
.cham-tail { transition: stroke-dasharray 0.4s var(--ease); }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-block: 110px 90px; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, var(--skin-soft) 0%, transparent 60%),
    var(--ink-950);
  transition: background var(--skin-ease);
}
.hero-mesh { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.hero-inner { position: relative; z-index: 2; }

.hero h1 { margin-bottom: 0.38em; }

/* Wortwechsler: zeigt im Titel, was die Seite alles sein kann */
.morph { display: inline-block; position: relative; color: var(--skin); transition: color var(--skin-ease); white-space: nowrap; }
.morph-word { display: inline-block; }
.morph-word.is-out { animation: morphOut 0.34s var(--ease) forwards; }
.morph-word.is-in { animation: morphIn 0.42s var(--ease) backwards; }
@keyframes morphOut { to { opacity: 0; transform: translateY(-0.35em) rotateX(50deg); } }
@keyframes morphIn { from { opacity: 0; transform: translateY(0.35em) rotateX(-50deg); } }

.lede { font-size: clamp(1.04rem, 2.1vw, 1.26rem); color: var(--text-mute); max-width: 52ch; margin-bottom: 2.2em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 3.4rem; }

/* Farbwahl */
.skinpicker { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 26px; border-top: 1px solid var(--line); }
.skinpicker-label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--text-mute); text-transform: uppercase; }
.swatches { display: flex; gap: 9px; }
.sw {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  background: hsl(var(--sw) 72% 58%);
  border: 2px solid transparent; outline-offset: 3px;
  transition: transform 0.22s var(--ease), border-color 0.22s;
}
.sw:hover { transform: scale(1.16); }
.sw.is-on { border-color: var(--text); transform: scale(1.1); }

.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; }
.scroll-cue span {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(var(--skin), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ==========================================================
   SEKTIONEN
   ========================================================== */
.section { position: relative; padding-block: clamp(84px, 13vw, 168px); }
.section + .section { border-top: 1px solid var(--line); }

/* ---------- Zwei Wege ---------- */
.path-grid { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .path-grid { grid-template-columns: 1fr 120px 1fr; } }

.path-card {
  background: var(--ink-800); border: 1px solid var(--line);
  border-radius: 6px; padding: 34px 30px;
  transition: border-color var(--skin-ease), transform 0.35s var(--ease);
}
.path-card:hover { border-color: var(--skin-line); transform: translateY(-4px); }
.path-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--skin);
  margin-bottom: 1.1em; transition: color var(--skin-ease);
}
.path-card p { color: var(--text-mute); margin: 0; font-size: 0.97rem; }
.path-card em { color: var(--text); font-style: italic; }

.path-merge { color: var(--skin-line); transition: color var(--skin-ease); display: none; }
@media (min-width: 900px) { .path-merge { display: block; } }
.path-merge svg { width: 100%; height: 260px; }
.path-merge path { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.path-merge.is-drawn path { transition: stroke-dashoffset 1.4s var(--ease); stroke-dashoffset: 0; }
.merge-node { opacity: 0; color: var(--skin); }
.path-merge.is-drawn .merge-node { opacity: 1; transition: opacity 0.5s 1.1s; }

.merge-line { text-align: center; margin-top: 3rem; font-size: clamp(1.02rem, 2vw, 1.24rem); color: var(--text-mute); }
.merge-line strong { color: var(--text); }

/* ---------- Ablauf ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.step {
  background: var(--ink-800); border: 1px solid var(--line); border-radius: 6px;
  padding: 30px 24px; transition: border-color var(--skin-ease), background-color 0.35s;
}
.step:hover { border-color: var(--skin-line); }
.step-n {
  display: block; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500;
  color: var(--skin); margin-bottom: 0.7em; line-height: 1;
  transition: color var(--skin-ease);
}
.step p { color: var(--text-mute); font-size: 0.94rem; margin: 0; }

/* ---------- Skyline ---------- */
.skyline-sec { overflow: hidden; }
.skyline { position: absolute; inset: auto 0 0 0; width: 100%; height: 58%; opacity: 0.9; pointer-events: none; }
.skyline-inner { position: relative; z-index: 2; }
.skyline-note { color: var(--text-mute); font-size: 0.92rem; max-width: 56ch; margin-top: 2.6em; }

/* Suchergebnisse */
.serp {
  max-width: 470px; background: var(--ink-800); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.serp-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--ink-700); border-bottom: 1px solid var(--line); }
.serp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-firm); }
.serp-query {
  margin-left: 10px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-mute);
  background: var(--ink-900); padding: 5px 12px; border-radius: 999px; flex: 1;
}
.serp-list { list-style: none; margin: 0; padding: 10px; display: grid; gap: 6px; }
.serp-item {
  display: flex; align-items: center; gap: 14px; padding: 13px 14px;
  border-radius: 6px; background: var(--ink-900);
  transition: background-color 0.5s, transform 0.6s var(--ease);
}
.serp-pos {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.86rem; color: var(--text-mute); min-width: 2.2ch;
}
.serp-name { color: var(--text-mute); font-size: 0.95rem; }
.serp-item.is-you { background: var(--skin-soft); border: 1px solid var(--skin-line); transition: background-color var(--skin-ease), border-color var(--skin-ease); }
.serp-item.is-you .serp-pos { color: var(--skin); font-weight: 700; transition: color var(--skin-ease); }
.serp-item.is-you .serp-name { color: var(--text); font-weight: 600; }

.serp-caption { padding: 4px 20px 20px; margin: 0; font-size: 0.88rem; min-height: 3.4em; }
.serp-before, .serp-after { display: block; color: var(--text-mute); transition: opacity 0.5s; }
.serp-after { color: var(--skin); opacity: 0; position: relative; margin-top: -1.4em; }
.serp.is-ranked .serp-before { opacity: 0; }
.serp.is-ranked .serp-after { opacity: 1; }

/* ---------- Haltung ---------- */
.creed { display: grid; gap: 16px; }
@media (min-width: 760px) { .creed { grid-template-columns: repeat(2, 1fr); } }
.creed-item { padding: 30px 26px; border-left: 2px solid var(--skin-line); background: var(--ink-800); border-radius: 0 6px 6px 0; transition: border-color var(--skin-ease); }
.creed-item p { color: var(--text-mute); margin: 0; font-size: 0.96rem; }

.pullquote { margin: 3.6rem 0 0; padding: 0; text-align: center; }
.pullquote p {
  font-family: var(--font-quote); font-style: italic;
  font-size: clamp(1.4rem, 3.6vw, 2.4rem); line-height: 1.25;
  color: var(--text); max-width: 22ch; margin-inline: auto;
}

/* ---------- Bausteine-Wolke ---------- */
.chip-cloud { list-style: none; margin: 0 0 2.6em; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-cloud li {
  padding: 11px 19px; border-radius: 999px; background: var(--ink-800);
  border: 1px solid var(--line); color: var(--text-mute); font-size: 0.92rem;
  transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.chip-cloud li:hover { color: var(--skin); border-color: var(--skin-line); transform: translateY(-3px); }

/* ---------- Angebot ---------- */
.offers { display: grid; gap: 16px; }
@media (min-width: 880px) { .offers { grid-template-columns: repeat(3, 1fr); } }
.offer {
  position: relative; background: var(--ink-800); border: 1px solid var(--line);
  border-radius: 8px; padding: 32px 28px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--skin-ease), transform 0.35s var(--ease);
}
.offer:hover { transform: translateY(-5px); }
.offer.is-featured { border-color: var(--skin-line); background: linear-gradient(var(--skin-soft), transparent), var(--ink-800); }
.offer-flag {
  position: absolute; top: -11px; left: 26px; background: var(--skin); color: var(--ink-950);
  font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 3px; transition: background-color var(--skin-ease);
}
.offer-for { font-size: 0.82rem; color: var(--text-mute); }
.offer h3 { margin: 0; font-size: 1.5rem; }
.offer-price { font-family: var(--font-mono); font-size: 1.5rem; margin: 0; color: var(--skin); transition: color var(--skin-ease); }
.offer-price span { font-family: var(--font-body); font-size: 0.62em; color: var(--text-mute); }
.offer ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; }
.offer li { position: relative; padding-left: 20px; color: var(--text-mute); font-size: 0.92rem; }
.offer li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 1px; background: var(--skin); transition: background-color var(--skin-ease); }

/* ---------- Journal ---------- */
.posts { display: grid; gap: 16px; }
@media (min-width: 860px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post {
  background: var(--ink-800); border: 1px solid var(--line); border-radius: 6px;
  padding: 30px 26px; transition: border-color var(--skin-ease), transform 0.35s var(--ease);
}
.post:hover { border-color: var(--skin-line); transform: translateY(-4px); }
.post-meta {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--skin);
  margin-bottom: 1.2em; transition: color var(--skin-ease);
}
.post p { color: var(--text-mute); font-size: 0.94rem; margin: 0; }
.journal-note { color: var(--text-mute); font-size: 0.88rem; margin-top: 2em; }

/* ---------- Kontakt ---------- */
.contact-card {
  padding: 34px 30px; border-radius: 8px; background: var(--ink-800);
  border: 1px solid var(--skin-line); transition: border-color var(--skin-ease);
}
.contact-card p { margin: 0 0 0.8em; }
.contact-card p:last-child { margin: 0; }
.contact-todo { color: var(--skin); font-size: 0.9rem; transition: color var(--skin-ease); }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--ink-900); border-top: 1px solid var(--line); padding-block: 52px; }
.footer-inner { display: grid; gap: 26px; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1fr auto; align-items: center; } }
.footer-inner p { color: var(--text-mute); font-size: 0.9rem; margin: 12px 0 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer nav a { color: var(--text-mute); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.site-footer nav a:hover { color: var(--skin); }

/* ==========================================================
   EINBLENDEN BEIM SCROLLEN
   Grundsatz aus eigener Erfahrung: im Zweifel sichtbar.
   Der versteckte Zustand gilt nur, wenn JavaScript wirklich
   läuft, und die Animation bewegt nur die Position — nie die
   Deckkraft. Eine eingefrorene Animation würde sonst Inhalt
   dauerhaft verschlucken.
   ========================================================== */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; }
.js .reveal.is-in { opacity: 1; animation: rise 0.7s var(--ease); }
@keyframes rise { from { transform: translateY(26px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; }
  .js .reveal.is-in { animation: none; }
  .scroll-cue span, .morph-word.is-in, .morph-word.is-out { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}