/*!
 * ibo Experience Lab – Design Tokens
 * Abgeleitet aus dem Live-CSS von www.ibo.de (TYPO3 bootstrap_package, Stand 10/2026).
 * Alle Werte als CSS Custom Properties mit Präfix --ibo-, damit sie neben
 * Bootstrap 3/5 (--bs-*) konfliktfrei existieren können.
 */

/* ------------------------------------------------------------------
   Schrift
   Original: "DIN Next LT W01" (Monotype-Lizenz, an ibo.de gebunden).
   Ersatz:   Barlow (SIL Open Font License 1.1), lokal eingebunden.
   In TYPO3 kann --ibo-font-* wieder auf die lizenzierte DIN Next zeigen.
   @font-face-Regeln: siehe ibo-fonts.css (Base64, file://-sicher).
------------------------------------------------------------------ */

:root {
  /* Markenfarben (ibo.de: .frame-background-ibo-*, .btn-ibo-*) */
  --ibo-red: #e40134;
  --ibo-red-hover: #c2012c;
  --ibo-red-active: #b6012a;
  --ibo-red-soft: #fde6eb;
  --ibo-orange: #ea5a0b;
  --ibo-fuchsia: #bf077f;
  --ibo-violet: #811f80;
  --ibo-violet-hover: #6e1a6d;
  --ibo-petrol: #375460;
  --ibo-petrol-hover: #2f4752;
  --ibo-light: #e7ecf0;
  --ibo-light-2: #f3f5f7;
  --ibo-grey: #eaebec;
  --ibo-line: #d5dde3;
  --ibo-meta: #212121;
  --ibo-white: #ffffff;

  /* Statusfarben – nach den Status-Kacheln der ibo-Software (Workflow-Monitoring) */
  --ibo-status-ok: #46a12c;
  --ibo-status-warn: #f5b400;
  --ibo-status-error: #e40134;
  --ibo-status-neutral: #8a9ba4;

  /* Semantische Rollen */
  --ibo-text: var(--ibo-petrol);
  --ibo-text-muted: #5f7884;
  --ibo-heading: var(--ibo-red);
  --ibo-link: var(--ibo-red);
  --ibo-link-hover: var(--ibo-red-active);
  --ibo-surface: var(--ibo-white);
  --ibo-surface-alt: var(--ibo-light);
  --ibo-nav-highlight: var(--ibo-orange); /* Original: --mainnavigation-hightlight #ea5a0b @ 50 % */
  --ibo-focus: #1a73c9;

  /* Typografie */
  --ibo-font-sans: "Barlow", "DIN Next LT W01 Regular", "Helvetica Neue", Arial, sans-serif;
  --ibo-font-light: "Barlow", "DIN Next LT W01 Light", "Helvetica Neue", Arial, sans-serif;
  --ibo-weight-ultralight: 200;
  --ibo-weight-light: 300;
  --ibo-weight-regular: 400;
  --ibo-weight-medium: 500;
  --ibo-weight-bold: 600;
  --ibo-fs-base: 1rem;
  --ibo-fs-sm: .875rem;
  --ibo-fs-xs: .8125rem;
  --ibo-lh-base: 1.5;
  --ibo-fs-h1: clamp(1.75rem, 1.375rem + 1.5vw, 2.5rem);
  --ibo-fs-h2: clamp(1.5rem, 1.34rem + 1.125vw, 2.1875rem);
  --ibo-fs-h3: clamp(1.3rem, 1.31rem + .75vw, 1.875rem);
  --ibo-fs-h4: clamp(1.2rem, 1.28rem + .375vw, 1.5625rem);
  --ibo-fs-h5: 1.25rem;

  /* Layout (Bootstrap-Containerbreiten von ibo.de) */
  --ibo-gutter: 40px;
  --ibo-container-sm: 540px;
  --ibo-container-md: 720px;
  --ibo-container-lg: 960px;
  --ibo-container-xl: 1140px;
  --ibo-container-xxl: 1320px;
  --ibo-header-h: 70px;

  /* Abstände */
  --ibo-space-1: .25rem;
  --ibo-space-2: .5rem;
  --ibo-space-3: .75rem;
  --ibo-space-4: 1rem;
  --ibo-space-5: 1.5rem;
  --ibo-space-6: 2rem;
  --ibo-space-7: 3rem;
  --ibo-space-8: 4rem;
  --ibo-section-y: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);

  /* Formen */
  --ibo-radius: 0;
  --ibo-radius-sm: 2px;
  --ibo-shadow-1: 0 1px 2px rgba(55, 84, 96, .08), 0 2px 8px rgba(55, 84, 96, .06);
  --ibo-shadow-2: 0 6px 24px rgba(55, 84, 96, .14);

  /* Motion – zurückhaltend; per prefers-reduced-motion abgeschaltet */
  --ibo-ease: cubic-bezier(.22, .61, .36, 1);
  --ibo-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ibo-dur-1: 150ms;
  --ibo-dur-2: 280ms;
  --ibo-dur-3: 520ms;
}

@media (min-width: 768px)  { :root { --ibo-header-h: 100px; } }
@media (min-width: 1200px) { :root { --ibo-header-h: 130px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --ibo-dur-1: 0ms; --ibo-dur-2: 0ms; --ibo-dur-3: 0ms; }
}