/* ===========================================================================
   Imperia BETA · Design „Gold“: nur Schrift und Farben, für Seiten ohne CRM-Rahmen (G4c, 22.10.2026)
   KOPIE der Schrift- und Farbblöcke aus public/crm/assets/gold.css (Kern-Schicht G2), Wort für Wort. Grund: öffentliche Seiten
   (Terminbuchung, Tippgeber-Portal, Empfehlung, /t/<token>) und die Anmeldung dürfen /crm/ nicht laden, /assets/ schon.
   NICHT VON HAND ÄNDERN. Änderungen in gold.css, danach: node werkzeuge/beta/pruefung/gold-farben-probe.mjs --schreiben
   Die Probe ohne --schreiben meldet, wenn beide auseinanderlaufen. Regeln der Seiten stehen in gold-seiten.css.
   Wirkt nur mit <html class="gold"> (setzt gold-seiten.js bzw. das Kopf-Skript, nur auf Seiten mit data-gold).
   =========================================================================== */

/* ------------------------------------------------------------ Schrift Inter (Lucas Entscheidung 22.10.2026)
   Timos Schrift, als lokale Datei im Projekt, kein Abruf bei Google. Gleiche Datei wie im Exposé des Live-Portals
   (Inter, SIL Open Font License 1.1), variable Stärke 100 bis 900, alle Umlaute und das Eurozeichen; Zeichen wie ✦ oder
   ⌘ kommen aus der Systemschrift. Liegt unter /fonts/ (ein Jahr im Browser gemerkt, siehe public/_headers; Pfad relativ zu dieser Datei). Eigener
   Name „Inter Gold“, damit sie nur im Design Gold lädt; iOS und Klassisch bleiben unberührt. */
@font-face{font-family:'Inter Gold';font-style:normal;font-weight:100 900;font-display:swap;src:url('../../fonts/inter-variable.woff2') format('woff2');}

/* ------------------------------------------------------------ Farben HELL (abgeleitet aus Timos Dunkel) */
:root.gold{
  /* Akzent: die eine Variable für White-Label */
  --g-akzent:#C5A572;

  /* Ersatzwerte für Browser ohne Farbrechnung (genau Timos Werte); sonst rechnet der @supports-Block unten */
  --g-akzent-hell:#E5C78F;        /* Timo --gold-2: Glanzlicht, Verläufe oben */
  --g-akzent-tief:#8F7143;        /* Timo --gold-dark: Verläufe unten, nie Schrift */
  --g-akzent-glanz:#ECD29E;       /* Hauptknopf oben */
  --g-akzent-satt:#A7834F;        /* Hauptknopf unten */
  --g-akzent-text:#735624;        /* Gold als Schrift auf Hell: 6,0 : 1 auf Elfenbein, 4,6 : 1 auf Gold-Tönung (G5 Kontrast, vorher #7B5E2C) */
  --g-akzent-grafik:#A5834B;      /* Linien, Balken, Schalter, Häkchen auf Hell: 3,1 : 1 */
  --g-auf-akzent:#0B0906;         /* Schrift auf Gold */
  --g-akzent-auf-dunkel:#E5C78F;  /* Gold auf dunklem Glas (Fotos, Kurzmeldung), in beiden Modi */

  /* Tönungen aus dem Akzent (hell kräftiger als dunkel, sonst verschwinden sie auf Weiß) */
  --g-akzent-hauch:color-mix(in srgb, var(--g-akzent) 6%, transparent);
  --g-akzent-flaeche:color-mix(in srgb, var(--g-akzent) 14%, transparent);
  --g-akzent-flaeche-stark:color-mix(in srgb, var(--g-akzent) 24%, transparent);
  --g-akzent-rand:color-mix(in srgb, var(--g-akzent) 42%, transparent);
  --g-akzent-rand-stark:color-mix(in srgb, var(--g-akzent-grafik) 70%, transparent);
  --g-akzent-schein:color-mix(in srgb, var(--g-akzent) 38%, transparent);
  --g-akzent-glut:color-mix(in srgb, var(--g-akzent) 22%, transparent);

  /* Flächen */
  --g-grund:#F5F1EA;              /* Elfenbein */
  --g-flaeche:#FBF9F5;            /* Kopfleiste, Seitenleiste */
  --g-flaeche-2:#F8F4EE;
  --g-kachel:#FFFFFF;
  --g-kachel-weich:#FBF8F3;       /* Fläche in einer Kachel */
  --g-erhoben:#FFFFFF;            /* Dialog, Menü */
  --g-versenkt:#EFE9DF;           /* Spur von Segment, Schalter, Balken */
  --g-feld:#FFFFFF;               /* Eingabefeld */
  --g-kachel-glanz:linear-gradient(180deg, color-mix(in srgb, var(--g-akzent) 5%, transparent), transparent 42%);

  /* Rahmen */
  --g-rand:#E8DFCF;
  --g-rand-stark:#D6C6A6;
  --g-rand-fein:rgba(60,45,20,.075);   /* Linien in einer Kachel */
  --g-rand-feld:#9E8966;          /* Eingabefelder, Schalter aus: 3,4 : 1 (Mindestmaß für Bedienelemente) */

  /* Schrift */
  --g-text:#1E1B16;
  --g-text-weich:#3A352D;
  --g-text-gedaempft:#625B51;     /* G5 Kontrast, vorher #6B645A */
  --g-text-leise:#675F54;         /* kleinste Angaben, 5,6 : 1 auf Elfenbein, 4,6 : 1 auf getönten Flächen (G5 Kontrast, vorher #736B60) */

  /* Zustände: Timos Farbtöne, abgedunkelt bis sie auf Weiß und Elfenbein lesbar sind */
  --g-gruen:#257843;  --g-gruen-text:#257843;   /* Zustandsschrift auch auf ihrer Tönung mindestens 4,6 : 1 (G5 Kontrast, vorher #297B46, #A7463D, #8E5E00) */
  --g-rot:#9C3C34;    --g-rot-text:#9C3C34;
  --g-orange:#815200; --g-orange-text:#815200;
  --g-blau:#3664AF;   --g-blau-text:#3664AF;
  --g-zustand-flaeche:10%;        /* Tönung der Abzeichen und Hinweise */
  --g-zustand-rand:34%;

  /* Schatten, Glas, Schein */
  --g-schatten-kachel:0 1px 2px rgba(60,45,20,.045), 0 10px 28px -16px rgba(60,45,20,.16);
  --g-schatten-hoch:0 2px 6px rgba(60,45,20,.06), 0 22px 54px -18px rgba(60,45,20,.24);
  --g-schatten-gross:0 28px 90px -20px rgba(60,45,20,.30), 0 0 0 1px rgba(60,45,20,.04);
  --g-glanz-oben:inset 0 1px 0 rgba(255,255,255,.9);
  --g-knopf-schatten:0 8px 20px -6px color-mix(in srgb, var(--g-akzent-tief) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
  --g-raster-linie:rgba(60,45,20,.035);
  --g-vorhang:rgba(40,32,20,.26);
  --g-glas:rgba(251,249,245,.86);       /* Kopfleiste, Menüs, Handy-Leiste */
  --g-glas-dunkel:rgba(20,18,15,.94);   /* Kurzmeldung, Bildzähler auf Fotos: in beiden Modi dunkel */
  /* Auf Fotos hell wie in iOS (Lucas Rückmeldung 22.10.: dunkle Knöpfe und Schilder zu dunkel), in beiden Modi gleich, den Grund
     bestimmt das Foto: runde Knöpfe weißes Glas mit dunklem Zeichen, Zustandsschilder in klaren Farben, Schrift mindestens 5 : 1 */
  --g-glas-hell:rgba(255,255,255,.92);
  --g-glas-hell-zeichen:#2A2520;
  --g-glas-hell-schatten:0 2px 10px rgba(0,0,0,.2), 0 0 0 1px rgba(30,24,16,.06);
  --g-schild-gruen:#237A3E; --g-schild-rot:#B8382E; --g-schild-gelb:#EFB833; --g-schild-gelb-text:#2B1D02;
  /* Warmer Schein oben (Timos zwei Kreise, feste Größe, damit er auf langen Seiten nicht mitwächst) */
  --g-schein:radial-gradient(circle 480px at 50% -100px, color-mix(in srgb, var(--g-akzent) 20%, transparent), transparent),
    radial-gradient(circle 620px at calc(100% + 75px) 100px, color-mix(in srgb, var(--g-akzent) 10%, transparent), transparent);

  /* Fertige Verläufe zum Wiederverwenden in den Bereichen */
  --g-verlauf-knopf:linear-gradient(180deg, var(--g-akzent-glanz), var(--g-akzent) 68%, var(--g-akzent-satt));   /* Hauptknopf */
  --g-verlauf-linie:linear-gradient(90deg, transparent, var(--g-akzent), var(--g-akzent-hell), transparent);       /* aktiver Reiter */
  --g-verlauf-balken:linear-gradient(180deg, var(--g-akzent), var(--g-akzent-text));                               /* Balken im Diagramm */

  /* Formen (Timos --radius 22px und --radius-sm 14px) */
  --g-r-kachel:22px;
  --g-r-kachel-klein:16px;
  --g-r-feld:14px;
  --g-r-knopf:14px;
  --g-r-knopf-klein:12px;
  --g-r-kapsel:999px;
  --g-r-dialog:26px;

  /* Schriften */
  --g-schrift:'Inter Gold', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --g-schrift-zier:Georgia, "Times New Roman", serif;   /* Serifen nur für Logo-Zeichen und Markenzeile (Luca 22.10.2026) */
  --g-ease:cubic-bezier(.2,.8,.2,1);

  /* Gemeinsame Variablen des CRM auf Gold (alle Bereiche, die Variablen nutzen, folgen damit von selbst).
     :root.gold wiegt mehr als :root und html[data-theme="dark"], gilt also hell und dunkel. */
  --bg:var(--g-grund);
  --surface:var(--g-flaeche);
  --card:var(--g-kachel);
  --card-2:var(--g-kachel-weich);
  --elevated:var(--g-erhoben);
  --sunk:var(--g-versenkt);
  --border:var(--g-rand);
  --border-strong:var(--g-rand-stark);
  --text:var(--g-text);
  --text-soft:var(--g-text-weich);
  --text-muted:var(--g-text-gedaempft);
  --gold:var(--g-akzent-grafik);
  --gold-ink:var(--g-akzent-text);
  --gold-fg:var(--g-auf-akzent);
  --gold-bg:var(--g-akzent-flaeche);
  --gold-br:var(--g-akzent-rand);
  --rot:var(--g-rot);
  --gruen:var(--g-gruen);
  --blau:var(--g-blau);
  --orange:var(--g-orange);
  --ob-orange:var(--g-orange);
  --schatten:var(--g-schatten-kachel);
  --schatten-hoch:var(--g-schatten-hoch);
  --schatten-leiste:var(--g-schatten-gross);
  --r-karte:var(--g-r-kachel);
  --r-klein:var(--g-r-feld);
  --schrift:var(--g-schrift);
  --kopf-h:64px;
  --seite-w:248px;
  color-scheme:light;
}

/* ---------------------------------------------------------- Farben DUNKEL (genau Timos Werte) */
:root.gold[data-theme="dark"]{
  --g-akzent-text:#E5C78F;        /* Timo: aktive Reiter, Links, Werte in Gold */
  --g-akzent-grafik:#C5A572;

  --g-akzent-hauch:color-mix(in srgb, var(--g-akzent) 4%, transparent);
  --g-akzent-flaeche:color-mix(in srgb, var(--g-akzent) 10%, transparent);
  --g-akzent-flaeche-stark:color-mix(in srgb, var(--g-akzent) 18%, transparent);
  --g-akzent-rand:color-mix(in srgb, var(--g-akzent) 28%, transparent);
  --g-akzent-rand-stark:color-mix(in srgb, var(--g-akzent) 45%, transparent);
  --g-akzent-schein:color-mix(in srgb, var(--g-akzent) 55%, transparent);
  --g-akzent-glut:color-mix(in srgb, var(--g-akzent) 18%, transparent);

  --g-grund:#050505;
  --g-flaeche:#0A0A0A;
  --g-flaeche-2:#0D0D0C;
  --g-kachel:#10100F;
  --g-kachel-weich:#14120F;
  --g-erhoben:#12110F;
  --g-versenkt:#0B0B0A;           /* Timos Spur der Segmente */
  --g-feld:#0C0C0B;               /* eine Spur tiefer als die Kachel, damit der Platzhalter lesbar bleibt */
  --g-kachel-glanz:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));

  --g-rand:#1F1C17;
  --g-rand-stark:#342B1F;
  --g-rand-fein:rgba(255,255,255,.055);
  --g-rand-feld:#6B6255;          /* Timo rund 1,6 : 1, angehoben auf 3,2 : 1 */

  --g-text:#F4F1EA;
  --g-text-weich:#DDD5C8;
  --g-text-gedaempft:#A9A398;     /* G5 Kontrast, vorher #9B958A */
  --g-text-leise:#938D81;         /* Timo #6F6A60 (3,3 : 1), angehoben auf 6,2 : 1, auf getönten Flächen 4,6 : 1 (G5 Kontrast, vorher #878175) */

  --g-gruen:#6FD38C;  --g-gruen-text:#9BECB1;
  --g-rot:#E06B5F;    --g-rot-text:#FF9B91;
  --g-orange:#E2A84F; --g-orange-text:#F4C777;
  --g-blau:#72A8FF;   --g-blau-text:#AECDFF;
  --g-zustand-flaeche:8%;
  --g-zustand-rand:28%;

  --g-schatten-kachel:inset 0 1px 0 rgba(255,255,255,.045);
  --g-schatten-hoch:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --g-schatten-gross:0 28px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
  --g-glanz-oben:inset 0 1px 0 rgba(255,255,255,.06);
  --g-knopf-schatten:0 12px 28px color-mix(in srgb, var(--g-akzent) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.38);
  --g-raster-linie:rgba(255,255,255,.022);
  --g-vorhang:rgba(0,0,0,.62);
  --g-glas:rgba(10,10,10,.86);
  --g-verlauf-balken:linear-gradient(180deg, var(--g-akzent-hell), var(--g-akzent-tief));
  color-scheme:dark;
}

/* ------------------------------------------------- Akzent ableiten (White-Label)
   Abstände in Helligkeit, Buntheit und Farbton sind aus Timos Gold gemessen (oklch), mit Gold kommen so genau
   Timos Werte heraus. Gold als Schrift: hell höchstens Helligkeit 0,50, dunkel mindestens 0,80, damit jede
   Firmenfarbe lesbar bleibt. Schrift auf dem Akzent: fast schwarz bei hellen Farben, sonst fast weiß. */
@supports (color: oklch(from red min(l, .5) c h)) and (color: oklch(from red clamp(.1, (.62 - l) * 1000, .9) calc(c * .1) h)){
  :root.gold{
    --g-akzent-hell:oklch(from var(--g-akzent) calc(l + .104) calc(c + .003) calc(h + 3.9));
    --g-akzent-tief:oklch(from var(--g-akzent) calc(l - .171) calc(c * .95) calc(h - 1.7));
    --g-akzent-glanz:oklch(from var(--g-akzent) calc(l + .135) calc(c * .95) calc(h + 5.6));
    --g-akzent-satt:oklch(from var(--g-akzent) calc(l - .106) calc(c * 1.06) calc(h - 3.3));
    --g-akzent-text:oklch(from var(--g-akzent) min(l, .473) c h);   /* G5 Kontrast: auch auf Gold-Tönung 4,6 : 1 (vorher .50) */
    --g-akzent-grafik:oklch(from var(--g-akzent) min(l, .63) calc(c * 1.1) h);
    --g-auf-akzent:oklch(from var(--g-akzent) clamp(.141, (.62 - l) * 1000, .985) calc(c * .1) h);
    --g-akzent-auf-dunkel:oklch(from var(--g-akzent) max(calc(l + .104), .80) calc(c + .003) calc(h + 3.9));
  }
  :root.gold[data-theme="dark"]{
    --g-akzent-text:oklch(from var(--g-akzent) max(calc(l + .104), .80) calc(c + .003) calc(h + 3.9));
    --g-akzent-grafik:oklch(from var(--g-akzent) max(l, .68) c h);
  }
}