/* financeb2b v2 — Token-Bruecke
 *
 * Die 166 bestehenden Seiten setzen Farben, Abstaende und Schriftgroessen
 * ueberwiegend als Inline-Style mit den Tokens der beiden alten Systeme:
 * --space-3 allein rund 1700-mal, --color-text-secondary rund 1600-mal,
 * --hair rund 500-mal, --ink-900 rund 400-mal. v2 laedt weder main.css noch
 * design-system.css, damit die alte Kaskade nicht hineinwirkt. Ohne diese
 * Datei waeren all diese Inline-Styles wertlos und die Seiten farblos.
 *
 * Deshalb stehen hier dieselben Token-NAMEN mit v2-WERTEN. Ein bestehender
 * Seiteninhalt bleibt damit unveraendert und uebernimmt trotzdem die neue
 * Palette und Schrift. Geaendert wird spaeter der Seiteninhalt, nicht diese
 * Bruecke.
 *
 * Laedt NACH fb-v2.css, damit die v2-eigenen Tokens hier ergaenzt und nicht
 * ueberschrieben werden.
 */

body.v2 {
  /* --- Schriften ---------------------------------------------------------
     v2 ist eine Ein-Schrift-Gestaltung. Instrument Serif und DM Mono werden
     nicht mehr geladen, deshalb zeigen --f-display und --f-sans auf Figtree.
     Fuer --f-mono bleibt ein Systemstack: Zahlenkolonnen in Tabellen brauchen
     gleiche Zeichenbreiten, dafuer genuegt die Systemschrift. */
  --f-display: "Figtree", system-ui, sans-serif;
  --f-sans:    "Figtree", system-ui, sans-serif;
  --f-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-primary: var(--f-sans);
  --font-heading: var(--f-sans);

  /* --- Tinten und Flaechen (design-system.css) --------------------------- */
  --ink-900: #0E1B3D;
  --ink-700: #28334F;
  --ink-500: #3D4867;
  --ink-400: #6E7894;
  --ink-300: #9AA3BB;
  --hair:    #E3E7F0;
  --hair-2:  #EDF0F6;
  --surface: #F4F6FB;
  --surface-2: #EDF1F8;
  --ink-on-accent: #FFFFFF;

  /* --accent war Gruen, v2 ist Kobalt. Eine Stelle, nicht 300. */
  --accent:      #2350E0;
  --accent-ink:  #1A3FB8;
  --accent-soft: #EDF2FF;

  --pos:  #0E8A5F;
  --neg:  #B4472E;
  --warn: #B07B12;

  /* Radien: v2 ist deutlich runder als das alte System. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  /* --- Farben des aelteren Systems (main.css) ---------------------------- */
  --color-primary:        #0E1B3D;
  --color-secondary:      #28334F;
  --color-accent:         #2350E0;
  --color-accent-hover:   #1A3FB8;
  --color-background:     #FFFFFF;
  --color-surface:        #F4F6FB;
  --color-border:         #E3E7F0;
  --color-text:           #0E1B3D;
  --color-text-secondary: #3D4867;
  --color-success:        #0E8A5F;
  --color-info:           #2350E0;
  --color-warning:        #B07B12;

  /* --- Schriftgroessen, Gewichte, Abstaende ------------------------------ */
  --text-xs: .75rem;  --text-sm: .875rem;  --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;

  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;

  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem;   --space-12: 3rem;
  --space-16: 4rem;  --space-24: 6rem;

  --transition-fast: .2s ease; --transition-normal: .3s ease; --transition-slow: .4s ease;
}

/* --- Bausteine aus main.css, die v2 sonst fehlen -------------------------
   .container und .section nutzen die Seiten oefter als .fb-container, und
   die Buttonklassen .btn-primary / .btn-secondary / .btn-large stehen auf
   rund 140 Schaltflaechen. Sie bekommen hier die v2-Form, damit alte und
   neue Seiten dieselben Buttons zeigen. Die Basisregel .btn kommt aus
   fb-v2.css — hier nur die Varianten, sonst entsteht genau der Konflikt,
   an dem die erste Migration mit schwarzen Buttons gescheitert ist. */
.v2 .container { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.v2 .section   { padding: 80px 0; }
@media (max-width: 860px) {
  .v2 .container { padding: 0 20px; }
  .v2 .section   { padding: 56px 0; }
}

.v2 .btn-primary   { background: var(--c); color: #fff; border-color: transparent; }
.v2 .btn-primary:hover   { background: var(--c-h); color: #fff; }
.v2 .btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.v2 .btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.v2 .btn-accent    { background: var(--c); color: #fff; border-color: transparent; }
.v2 .btn-accent:hover    { background: var(--c-h); color: #fff; }
.v2 .btn-large     { height: 56px; padding: 0 28px; font-size: 16px; }

/* Haeufige Hilfsklassen aus main.css, die Seiten inline erwarten. */
.v2 .text-center { text-align: center; }
.v2 .mb-2 { margin-bottom: var(--space-2); }
.v2 .mb-4 { margin-bottom: var(--space-4); }
.v2 .mb-6 { margin-bottom: var(--space-6); }
.v2 .mb-8 { margin-bottom: var(--space-8); }
.v2 .mt-4 { margin-top: var(--space-4); }
.v2 .mt-6 { margin-top: var(--space-6); }
.v2 .mt-8 { margin-top: var(--space-8); }

/* Seiteneigene <style>-Bloecke setzen Ueberschriften oft ohne eigene Groesse
   und verliessen sich auf die Grundregeln von main.css. v2 nullt Ueberschriften
   im Reset, deshalb hier eine Grundskala. */
.v2 h4 { font-size: 1rem;    font-weight: 600; line-height: 1.3; }
.v2 h5 { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.v2 h6 { font-size: .875rem;  font-weight: 600; line-height: 1.3; }
.v2 strong, .v2 b { font-weight: 600; }
.v2 small { font-size: .875em; }
.v2 table { border-collapse: collapse; }
.v2 img, .v2 svg { max-width: 100%; }
.v2 p { margin: 0 0 1rem; }
.v2 p:last-child { margin-bottom: 0; }
.v2 li { line-height: 1.6; }

/* Tabellen im Bestand stehen ohne Scroll-Container im Fliesstext und haben
   auf schmalen Schirmen die ganze Seite horizontal verschoben (gesehen auf
   cookie-policy.php und automate-payroll-payments.php). Dieselbe Loesung,
   die das v2-Design fuer seine eigene .rtable benutzt. */
@media (max-width:860px){
  .v2 table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
}