/* ============================================================
   FABRIKAT AI — Plattform-Komponenten  ·  V4 (helles Design-System)
   ------------------------------------------------------------
   Erbt Tokens + Basis aus styles.css (heller cremeweißer Canvas,
   committed Oliv, geschwärzter Stahl für Material-Blöcke).

   WICHTIG — diese Datei lädt NACH styles.css und definiert die
   Legacy-Marketing-Klassen (.hero-ai, .versus .col, .ways .way,
   .journey .stop, .ampel .lamp.gruen/.gelb/.rot, .wallet, ...), die
   von den Unterseiten (preise / so-funktionierts / idee-einreichen /
   demo) in IHRER Markup-Struktur genutzt werden — jetzt im hellen
   V4-Stil (dunkler Text auf Creme).

   Die .chat-Familie (+ .bubble/.typing) bleibt BEWUSST als dunkle
   Stahl-Karte: die LIVE-Seite chat.html erbt sie aus dieser Datei
   und setzt darauf hellen Text. Das ist on-brand (dunkler Stahl-Block
   auf Creme, wie die V4-Konsole) und darf nicht gedreht werden, sonst
   bricht der Kontrast im echten Chat.

   Alle Klassennamen sind 1:1 erhalten.
   ============================================================ */

.logo small.ai { color: var(--ink-faint); }

.eyebrow {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--olive); margin-bottom: 18px;
}

/* ---------- Hero (Legacy-Variante .hero-ai der Unterseiten) ---------- */
.hero-ai { padding: clamp(56px, 9vh, 120px) 0 clamp(36px, 5vh, 70px); }
.hero-ai h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3rem, 9.5vw, 7.6rem); line-height: .9; letter-spacing: -0.005em; color: var(--ink);
}
.hero-ai h1 .alt { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hero-ai h1 .dot { color: var(--olive); }
.hero-ai .sub { margin-top: 26px; max-width: 640px; font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--ink-soft); }
.hero-ai .sub strong { color: var(--ink); font-weight: 600; }

/* ---------- redet vs baut (Legacy .versus .col) ---------- */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
.versus .col { background: var(--canvas-raised); padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 34px); }
.versus .col.them { background: var(--canvas-raised); }
.versus .col.us { background: var(--canvas-deep); }
.versus .col h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: .005em; margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.versus .col.them h3 { color: var(--ink-soft); }
.versus .col.us h3 { color: var(--ink); }
.versus .col ul li {
  padding: 12px 0 12px 28px; position: relative; color: var(--ink-soft); font-size: .98rem;
  line-height: 1.45; border-top: 1px solid var(--line-soft);
}
.versus .col ul li:first-child { border-top: none; }
.versus .col.them li::before {
  content: "—"; position: absolute; left: 0; top: 12px; color: var(--ink-faint);
  font-family: var(--font-mono);
}
.versus .col.us li { color: var(--ink); }
.versus .col.us li::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 11px; height: 11px;
  background: var(--olive); clip-path: polygon(0 0,100% 0,100% 64%,64% 100%,0 100%);
}
.versus .vs {
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  background: var(--canvas-sunk); padding: 0 clamp(14px, 2vw, 26px);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 820px){
  .versus { grid-template-columns: 1fr; }
  .versus .vs { padding: 14px 0; border-block: 1px solid var(--line); }
}

/* ---------- zwei Wege (Legacy .ways .way) ---------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.way {
  border: 1px solid var(--line); background: var(--canvas-raised); border-radius: 12px;
  padding: clamp(28px, 3vw, 36px) clamp(26px, 2.8vw, 34px); position: relative;
  display: flex; flex-direction: column;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.way::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: var(--olive); border-radius: 12px 12px 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .way:hover { transform: translateY(-5px); border-color: var(--olive-line);
    box-shadow: 0 22px 34px -26px oklch(0.40 0.05 128 / 0.55); }
  .way:hover::before { transform: scaleX(1); }
}
.way.primary { border-color: var(--olive-line); }
.way.primary::before { transform: scaleX(1); }
.way .wtag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
  background: var(--canvas);
}
.way.primary .wtag { color: var(--olive); border-color: var(--olive-line); background: var(--olive-wash); }
.way h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.7rem, 2.4vw, 1.95rem); margin: 16px 0 6px; line-height: 1; color: var(--ink);
}
.way .wsub { color: var(--ink-soft); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .03em; margin-bottom: 16px; text-transform: uppercase; }
.way p { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; flex: 1; }
.way p b { color: var(--ink); }
.way .wfoot {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; color: var(--ink-faint);
}
.way .wfoot b { color: var(--ink); }
.way .wfoot a { color: var(--olive); font-weight: 600; }
.way .wfoot a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px){ .ways { grid-template-columns: 1fr; } }
/* Drei-Wege-Variante (Landing): 3 -> 2 -> 1 Spalte, responsiv */
.ways.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .ways.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px){ .ways.cols-3 { grid-template-columns: 1fr; } }

/* ---------- Ablauf (Legacy .journey .stop — vertikale Spur) ---------- */
.journey { border-left: 2px solid var(--line); margin-left: 8px; }
.journey .stop { position: relative; padding: 0 0 38px 38px; }
.journey .stop:last-child { padding-bottom: 0; }
.journey .stop::before {
  content: ""; position: absolute; left: -9px; top: 2px; width: 16px; height: 16px;
  background: var(--olive); clip-path: polygon(0 0,100% 0,100% 65%,65% 100%,0 100%);
}
.journey .stop .sn { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; color: var(--olive); }
.journey .stop h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; margin: 6px 0 8px; color: var(--ink); }
.journey .stop p { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 680px; }
.journey .stop p + p { margin-top: 8px; }
.journey .stop p b { color: var(--ink); }
.journey .stop .free {
  display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--olive);
  border: 1px solid var(--olive-line); border-radius: 999px; padding: 4px 11px; background: var(--olive-wash);
}

/* ---------- Ampel (Legacy .ampel .lamp.gruen/.gelb/.rot) ---------- */
.ampel { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lamp { background: var(--canvas-raised); padding: clamp(24px, 2.8vw, 32px) clamp(22px, 2.4vw, 28px); }
.lamp .dot { width: 14px; height: 14px; border-radius: 50%; margin-bottom: 16px; }
.lamp.gruen .dot { background: var(--go);   box-shadow: 0 0 0 4px oklch(0.520 0.110 140 / 0.16); }
.lamp.gelb  .dot { background: var(--test); box-shadow: 0 0 0 4px oklch(0.640 0.130 78 / 0.16); }
.lamp.rot   .dot { background: var(--stop); box-shadow: 0 0 0 4px oklch(0.545 0.150 35 / 0.16); }
.lamp h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; margin-bottom: 8px; color: var(--ink); }
.lamp p { color: var(--ink-soft); font-size: .96rem; line-height: 1.56; }
.lamp p b { color: var(--ink); }
@media (max-width: 720px){ .ampel { grid-template-columns: 1fr; } }

/* ============================================================
   Chat-Demo (.chat / .bubble / .typing)  —  BEWUSST DUNKEL.
   Live-Seite chat.html erbt diese Klassen aus dieser Datei und
   setzt hellen Text darauf. Dunkler Stahl-Block auf Creme = V4-
   Material (wie .console / .cta-final). NICHT auf hell drehen.
   ============================================================ */
.chat { border: 1px solid var(--line-strong); background: var(--steel-950); max-width: 720px; margin: 0 auto;
  border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -28px oklch(0.30 0.02 150 / 0.6); }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid oklch(0.42 0.013 150 / 0.6); background: var(--steel-900); }
.chat-top .mk { width: 16px; height: 16px; background: var(--olive-bright); clip-path: polygon(0 0,100% 0,100% 65%,65% 100%,0 100%); }
.chat-top .ttl { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; color: var(--on-steel); }
.chat-top .ind { margin-left: auto; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-steel-soft); }
.chat-top .ind b { color: var(--olive-bright); }
.chat-body { padding: 22px 18px; min-height: 360px; display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 82%; padding: 13px 16px; font-size: .96rem; line-height: 1.5; border: 1px solid oklch(0.42 0.013 150 / 0.6); border-radius: 10px; animation: pop .35s ease both; color: var(--on-steel); }
.bubble.ai { align-self: flex-start; background: var(--steel-850); border-left: 2px solid var(--olive-bright); }
.bubble.user { align-self: flex-end; background: oklch(0.355 0.013 150); color: var(--on-steel); }
.bubble .who { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-steel-soft); margin-bottom: 5px; }
.bubble.ai .who { color: var(--olive-bright); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-input { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid oklch(0.42 0.013 150 / 0.6); background: var(--steel-900); }
.chat-input .fake { flex: 1; border: 1px solid oklch(0.42 0.013 150 / 0.6); background: var(--steel-950); border-radius: 8px; padding: 11px 14px; color: var(--on-steel-soft); font-family: var(--font-body); font-size: .92rem; }
.chat-input button { border: 1.5px solid var(--olive-bright); background: var(--olive-bright); color: var(--steel-950); border-radius: 8px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; padding: 0 20px; cursor: pointer; font-weight: 600; }
.chat-input button:hover { background: oklch(0.665 0.110 126); border-color: oklch(0.665 0.110 126); }
.chat-input button:disabled { opacity: .45; cursor: default; }
.chat-restart { text-align: center; margin-top: 18px; }
.chat-restart button { background: none; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 8px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: 10px 18px; cursor: pointer; transition: border-color .18s var(--ease-out), color .18s var(--ease-out); }
.chat-restart button:hover { border-color: var(--olive); color: var(--olive); }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing span { width: 6px; height: 6px; background: var(--on-steel-soft); border-radius: 50%; animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay: .2s; } .typing span:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,60%,100%{ opacity:.25; } 30%{ opacity:1; } }

/* ---------- Wallet (Legacy, Preise) — hell ---------- */
.wallet { border: 1px solid var(--line); background: var(--canvas-raised); border-radius: 12px; padding: 26px; max-width: 460px; }
.wallet h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; margin-bottom: 12px; color: var(--ink); }
.wallet .wrow { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: .82rem; }
.wallet .wrow:last-child { border-bottom: none; }
.wallet .wrow .lbl { color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.wallet .wrow .val { color: var(--ink); }
.wallet .wrow .val.sig { color: var(--olive); font-weight: 600; }
.wallet .bar { height: 8px; background: var(--canvas-deep); border: 1px solid var(--line); border-radius: 999px; margin: 16px 0 6px; overflow: hidden; }
.wallet .bar i { display: block; height: 100%; width: 64%; background: var(--olive); }
.wallet .barlbl { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Hervorhebungs-Box (.note-strong — Legacy) — hell ---------- */
.note-strong { border: 1px solid var(--olive-line); border-left: 3px solid var(--olive); background: var(--olive-wash); border-radius: 10px; padding: 18px 22px; margin-top: 30px; font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.note-strong b { color: var(--ink); }

/* ---------- Waitlist-Hinweis Badge ---------- */
.soon-banner { background: var(--olive-wash); border: 1px solid var(--olive-line); border-radius: 8px; padding: 10px 16px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--olive); text-align: center; }

/* ===== Bereichs-Umschalter (B2B / Solo) ===== */
.audience-bar { background: var(--canvas-sunk); border-bottom: 1px solid var(--line); }
.audience-bar .wrap { display: flex; gap: 2px; }
.audience-bar .aud { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .03em; padding: 8px 16px; color: var(--ink-faint); text-decoration: none; border-bottom: 2px solid transparent; }
.audience-bar .aud:hover { color: var(--ink); }
.audience-bar .aud.active { color: var(--olive); font-weight: 600; border-bottom-color: var(--olive); background: var(--canvas); }