/* Vertraut – Passwort-Safe (ein Produkt von IT-Service Karsten Fischer) – Erscheinungsbild des Web-Tresors
   Markenfarben laut Confluence "Corporate Design – Farben, Logo, Anwendung"
   (Beschluss KaFi, 08.08.2026): Nachtblau #122A42, Markenblau #1F4E79,
   Flächenblau #2C608F, Akzent-Orange #F2A03D.
   Wird über index.html nach dem Standard-Stylesheet geladen. */

/* ---- Markenskala: ersetzt das Bitwarden-Blau ----
   Ladder entlang der Markenblau-Achse, verankert an den vier CD-Werten
   (050/100/500/700/900 = Surface-50/Light-100/Blue-500/Navy-700/Navy-900). */
:root,
.theme_light,
.theme_dark {
  --color-brand-050: #f5f8fb;
  --color-brand-100: #d6e4f0;
  --color-brand-200: #9db8d0;
  --color-brand-300: #658caf;
  --color-brand-400: #3d6d99;
  --color-brand-500: #2c608f;
  --color-brand-600: #265784;
  --color-brand-700: #1f4e79;
  --color-brand-800: #173858;
  --color-brand-900: #122a42;
  --color-brand-950: #0e2032;
  --color-brand-950-rgb: 14, 32, 50;

  /* Akzent-Orange separat, da Buttons/Hervorhebungen eine eigene Farbachse
     nutzen (CD: "Amber NUR als Akzent, nie großflächig"). */
  --tb-amber-500: #f2a03d;
}

/* Semantische Tokens (im Original mit festen Hex-Werten belegt) */
:root,
.theme_light {
  /* Buttons: Amber pur hätte mit weißer Schrift nur ~2,1:1 Kontrast
     (WCAG AA verlangt 4,5:1). Deshalb wie zuvor beim Türkis eine
     abgedunkelte Amber-Stufe für Flächen mit weißer Schrift (~4,9:1 /
     ~6,0:1), die reine Akzentfarbe bleibt für Ränder/Fokus/Text erhalten. */
  --color-bg-brand: #8d6a3f;
  --color-bg-brand-strong: #765f3f;
  --color-bg-brand-soft: #d6e4f0;
  --color-fg-brand: #1f4e79;
  --color-fg-brand-strong: #122a42;
  --color-fg-brand-soft: #9db8d0;
  --color-border-brand: #1f4e79;
  --color-border-brand-strong: #122a42;
  --color-border-focus: #1f4e79;

  /* ältere Variablen, für Restbestände im Web-Tresor */
  --color-primary-100: 214 228 240;
  --color-primary-300: 101 140 175;
  --color-primary-600: 141 106 63;
  --color-primary-700: 31 78 121;

  /* Illustrationen (Tresor, Grafiken) in Markenfarben */
  --color-illustration-outline: 31 78 121;
  --color-illustration-bg-primary: 214 228 240;
  --color-illustration-bg-secondary: 101 140 175;
  --color-illustration-bg-tertiary: 255 255 255;
  --color-illustration-tertiary: 242 160 61;
  --color-illustration-logo: 31 78 121;
}

.theme_dark {
  /* Buttons: dieselbe kontrastsichere Amber-Stufe wie im hellen Design. */
  --color-bg-brand: #8d6a3f;
  --color-bg-brand-strong: #765f3f;
  --color-bg-brand-soft: #173858;
  /* Auf dunklem Grund trägt die reine Akzentfarbe: Amber auf Nachtblau
     erreicht rund 6,9:1 Kontrast, Markenblau/Flächenblau dagegen nur
     ~1,7:1 bzw. ~2,2:1 und wären dort kaum lesbar. */
  --color-fg-brand: #f2a03d;
  --color-fg-brand-strong: #f6c180;
  --color-fg-brand-soft: #d6e4f0;
  --color-border-brand: #f2a03d;
  --color-border-brand-strong: #f6c180;
  --color-border-focus: #f2a03d;

  --color-primary-600: 242 160 61;
  --color-primary-700: 246 193 128;
}

/* ---- Typografie ---- */
body,
body * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif !important;
}

h1, h2, h3 {
  letter-spacing: -0.021em;
}

.theme_light h1,
.theme_light h2 {
  color: #1f4e79;
}

/* ---- Logo: Inline-SVG ausblenden, KF-Logo einsetzen ---- */
bit-landing-header a bit-svg,
bit-nav-logo bit-svg,
app-root header a bit-svg {
  display: none !important;
}

bit-landing-header a,
app-root header > a {
  display: block !important;
  width: 200px !important;
  height: 58px !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='58'%20viewBox='0%200%20200%2058'%3E%3Ctext%20x='0'%20y='40'%20font-family='-apple-system,BlinkMacSystemFont,Segoe%20UI,Helvetica,Arial,sans-serif'%20font-size='34'%20font-weight='800'%20letter-spacing='-0.7'%20fill='%23122A42'%3Evertraut%3Ctspan%20fill='%23F2A03D'%3E.%3C/tspan%3E%3C/text%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

.theme_dark bit-landing-header a,
.theme_dark app-root header > a {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='58'%20viewBox='0%200%20200%2058'%3E%3Ctext%20x='0'%20y='40'%20font-family='-apple-system,BlinkMacSystemFont,Segoe%20UI,Helvetica,Arial,sans-serif'%20font-size='34'%20font-weight='800'%20letter-spacing='-0.7'%20fill='%23FFFFFF'%3Evertraut%3Ctspan%20fill='%23F2A03D'%3E.%3C/tspan%3E%3C/text%3E%3C/svg%3E") !important;
}

/* Ladebildschirm-Logo */
img.new-logo-themed {
  content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='58'%20viewBox='0%200%20200%2058'%3E%3Ctext%20x='0'%20y='40'%20font-family='-apple-system,BlinkMacSystemFont,Segoe%20UI,Helvetica,Arial,sans-serif'%20font-size='34'%20font-weight='800'%20letter-spacing='-0.7'%20fill='%23122A42'%3Evertraut%3Ctspan%20fill='%23F2A03D'%3E.%3C/tspan%3E%3C/text%3E%3C/svg%3E") !important;
  width: 200px !important;
  height: auto !important;
}

.theme_dark img.new-logo-themed {
  content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='58'%20viewBox='0%200%20200%2058'%3E%3Ctext%20x='0'%20y='40'%20font-family='-apple-system,BlinkMacSystemFont,Segoe%20UI,Helvetica,Arial,sans-serif'%20font-size='34'%20font-weight='800'%20letter-spacing='-0.7'%20fill='%23FFFFFF'%3Evertraut%3Ctspan%20fill='%23F2A03D'%3E.%3C/tspan%3E%3C/text%3E%3C/svg%3E") !important;
}

/* ---- Flächen ---- */
.theme_light body {
  background-color: #f5f8fb;
}

/* ---- Fußzeile der Anmeldeseiten ---- */
.layout_frontend footer,
bit-landing-footer {
  visibility: hidden;
  position: relative;
}

.layout_frontend footer::after,
bit-landing-footer::after {
  visibility: visible;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  content: "vertraut. \00a0\00b7\00a0 ein Produkt von IT-Service Karsten Fischer";
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: #86868b;
}