/* ============================================================
   intuiview · tokens.css
   Einzige Quelle der Wahrheit für alle Designwerte.
   Ebene 1 = Primitive (rohe Werte, nie direkt im Component-Code
   verwenden). Ebene 2 = Semantik (immer diese verwenden).
   ============================================================ */

:root {

  /* ---------- 1. PRIMITIVE · FARBE ---------- */

  /* Neutral, warm getönt */
  --n-000:#FFFFFF;
  --n-025:#FAF8F5;
  --n-035:#F7F6F2;
  --n-050:#F2EFEA;
  --n-100:#EFEBE4;
  --n-200:#E6E1D9;
  --n-300:#CFC8BD;
  --n-400:#A8AFAC;
  --n-500:#8A9491;
  /* #636E6C statt #6B7674 (7. Oktober 2026): 4,98:1 auf --bg-app, 4,60
     auf --bg-sunken, 4,74 auf --bg-selected. Vorher 4,43 / 4,10 / 4,21. */
  --n-600:#636E6C;
  --n-700:#4A5654;
  --n-800:#2A3634;
  --n-900:#16211F;

  /* Petrol */
  --p-050:#EDF4F3;
  --p-100:#D6E6E6;
  --p-150:#CCDBD7;  /* mit einem Hauch Salbei: Fläche hinter Illustrationen (Lewins Entwurf der Anmeldung) */
  --p-200:#B0CDCF;
  --p-300:#7FB0B4;
  /* Nur auf dunklem Grund (--bg-inverse): dort traegt es den Akzent, den
     auf hellem Grund --p-700 traegt. 8,4:1 auf --p-900. */
  --p-250:#7FD0CA;
  --p-500:#1E6B75;
  --p-700:#14484F;
  --p-900:#0C2B2F;

  /* Ocker — ausschliesslich Diagramme */
  --o-050:#F9F3E7;
  --o-100:#F1E3C6;
  --o-300:#E3C68C;
  --o-500:#C08B3A;
  --o-700:#8F6624;

  /* Rot — ausschliesslich destruktiv */
  --e-050:#F7EAE3;
  --e-500:#B5502C;
  --e-700:#8E3D20;

  /* ---------- 2. SEMANTIK · FLÄCHE ---------- */
  --bg-app:var(--n-025);          /* Grundfläche aller Seiten */
  --bg-surface:var(--n-000);      /* Karten, Panels, Bubbles */
  --bg-sunken:var(--n-050);       /* Leerbalken, Eingabefeld-Innenflächen */
  --bg-hover:var(--n-025);        /* Hover auf Zeilen in weissen Panels */
  --bg-selected:var(--p-050);     /* ausgewählte Zeile, aktiver Filter */
  --bg-art:var(--p-150);          /* Fläche, auf der eine Illustration steht — Anmeldung */
  --bg-overlay:rgba(22,33,31,.32);/* Modal-Hintergrund */
  --bg-inverse:var(--p-900);      /* Tooltip, Toast, dunkle Rahmen der Landingpage */
  /* Grund der Landingpage. Eine Spur kuehler als --bg-app, damit weisse
     Karten und die Glasleiste darauf stehen. Nur intuiview.com. */
  --bg-site:var(--n-035);
  /* Hervorhebung auf --bg-site: gewaehlte Antwort, eigene Bubble, aktiver
     Anker. --bg-selected allein waere auf diesem Grund kaum zu sehen. */
  --bg-highlight:color-mix(in srgb,var(--p-050),var(--p-100));
  /* Das Telefon im Hero. Rahmen und Kamerainsel, nirgends sonst. */
  --bg-device:linear-gradient(145deg,var(--n-800),var(--n-900));
  --bg-device-island:var(--n-900);

  /* ---------- 3. SEMANTIK · LINIE ---------- */
  --border-soft:var(--n-100);     /* Trenner innerhalb von Panels */
  --border:var(--n-200);          /* Standardrahmen, Inputs */
  --border-strong:var(--n-300);   /* Hover auf Inputs */
  --border-input:var(--n-300);    /* Rahmen von Eingabefeldern: 1,66:1 statt 1,30:1 */
  --border-active:var(--p-200);   /* aktiv, ausgewählt */

  /* ---------- 4. SEMANTIK · SCHRIFT ---------- */
  --text:var(--n-900);            /* Titel, wichtige Werte */
  --text-body:var(--n-700);       /* Fliesstext */
  /* Meta-Text steht bei 12px und ist damit kein grosser Text, AA
     verlangt also die vollen 4,5:1 — auf jeder Fläche, auf der er steht.
     --n-600 schafft das seit dem 7. Oktober 2026 auf allen vier. */
  --text-muted:var(--n-600);      /* Meta, Labels, Zeitstempel */
  --text-faint:var(--n-400);      /* Platzhalter, deaktiviert — nie für Bedienbares */
  --text-accent:var(--p-700);     /* Zahl im Akzentkontext, Links */
  --text-on-accent:var(--n-000);
  --text-danger:var(--e-500);

  /* ---------- 5. SEMANTIK · AKTION ---------- */
  --action:var(--p-700);
  --action-hover:var(--p-900);
  --action-soft:var(--p-050);
  --action-soft-border:var(--p-100);
  --action-quiet:var(--p-300);    /* dekorative Icons */
  /* Nur für Tastaturfokus auf Knöpfen und Links (:focus-visible).
     Textfelder zeigen Fokus über --border-focus, nie über einen Ring. */
  --focus-ring:var(--p-300);
  --border-focus:var(--n-500);    /* Textfeld mit Cursor: Rahmen wird dunkler (3,1:1), nicht blau */
  /* Icons, die man anklicken kann (Stift, Schliessen, Stern aus, „…"):
     WCAG 1.4.11 verlangt 3:1, --text-faint hat nur 2,24:1. */
  --icon-action:var(--text-muted);
  --danger:var(--e-500);
  --danger-bg:var(--e-050);
  --danger-hover:var(--e-700);

  /* ---------- 5b. SEMANTIK · AUF DUNKLEM GRUND ----------
     Was auf --bg-inverse steht. Die dunklen Rahmen der Landingpage
     tauschen damit ihre Rollen aus, statt eigene Farben zu haben.  */
  --bg-inverse-raised:color-mix(in srgb,var(--p-900) 86%,var(--n-000));   /* Karte auf dunkel */
  --bg-inverse-selected:color-mix(in srgb,var(--p-900) 68%,var(--p-250)); /* hervorgehoben auf dunkel */
  --text-on-inverse:var(--p-050);
  --text-muted-on-inverse:var(--p-300);  /* 6,3:1 auf --p-900 */
  --border-on-inverse:rgba(255,255,255,.16);
  --action-on-inverse:var(--p-250);
  --text-on-action-inverse:var(--p-900);

  /* ---------- 5c. BILDMARKE ----------
     Zwei Sprechblasen, die lachen (19. Oktober 2026). Die Farben gehören
     zur Marke, nicht zu einer Rolle: überall dieselben, auch auf
     dunklem Grund. logo/mark.svg liest sie von hier.             */
  --logo-back:var(--p-200);        /* die helle Blase hinten */
  --logo-back-face:var(--p-900);   /* ihr Gesicht */
  --logo-front:var(--p-500);       /* die dunkle Blase vorn */
  --logo-front-face:var(--n-000);  /* ihr Gesicht */
  --logo-confetti:var(--p-300);    /* die vierte Konfettifarbe der bewegten Marke */
  /* Die bewegte Marke (E35) beginnt ihren Auftritt leer. So lange
     wartet sie aufs Skript, dann steht sie still da (components.css). */
  --logo-frist:1200ms;
  /* ---------- 6. SEMANTIK · DIAGRAMM ----------
     Reihenfolge ist verbindlich: c-1 zuerst, dann c-2, dann c-3.
     Nie mehr als drei Werte gleichzeitig einfärben.            */
  --chart-1:var(--p-500);         /* Primärwert */
  --chart-2:var(--p-300);         /* Sekundärwert, nachrangig */
  --chart-3:var(--o-500);         /* Gegenwert, Hervorhebung, kritisch */
  --chart-4:var(--o-300);         /* Gegenwert hell */
  --chart-5:var(--n-300);         /* Rest, "nicht genannt", neutral */
  --chart-track:var(--n-050);     /* leerer Balkenhintergrund */
  --chart-grid:var(--n-100);      /* Achsen, Grundlinie */
  /* Matrix-Heat: immer diese Basis mit variabler Deckkraft */
  --chart-heat-rgb:30,107,117;

  /* Stimmung */
  --sent-pos:var(--p-500);
  --sent-neu:var(--n-300);
  --sent-neg:var(--o-500);

  /* ---------- 7. TYPOGRAFIE ---------- */
  --font:"Instrument Sans","Instrument Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Ueberschriften ab --fs-title und die Wortmarke. Alles andere bleibt
     --font. Faellt Bricolage aus, steht dort Instrument Sans. */
  --font-display:"Bricolage Grotesque","Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;

  --fs-hero:clamp(2.5rem,9vw,5.25rem);     /* 40–84, nur Landingpage */
  --fs-hero-sm:clamp(2.5rem,11.6vw,3.2rem); /* 40–51, dieselbe Zeile unter 720px */
  --fs-section:clamp(1.9rem,5.5vw,3.25rem); /* 30–52, nur Landingpage */
  --fs-display:1.875rem;  /* 30 */
  --fs-lead:1.125rem;     /* 18 — Vorspann unter einer Hero-Zeile */
  --fs-title:1.1875rem;   /* 19 */
  --fs-chat:1.03125rem;   /* 16.5 — nur Teilnehmerseite */
  --fs-body:0.9375rem;    /* 15 */
  --fs-ui:0.84375rem;     /* 13.5 — Buttons, Zeilen, Filter */
  --fs-meta:0.75rem;      /* 12 */
  --fs-micro:0.6875rem;   /* 11 — Labels in Versalien */
  --fs-num-lg:1.375rem;   /* 22 */
  --fs-code:1.75rem;      /* 28 — nur die vier Ziffern der Anmeldung */
  /* Nur Landingpage: eigener, groesserer Rhythmus. */
  --fs-site:1.0625rem;                        /* 17 — Fliesstext */
  --fs-site-sm:0.875rem;                      /* 14 — Kleingedrucktes, Etiketten */
  --fs-site-lg:1.25rem;                       /* 20 — Zwischenueberschrift */
  --fs-site-xl:1.5rem;                        /* 24 — Namen, Bestaetigung */
  --fs-site-lead:clamp(1.05rem,2.4vw,1.25rem);/* 17–20 — Vorspann */
  --fs-site-quote:clamp(1.4rem,3.6vw,2rem);   /* 22–32 — Satz, um den es geht */
  --fs-site-num:2.25rem;                      /* 36 — Schrittnummer */

  --lh-hero:1.05;         /* nur --fs-hero, sonst reisst der Zeilenfall auf */
  --lh-snug:1.4;          /* Bubbles auf der Landingpage */
  --lh-tight:1.15;
  --lh-heading:1.3;
  --lh-body:1.55;
  --lh-chat:1.6;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  --ls-display:-0.025em;
  --ls-title:-0.015em;
  --ls-normal:0;
  --ls-label:0.12em;

  /* ---------- 8. ABSTAND ----------
     4er-Raster. Keine Zwischenwerte erfinden.                  */
  --sp-0:0;
  --sp-1:2px;
  --sp-2:4px;
  --sp-3:6px;
  --sp-4:8px;
  --sp-5:12px;
  --sp-6:16px;
  --sp-7:20px;
  --sp-8:24px;
  --sp-9:32px;
  --sp-10:40px;
  --sp-11:56px;
  --sp-12:80px;
  /* Nur die Landingpage. Das Cockpit endet bei --sp-12. */
  --sp-13:120px;
  --sp-14:160px;

  /* ---------- 9. RADIEN ---------- */
  --r-xs:6px;    /* Checkbox, Matrixzelle, Legendenpunkt */
  --r-sm:10px;   /* Listenzeile, Kernaussage, Icon-Kachel */
  --r-md:16px;   /* Karte, Panel, Modal */
  --r-lg:22px;   /* Chat-Bubble, Telefonrahmen innen */
  --r-xl:26px;   /* Overlay, Rohverlauf-Sheet */
  --r-full:999px;/* Button, Chip, Input-Pille, Avatar */

  /* ---------- 10. TIEFE ----------
     Schatten nur für echte Schwebeelemente.                    */
  --sh-0:none;
  --sh-1:0 1px 2px rgba(20,40,40,.04);
  --sh-2:0 2px 4px rgba(20,40,40,.03), 0 10px 30px rgba(20,40,40,.05);
  --sh-3:0 8px 16px rgba(20,40,40,.06), 0 24px 60px rgba(20,40,40,.10);
  /* Nur Landingpage. Dort schwebt mehr: die Leiste, das Telefon, das Foto. */
  --sh-glass:0 14px 34px -14px rgba(15,36,39,.35),0 2px 6px rgba(15,36,39,.06),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-glass-compact:0 10px 26px -14px rgba(15,36,39,.4),0 1px 3px rgba(15,36,39,.06),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-device:0 50px 70px -35px rgba(15,36,39,.55),0 14px 28px -12px rgba(15,36,39,.35),inset 0 0 0 1.5px rgba(255,255,255,.12);
  --sh-photo:0 36px 50px -34px rgba(15,36,39,.4);
  --sh-photo-lift:0 50px 60px -34px rgba(15,36,39,.5);
  --sh-action-lift:0 14px 26px -12px rgba(20,72,75,.6);
  --sh-inverse-lift:0 24px 40px -26px rgba(0,0,0,.6);
  /* Die Glasleiste: halb durchsichtig, mit Unschaerfe dahinter. */
  --bg-glass:rgba(255,255,255,.72);
  --bg-glass-solid:rgba(255,255,255,.96);  /* ohne backdrop-filter */
  --border-glass:rgba(255,255,255,.75);

  /* ---------- 11. GRÖSSEN ---------- */
  --h-control-sm:30px;   /* Chip, Tag-Button */
  --h-control:36px;      /* Standardbutton, Input */
  --h-control-lg:44px;   /* Primäraktion, Analyseleiste */
  --h-control-xl:52px;   /* CTA Teilnehmerseite */
  --h-send:38px;         /* runder Senden- und Mikrofonknopf, eine Zeile im Chatfeld */
  --h-row:44px;          /* Gesprächszeile */
  --h-code:64px;         /* Kachel einer Ziffer bei der Anmeldung */
  --h-row-compact:32px;  /* Filterzeile */

  --icon-xs:13px;  /* Meta-Zeilen */
  --icon-sm:16px;  /* Buttons, Listenzeilen */
  --icon-md:21px;  /* Kacheln, Panel-Kopf gross */
  --icon-lg:24px;  /* Intro, leere Zustände */
  --icon-stroke:1.75;
  /* Senden-Pfeil auf dem runden Knopf: mit 1,75 auf dunklem Grund zu dünn (E32). */
  --icon-stroke-bold:2.25;

  --avatar:31px;
  --tap-min:44px;        /* Mindest-Tapfläche mobil */

  /* ---------- 12. LAYOUT ---------- */
  --col-filter:248px;    /* linke Spalte Cockpit */
  --col-detail:420px;    /* rechte Spalte: Detail, Belege, Verlauf */
  --w-col-main:520px;    /* Mindestbreite der Mittelspalte, bevor das Detail überlagert */
  --w-tag:36ch;          /* längster Filter-Chip, danach Auslassung */
  --w-input-num:6.5rem;  /* Zahlenfeld in einer Zeile, z. B. Anzahl der Themen */
  /* 480, nicht 390 (27. Oktober 2026): ein iPhone Pro Max ist 430 bis
     440 breit, und die Schale soll auf jedem Handy bis an den Rand gehen.
     Erst auf dem Tablet und am Rechner wird sie zur Spalte. */
  --w-chat:480px;        /* max. Breite Teilnehmerspalte */
  --w-bubble:86%;        /* max. Breite einer Bubble */
  --w-prose:64ch;        /* max. Breite Fliesstext */
  /* 1200 und nicht 1080: im Hero stehen zwei Knoepfe nebeneinander und
     rechts daneben die Grafik. Bei 1080 bricht die Knopfreihe um. */
  --w-site:1120px;       /* max. Breite des Inhalts auf der Landingpage */
  --w-site-bar:1160px;   /* Kopfleiste der Landingpage, ausgefahren */
  --w-site-bar-compact:700px; /* … beim Runterscrollen */
  --h-site-bar:64px;
  --h-site-bar-sm:56px;  /* unter 720px */
  --h-site-foot:360px;   /* Fuss der Landingpage: mindestens, oder ein Drittel des Bildschirms */
  --w-site-faq:760px;    /* „Kurz gefragt“ */
  --w-site-team:760px;   /* „Das ganze Team“, beide Polaroids zusammen */
  /* Telefon im Hero: fliessend, damit es auf dem Handy nicht die
     Ueberschrift verdraengt. Der Hof dahinter waechst mit. */
  --w-phone:clamp(244px,70vw,292px);
  --w-phone-sm:min(236px,64vw);
  --w-phone-min-sm:160px; /* kleiner wird es nicht, auch auf kurzen Bildschirmen */
  --w-phone-halo:460px;
  --w-phone-ring:520px;
  --r-device:46px;       /* Telefonrahmen aussen */
  --r-screen:38px;       /* Telefonrahmen innen */
  --r-frame:clamp(24px,4vw,40px); /* dunkler Rahmen um ein Band */
  /* Die App-Schale: Kopf steht, Inhalt scrollt. dvh, weil vh auf dem
     Handy die Adressleiste mitzaehlt. Auf der Teilnehmerseite setzt
     Viewport.tsx --vv-h auf die sichtbare Hoehe ueber der Tastatur. */
  --h-app:100dvh;
  --h-shell:var(--vv-h,var(--h-app));
  --h-input-max:9.5rem;  /* Eingabefeld im Chat wächst bis hierhin, dann scrollt es */
  --w-app:1440px;
  --w-login:360px;       /* Anmeldung: eine schmale Spalte, kein Cockpit-Chrome */
  --w-subnav:200px;      /* Einstellungen: die Navigation der Bereiche links */
  --w-form:680px;        /* Einstellungen und Bericht: breiter wird der Inhalt nicht */
  --w-sum-key:140px;     /* Zusammenfassungsliste: Spalte mit dem Namen des Werts */
  --w-bar-inline:64px;   /* Balken in einer Rangzeile, gemeinsame Skala */
  --w-num-col:2.25rem;   /* Zahlenspalte rechts in einer Rangzeile */
  --w-menu:240px;        /* Menü unter dem Konto */
  --w-menu-wide:360px;   /* Auswahlmenü mit ganzen Sätzen, z. B. Leitfragen */
  --h-answer-max:50vh;   /* Analyse-Antwort über der Leiste, danach scrollt sie */
  --h-appbar:48px;       /* die Leiste ganz oben: Marke, Bereiche, Konto */

  --bp-sm:640px;
  --bp-md:800px;         /* ab hier zwei Spalten im Cockpit */
  --bp-lg:1180px;        /* ab hier Detailspalte permanent */

  /* ---------- 13. BEWEGUNG ---------- */
  --dur-fast:140ms;
  --dur:180ms;
  --dur-slow:260ms;
  --ease:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  /* Nur Landingpage. Dort darf es laenger dauern als in Regel 10: was
     hereinkommt, laeuft weich aus, statt kurz zu schalten. */
  --ease-glide:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.3,1.6,.5,1); /* federt nach, nur die Marke beim Ueberfahren */
  --dur-glide:450ms;
  --dur-reveal:800ms;
  --dur-enter:1100ms;
  /* Der Hinweis vor dem Gespräch (E36–E38, components.css .hinweis):
     das Bild geht von oben auf, der Text darunter kommt Zeile für Zeile.
     --szene-* und --ease-pop/--dur-pop gehören zur Tipp-Szene (E37), die
     seit E38 abgeschaltet ist: dann fragt oben die KI, im Feld tippt
     jemand eine Antwort, löscht den Namen darin und schickt ab. */
  --ease-auf:cubic-bezier(.16,1,.3,1); /* schnell auf, dann lange langsam bis ganz */
  --ease-pop:cubic-bezier(.34,1.5,.64,1); /* springt auf, federt kurz nach */
  --dur-pop:420ms;
  --hinweis-auf:900ms;     /* das Bild geht von oben auf */
  --hinweis-text:350ms;    /* dann „Kurz vorweg“ */
  --hinweis-folge:180ms;   /* Abstand zwischen den Zeilen darunter */
  --szene-anfang:1300ms;   /* erst wenn der Text steht: die ersten Punkte */
  --szene-tippen:800ms;    /* so lange stehen die Punkte */
  --szene-pause:450ms;     /* still vor dem Tippen und vor dem Abschicken */
  --szene-taste:55ms;      /* ein Zeichen im Feld, Löschen geht doppelt so schnell */
  --szene-zoegern:650ms;   /* innehalten nach dem Namen */
  --szene-blinken:1s;      /* der Strich im Feld, wie beim Tippen */

  /* ---------- 14. Z-EBENEN ---------- */
  --z-base:0;
  --z-sticky:10;
  --z-analysebar:20;
  --z-overlay:30;
  --z-modal:40;
  --z-toast:50;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; --dur-glide:0ms; --dur-reveal:0ms; --dur-enter:0ms;
    --dur-pop:0ms; --hinweis-auf:0ms; --hinweis-text:0ms; --hinweis-folge:0ms;
    --szene-anfang:0ms; --szene-tippen:0ms; --szene-pause:0ms;
    --szene-taste:0ms; --szene-zoegern:0ms; }
}