/* =====================================================
   AI Revenue System — Design Tokens
   Quelle: leaderlogic.de styles.css (1:1 übernommen).
   HIER drehen für systemweite Änderungen an Farbe/Typo.
   ===================================================== */

@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/TT-Norms-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/TT-Norms-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/TT-Norms-Bold.woff2') format('woff2');
}

/* TT Norms hat eine "st"-/"ct"-Ligatur, die als Bruecke zwischen den Buchstaben
   erscheint (z.B. "Mustermann", "Ausstehend"). Global ALLE Ligaturen abschalten —
   1:1 der Fix von leaderlogic.de (styles.css). !important + universell, weil die
   `font:`-Kurzschreibweise font-variant-ligatures sonst zuruecksetzt. */
*, *::before, *::after {
  font-variant-ligatures: none !important;
}

:root {
  /* ---- Primitive (aus leaderlogic.de) ---- */
  --c-ink:          #ffffff;
  --c-ink-soft:     rgba(255,255,255,0.62);
  --c-ink-faint:    rgba(255,255,255,0.30);
  --c-line:         rgba(255,255,255,0.14);
  --c-accent:       #d8fd5b;
  --c-accent-hi:    #c8f08a;
  --c-accent-ink:   #0c1206;
  --c-accent-rgb:   216, 253, 91;
  --c-surface:      #161618;
  --c-surface-2:    #101012;
  --c-surface-line: rgba(255,255,255,0.08);
  --c-black:        #060611;

  --font-tt: "TT Norms", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ---- Semantische Portal-Tokens (Jans Stellschrauben) ---- */
  --portal-accent:       var(--c-accent);
  --portal-accent-hover: var(--c-accent-hi);
  --portal-accent-ink:   var(--c-accent-ink);
  --portal-bg:           #000000;   /* komplett schwarz wie leaderlogic.de */
  --portal-box-dot:      #34343a;   /* opake Kreis-Füllung, passend zu den helleren Karten */
  /* Kreis der Kapitel-Überschriften (1, 2, …): dunkel #eee mit dunkler Zahl */
  --portal-kreis:        #eeeeee;
  --portal-kreis-zahl:   #111111;
  --portal-kreis-inaktiv: #888888;   /* Kapitel nicht angewählt (beide Modi) */
  /* Timeline + Kreisränder: EINE deckende Farbe (kein rgba → kein Verlauf) */
  --portal-timeline:     #555555;
  /* Zugeklappter Kapitel-Kreis: 20 % dunkler als die Timeline (Jan, 2026-10-11) */
  --portal-kreis-zu:      #333333;   /* zugeklappt: unauffällig auf der #222-Karte */
  --portal-titel-zu:      #c4c4c4;   /* zugeklappt, aber anklickbar: Titel intensiver */
  /* Erledigte + nicht anklickbare Unterpunkte: gemeinsam blass (Jan, 2026-10-11) */
  --portal-text-blass:    rgba(255, 255, 255, 0.24);
  /* Fläche hinter den Typ-Icons im Menü (Kachel): dunkel nur MINIMAL heller als
     der Untergrund (Karte #333 bzw. angewählte Zeile) → leichter Aufheller */
  --portal-icon-flaeche:  rgba(255, 255, 255, 0.025);
  --portal-icon-farbe:    #777777;   /* Typ-Icons gedämpft, unabhängig vom Punkt-Status */
  /* Kachel in der ANGEWÄHLTEN Zeile: sichtbar heller als der Zeilen-Hintergrund */
  --portal-icon-flaeche-aktiv: rgba(255, 255, 255, 0.07);
  --portal-check-kreis: #444;
  --portal-tip-flaeche: #3c3c3c;   /* Schloss-Tooltip */
  --portal-tip-text: #cfcfcf;   /* Erledigt-Kreis in der Menü-Pille, deckend (überlagert die Pille) */
  --portal-kreis-zahl-zu: #8a8a8a;

  /* ---- Theme-Tokens (dunkel = heutige Werte 1:1; hell siehe @media unten) ---- */
  /* Akzent als TEXT / LINIE / ICON auf Nicht-Akzent-Fläche (hell: dunkleres Grün) */
  --portal-accent-text:     var(--c-accent);
  --portal-accent-text-rgb: 216, 253, 91;
  /* Schrift auf Akzent-Flächen (Haken, Pillen) — in beiden Modi dunkel */
  --portal-on-accent:       #000;

  /* Karten-/Panel-Flächen */
  --portal-card-gradient:       radial-gradient(ellipse 110% 75% at 30% -20%, #6c6c6c 0%, #38383e 55%, #2b2b2f 100%);   /* Jan 10.10.: Karten heller */
  --portal-card-gradient-login: radial-gradient(ellipse 110% 75% at 30% -20%, #2a2a2c 0%, #19191b 55%, #121214 100%);
  --portal-panel:           #161618;   /* Notiz-Karte, Profil-Menü */
  --portal-panel-locked:    #090909;   /* gesperrter / abgeschlossener Menü-Kasten */
  --portal-panel-badge:     #1b1b1e;   /* Datums-Kachel */
  --portal-tip-bg:          #202023;   /* Cursor-Label gesperrte Zone */
  --portal-step-bg:         #222;      /* Menü-Zeile (Step) */
  --portal-step-active-bg:  rgba(255,255,255,0.09);   /* Menü-Zeile angeklickt */
  --portal-thumb-gradient:  linear-gradient(160deg, #1e1e20, #0f0f11);   /* Dokument-Kachel */
  --portal-video-gradient:  linear-gradient(160deg, #232326, #101012);   /* Teaser-Video */
  --portal-cal-bg:          #1c1c1f;   /* Kalender-Fläche (Terminmodul) */

  /* Transparente Überlagerungen (Hover, Chips, Pillen) */
  --portal-card-inner-bg:   rgba(255,255,255,0.035);   /* innere Karte im großen Kasten */
  --portal-quote-bg:        rgba(255,255,255,0.04);    /* Retrospektive, Hover „Weitere Person" */
  --portal-hero-bg:         rgba(255,255,255,0.035);   /* Termin-Fläche (hell auf Weiß = #f6f6f6) */
  --portal-chip-bg:         rgba(255,255,255,0.05);    /* Profil, Termin-Pille, Gast-Karte, Grund-Button */
  --portal-hover:           rgba(255,255,255,0.06);    /* Hover, neutrale Pillen */
  --portal-bubble-bg:       rgba(255,255,255,0.07);    /* Chat-Blase, Datei-Chip, Burger */
  --portal-avatar-bg:       rgba(255,255,255,0.08);    /* Avatar, Entwurf-Badge */
  --portal-hover-strong:    rgba(255,255,255,0.09);    /* Profil-Hover, Grund-Hover */
  --portal-hover-xl:        rgba(255,255,255,0.10);    /* Hover Nebenbutton Absage-Flow */
  --portal-skeleton:        rgba(255,255,255,0.16);    /* Teaser-Platzhalter, Play-Kreis */

  /* Fehler / Absagen */
  --portal-danger-text:       #ff8a80;
  --portal-danger-bg:         #3c1512;
  --portal-danger-bg-hover:   #52201b;
  --portal-danger-line:       rgba(224,72,61,0.5);
  --portal-danger-line-hover: rgba(224,72,61,0.75);

  /* Terminmodul: Kalendertage / Uhrzeiten (verfügbar, Hover, gewählt) */
  --portal-slot-bg:         rgba(var(--c-accent-rgb), 0.22);
  --portal-slot-bg-hover:   rgba(var(--c-accent-rgb), 0.45);
  --portal-slot-text:       var(--c-accent);
  --portal-slot-text-hover: #000;
  --portal-sel-bg:          var(--c-accent);   /* gewählter Tag */
  --portal-sel-text:        #000;
  --portal-time-active-bg:  #000;              /* gewählte Uhrzeit (Schrift bleibt Akzent) */

  /* HINWEIS: Die --tl-* Tokens werden vom Menü nicht mehr genutzt (Timeline ist neutral,
     blass = --portal-text-faint). Nur noch als Reserve vorhanden.
     Früher: Timeline-Helligkeitsverlauf: Linie UND Kreis-Umrandungen nutzen exakt
     dieselben Farbwerte pro Zone (erledigt → heiß → nachleuchtend → aus) */
  --tl-done:   #3a3a3e;   /* erledigt: grau — nur der ✓-Haken trägt Akzent, Fokus liegt auf dem Aktuellen */
  --tl-hot:    #d8fd5b;                                     /* To-do + Kick-off: volle Helligkeit */
  --tl-after1: color-mix(in srgb, #d8fd5b 30%, #26262a);    /* leuchtet noch Richtung Fundament */
  --tl-after2: #3a3a3e;
  --tl-after3: #2c2c30;
  --portal-surface:      var(--c-surface);
  --portal-surface-2:    var(--c-surface-2);
  --portal-text:         var(--c-ink);
  --portal-text-soft:    var(--c-ink-soft);
  --portal-text-faint:   var(--c-ink-faint);
  --portal-line:         var(--c-surface-line);

  --heading-font:   var(--font-tt);
  --body-font:      var(--font-tt);
  /* Systemschrift (SF Pro auf Apple) für kleine Texte, die maximal klar sein
     müssen: Menü-Nummern, Status-Wörter, Tooltip, Header-Unterzeile (Jan, 2026-10-12) */
  --system-font:    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --portal-h1-size: clamp(34px, 3.8vw, 52px);
  --portal-h1-weight: 500;
  --portal-h1-spacing: -0.5px;

  --kicker-size: 12px;
  --kicker-spacing: 0.14em;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-10: 40px;
  --space-12: 48px;

  --shadow-card: 0 10px 40px rgba(0,0,0,0.35);
  --transition: 0.22s cubic-bezier(.4,0,.2,1);

  /* Formularfelder — Jans Präferenz: min. 19px Schrift, graue Flächen */
  --field-font-size: 17px;

  /* Vertikales Layout-Raster (4px-Basis) — EIN Rhythmus für alle Inhaltskarten:
     xs Titel→Pille · s Pille→Text · m Text→Aktion/Nachbar · l Block→Block */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --field-bg: rgba(255,255,255,0.055);
  --field-bg-focus: rgba(255,255,255,0.085);
}

/* =====================================================
   HELL — folgt der Systemeinstellung (prefers-color-scheme),
   außer der Kunde hat im Profil-Menü manuell gewählt (data-theme).
   :root oben bleibt der Default (dunkel, unverändert).
   ===================================================== */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --c-ink:          #0c0c0e;
    --c-ink-soft:     rgba(12,12,14,0.62);
    --c-ink-faint:    rgba(12,12,14,0.40);
    --c-line:         rgba(0,0,0,0.10);
    --c-surface:      #ffffff;
    --c-surface-2:    #ececea;
    --c-surface-line: rgba(0,0,0,0.08);

    --portal-bg:      #f4f4f2;
    --portal-box-dot: #ffffff;
    --portal-kreis:      #333333;   /* hell: dunkler Kreis, helle Zahl */
    --portal-kreis-zahl: #ffffff;
    --portal-timeline:   #a3a3a3;
  --portal-kreis-zu:      #e2e2e0;   /* zugeklappt: unauffällig, heller */
  --portal-titel-zu:      #3a3a3a;
  --portal-text-blass:    rgba(12, 12, 14, 0.32);
  --portal-icon-flaeche:  #f2f2f0;
  --portal-icon-farbe:    #9a9a9a;
  --portal-icon-flaeche-aktiv: #fbfbfa;   /* heller als die angewählte Zeile */
  --portal-check-kreis: #e4e4e2;
  --portal-tip-flaeche: #f1f1ef;
  --portal-tip-text: #555;
  --portal-kreis-zahl-zu: #7a7a7a;

    /* Akzent als Text/Linie/Icon: #d8fd5b ist auf Hell unlesbar */
    --portal-accent-text:     #4f6f00;
    --portal-accent-text-rgb: 79, 111, 0;
    --portal-on-accent:       #000;   /* bleibt dunkel */

    --tl-done:   #c9c9cc;
    --tl-hot:    #8db600;
    --tl-after1: color-mix(in srgb, #8db600 35%, #e4e4e6);
    --tl-after2: #d6d6d9;
    --tl-after3: #e4e4e6;

    --shadow-card: 0 10px 30px rgba(0,0,0,0.08);
    --field-bg:       rgba(0,0,0,0.045);
    --field-bg-focus: rgba(0,0,0,0.07);

    --portal-card-gradient:       radial-gradient(ellipse 110% 75% at 30% -20%, #ffffff 0%, #ffffff 55%, #fafaf8 100%);
    --portal-card-gradient-login: radial-gradient(ellipse 110% 75% at 30% -20%, #ffffff 0%, #ffffff 55%, #fafaf8 100%);
    --portal-panel:           #ffffff;
    --portal-panel-locked:    #ececea;
    --portal-panel-badge:     #f7f7f5;
    --portal-tip-bg:          #ffffff;
    --portal-step-bg:         #f3f3f1;
    --portal-step-active-bg:  rgba(0,0,0,0.06);
    --portal-thumb-gradient:  linear-gradient(160deg, #fbfbfa, #ececea);
    --portal-video-gradient:  linear-gradient(160deg, #f4f4f2, #e2e2df);
    --portal-cal-bg:          #ececea;

    --portal-card-inner-bg:   rgba(0,0,0,0.025);
    --portal-quote-bg:        rgba(0,0,0,0.03);
    --portal-hero-bg:         rgba(0,0,0,0.035);   /* Termin-Fläche (hell auf Weiß = #f6f6f6) */
    --portal-chip-bg:         rgba(0,0,0,0.04);
    --portal-hover:           rgba(0,0,0,0.05);
    --portal-bubble-bg:       rgba(0,0,0,0.055);
    --portal-avatar-bg:       rgba(0,0,0,0.065);
    --portal-hover-strong:    rgba(0,0,0,0.075);
    --portal-hover-xl:        rgba(0,0,0,0.09);
    --portal-skeleton:        rgba(0,0,0,0.10);

    --portal-danger-text:       #c0392b;
    --portal-danger-bg:         #fdeceb;
    --portal-danger-bg-hover:   #fadad7;
    --portal-danger-line:       rgba(192,57,43,0.40);
    --portal-danger-line-hover: rgba(192,57,43,0.65);

    /* Verfügbare Tage/Zeiten: Akzent als Fläche + dunkle Schrift (wie Terminportal-Original) */
    --portal-slot-bg:         var(--c-accent);
    --portal-slot-bg-hover:   #c3ea3c;
    --portal-slot-text:       var(--c-accent-ink);
    --portal-slot-text-hover: var(--c-accent-ink);
    --portal-sel-bg:          #0c0c0e;           /* gewählt: dunkle Pille, Akzent-Schrift */
    --portal-sel-text:        var(--c-accent);
    --portal-time-active-bg:  #0c0c0e;
    color-scheme: light;
  }
}

/* Manuelle Wahl über den Schalter im Profil-Menü (html[data-theme], localStorage
   "portalTheme") übersteuert die Systemeinstellung in beide Richtungen.
   Dunkel = :root-Default oben, daher reicht dort color-scheme. */
:root[data-theme="light"] {
  --c-ink:          #0c0c0e;
  --c-ink-soft:     rgba(12,12,14,0.62);
  --c-ink-faint:    rgba(12,12,14,0.40);
  --c-line:         rgba(0,0,0,0.10);
  --c-surface:      #ffffff;
  --c-surface-2:    #ececea;
  --c-surface-line: rgba(0,0,0,0.08);

  --portal-bg:      #f4f4f2;
  --portal-box-dot: #ffffff;
  --portal-kreis:      #333333;   /* hell: dunkler Kreis, helle Zahl */
  --portal-kreis-zahl: #ffffff;
  --portal-timeline:   #a3a3a3;
  --portal-kreis-zu:      #e2e2e0;   /* zugeklappt: unauffällig, heller */
  --portal-titel-zu:      #3a3a3a;
  --portal-text-blass:    rgba(12, 12, 14, 0.32);
  --portal-icon-flaeche:  #f2f2f0;
  --portal-icon-farbe:    #9a9a9a;
  --portal-icon-flaeche-aktiv: #fbfbfa;   /* heller als die angewählte Zeile */
  --portal-check-kreis: #e4e4e2;
  --portal-tip-flaeche: #f1f1ef;
  --portal-tip-text: #555;
  --portal-kreis-zahl-zu: #7a7a7a;

  /* Akzent als Text/Linie/Icon: #d8fd5b ist auf Hell unlesbar */
  --portal-accent-text:     #4f6f00;
  --portal-accent-text-rgb: 79, 111, 0;
  --portal-on-accent:       #000;   /* bleibt dunkel */

  --tl-done:   #c9c9cc;
  --tl-hot:    #8db600;
  --tl-after1: color-mix(in srgb, #8db600 35%, #e4e4e6);
  --tl-after2: #d6d6d9;
  --tl-after3: #e4e4e6;

  --shadow-card: 0 10px 30px rgba(0,0,0,0.08);
  --field-bg:       rgba(0,0,0,0.045);
  --field-bg-focus: rgba(0,0,0,0.07);

  --portal-card-gradient:       radial-gradient(ellipse 110% 75% at 30% -20%, #ffffff 0%, #ffffff 55%, #fafaf8 100%);
  --portal-card-gradient-login: radial-gradient(ellipse 110% 75% at 30% -20%, #ffffff 0%, #ffffff 55%, #fafaf8 100%);
  --portal-panel:           #ffffff;
  --portal-panel-locked:    #ececea;
  --portal-panel-badge:     #f7f7f5;
  --portal-tip-bg:          #ffffff;
  --portal-step-bg:         #f3f3f1;
  --portal-step-active-bg:  rgba(0,0,0,0.06);
  --portal-thumb-gradient:  linear-gradient(160deg, #fbfbfa, #ececea);
  --portal-video-gradient:  linear-gradient(160deg, #f4f4f2, #e2e2df);
  --portal-cal-bg:          #ececea;

  --portal-card-inner-bg:   rgba(0,0,0,0.025);
  --portal-quote-bg:        rgba(0,0,0,0.03);
  --portal-hero-bg:         rgba(0,0,0,0.035);   /* Termin-Fläche (hell auf Weiß = #f6f6f6) */
  --portal-chip-bg:         rgba(0,0,0,0.04);
  --portal-hover:           rgba(0,0,0,0.05);
  --portal-bubble-bg:       rgba(0,0,0,0.055);
  --portal-avatar-bg:       rgba(0,0,0,0.065);
  --portal-hover-strong:    rgba(0,0,0,0.075);
  --portal-hover-xl:        rgba(0,0,0,0.09);
  --portal-skeleton:        rgba(0,0,0,0.10);

  --portal-danger-text:       #c0392b;
  --portal-danger-bg:         #fdeceb;
  --portal-danger-bg-hover:   #fadad7;
  --portal-danger-line:       rgba(192,57,43,0.40);
  --portal-danger-line-hover: rgba(192,57,43,0.65);

  /* Verfügbare Tage/Zeiten: Akzent als Fläche + dunkle Schrift (wie Terminportal-Original) */
  --portal-slot-bg:         var(--c-accent);
  --portal-slot-bg-hover:   #c3ea3c;
  --portal-slot-text:       var(--c-accent-ink);
  --portal-slot-text-hover: var(--c-accent-ink);
  --portal-sel-bg:          #0c0c0e;           /* gewählt: dunkle Pille, Akzent-Schrift */
  --portal-sel-text:        var(--c-accent);
  --portal-time-active-bg:  #0c0c0e;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }