/* =====================================================================
   Fongern Automation – Corporate Identity der Website
   ---------------------------------------------------------------------
   Hier stehen NUR Festlegungen: Schriften, Farben, Maße.
   Anordnung und Aussehen der einzelnen Bausteine stehen in style.css
   und greifen ausschließlich über var(--…) auf diese Werte zu.
   Farbe oder Schrift ändern  -> diese Datei
   Abstände/Anordnung ändern  -> style.css
   Texte ändern               -> die HTML-Seiten
   Wird in den HTML-Seiten VOR style.css eingebunden.
   ===================================================================== */

/* ---------- Schriften (lokal eingebunden, keine Verbindung zu Google) ---------- */
@font-face{font-family:"Archivo";src:url(fonts/archivo-wdth.woff2) format("woff2-variations"),url(fonts/archivo-wdth.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-sans-600.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plex-mono-500.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Tinos";src:url(fonts/tinos-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;   /* die Seite hat bewusst nur ein helles Erscheinungsbild */

  /* ---------- Marke (wie Logo und Prospekte) ---------- */
  --logo:#0000FF;          /* Logo-Blau */
  --plate:#E9E9E9;         /* Grauflaeche hinter dem Logo, Kontakt- und Hotline-Feld */
  --navy:#000080;          /* Marineblau: Ueberschriften, Kennzeilen, Akzente */
  --navy-ink:#0B1066;      /* Menue-Text */

  /* ---------- Grundfarben ---------- */
  --ground:#FFFFFF;        /* Seitenhintergrund */
  --surface:#FFFFFF;       /* Karten, Kaesten */
  --surface-2:#EEEEF3;     /* Etiketten (Technik-Schlagworte) */
  --ink:#1A1A1A;           /* Fliesstext */
  --muted:#55585E;         /* Nebentext */
  --gray:#808080;          /* Kuerzel und Beschriftungen im Kreislauf */
  --line:#D6D7DD;          /* feine Linien */
  --line-strong:#C8C8C8;   /* Linien im Kreislauf */
  --line-node:#B9BBC2;     /* Rand der Stationen im Kreislauf */

  /* ---------- Akzent ---------- */
  --accent:#000080;        /* Schaltflaechen, Symbole */
  --accent-ink:#FFFFFF;    /* Schrift auf Akzentfarbe */
  --accent-soft:#E9E9F2;   /* zarte Hinterlegung */
  --hl:#000080;            /* Hervorhebung (Nummern, Haken, Jahreszahlen) */
  --brass:#A7822F;         /* Messing */
  --brass-hi:#D2AE5C;      /* Messing hell */

  /* ---------- Dunkle Flaechen ("Bildschirm": Fusszeile, Waehrungen, Lieferumfang) ---------- */
  --screen:#16191E;
  --screen-2:#1E2228;
  --screen-line:#2E333B;
  --screen-ink:#ECEDEF;
  --screen-muted:#A0A6AE;
  --screen-accent:#D2AE5C;
  --screen-on:#E8EAFF;     /* Akzent auf dunkler Flaeche */

  /* ---------- Zustandsfarben (Beispiel-Monitoring) ---------- */
  --ok:#2FBF71;
  --warn:#E3A73A;

  /* ---------- Schriften ---------- */
  --display:"Tinos","Times New Roman",Times,serif;              /* Ueberschriften */
  --body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;           /* Fliesstext */
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;      /* Technik, Nummern */
  --ci-sans:Arial,Helvetica,sans-serif;                         /* Kennzeilen, Kreislauf - wie Prospekte */
  --logo-font:"Tinos","Times New Roman",Times,serif;            /* Logo-Schriftzug */

  /* ---------- Masse ---------- */
  --wrap:1180px;           /* maximale Inhaltsbreite */
}

/* Dunkle Flaechen: Akzente in Messing statt Marineblau */
.console,.hotline{
  --hl:var(--brass-hi); --brass:var(--brass-hi); --accent:var(--screen-on);
}

/* Kontaktbereich: hell wie das Kontaktfeld der Prospekte */
.contact{
  --screen:#ECECEA; --screen-2:#FFFFFF; --screen-line:#D2D3D6;
  --screen-ink:var(--navy); --screen-muted:var(--muted); --screen-accent:#86661F;
}