/* ==========================================================================
   BB Versandlogistik – Custom CSS
   Design-Tokens · Fluid Typography · Komponenten · Accessibility
   Basis: 1rem = 16px (Browser-Standard)
   ==========================================================================

   Kaskade-Strategie:
   Divi liefert sein CSS "unlayered" aus – das schlägt jede @layer.
   Deshalb erhöhen wir die Spezifität gezielt über #page-container statt
   überall !important zu streuen. !important nur dort, wo Divi selbst mit
   !important (Customizer/Inline) blockt – jeweils kommentiert.
   ========================================================================== */

/* ==========================================================================
   1 · DESIGN TOKENS
   ========================================================================== */

:root {
  /* ── Farben ── */
  --color-blue:        #508fcd;   /* Marken-Blau, Akzent, Links */
  --color-blue-dark:   #3d6ea6;   /* Hover / kräftigerer Akzent */
  --color-heading:     #36393b;   /* Headlines (Markenton) */
  --color-body:        #36393b;   /* Fließtext (Markenton) */
  --color-sub:         #36393b;   /* Subheadline */
  --color-white:       #ffffff;

  /* Abgeleitete Tints */
  --color-bg-alt:      color-mix(in srgb, var(--color-blue) 6%,  white);  /* Sektionswechsel */
  --color-blue-tint:   color-mix(in srgb, var(--color-blue) 12%, white);  /* Icon-BGs, Karten */
  --color-blue-light:  #9fc6ea;   /* Eyebrow/Akzent auf dunklen Flächen */
  --color-on-dark:     rgba(255, 255, 255, 0.85);  /* Fließtext auf Dunkel */

  /* ── Fonts ── */
  --font-heading: 'Good Times', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Typo-Skala (fluid, clamp: min · bevorzugt · max) ── */
  --fs-eyebrow: clamp(0.75rem, 0.71rem + 0.20vw, 0.85rem);  /* 12 → 14 px */
  --fs-h1:      clamp(1.75rem, 1.25rem + 2.00vw, 2.50rem);  /* 28 → 40 px (Good Times läuft breit) */
  --fs-h2:      clamp(1.60rem, 1.15rem + 2.00vw, 2.50rem);  /* 26 → 40 px */
  --fs-h3:      clamp(1.20rem, 1.05rem + 0.70vw, 1.50rem);  /* 19 → 24 px */
  --fs-sub:     clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);  /* 17 → 20 px */
  --fs-body:    clamp(1.00rem, 0.97rem + 0.15vw, 1.0625rem);/* 16 → 17 px */

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.6;

  /* ── Spacing-Skala ── */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */

  /* ── Layout ── */
  --content-width: 1200px;
  --radius-sm: 0.5rem;    /*  8px */
  --radius-md: 0.875rem;  /* 14px */
  --radius-lg: 1rem;      /* 16px */

  /* ── Schatten & Motion ── */
  --shadow-box:       0 6px 18px  rgba(80, 143, 205, 0.18);
  --shadow-box-hover: 0 14px 34px rgba(80, 143, 205, 0.35);
  --transition:       0.3s ease;
}


/* ==========================================================================
   1b · EINHEITLICHER VERTIKALER RHYTHMUS
   Erste Zeile oben / letzte Zeile unten ohne Extra-Padding, damit jede
   Sektion denselben Außenabstand hat (nur das Section-Padding zählt).
   Abstände ZWISCHEN mehreren Zeilen (z. B. Jobs) bleiben erhalten.
   ========================================================================== */
#page-container .et_pb_section > .et_pb_row:first-of-type,
#page-container .et_pb_section > .et_builder_inner_content > .et_pb_row:first-of-type {
  padding-top: 0 !important;
}
#page-container .et_pb_section > .et_pb_row:last-of-type,
#page-container .et_pb_section > .et_builder_inner_content > .et_pb_row:last-of-type {
  padding-bottom: 0 !important;
}


/* ==========================================================================
   2 · SEKTIONS-TEXTEBENEN (einheitlich per Klasse)
   #page-container erhöht die Spezifität, damit wir Divi ohne !important
   überschreiben. Klassen liegen am Divi-Modul; Selektoren treffen auch
   die Überschrift/Absatz im Modul.
   ========================================================================== */

#page-container .bb-eyebrow,
#page-container .bb-eyebrow * {
  font-family: var(--font-heading) !important;   /* schlägt globale Inter-Regel (p) */
  color: var(--color-blue);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-xs);
}

/* Marken-Schrift auch auf DP „Double Color Heading" (Spans!) durchsetzen.
   !important, weil das Modul font-family (Arial) selbst setzt. */
#page-container .bb-head,
#page-container .bb-head h1,
#page-container .bb-head h2,
#page-container .bb-head h3,
#page-container .bb-head .dipl_pre_text,
#page-container .bb-head .dipl_main_text {
  font-family: var(--font-heading) !important;
}

#page-container .bb-head,
#page-container .bb-head h1,
#page-container .bb-head h2,
#page-container .bb-head h3 {
  color: var(--color-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-xs);
}

#page-container .bb-head h1 { font-size: var(--fs-h1); }
#page-container .bb-head h2 { font-size: var(--fs-h2); }
#page-container .bb-head h3 { font-size: var(--fs-h3); }

#page-container .bb-sub,
#page-container .bb-sub * {
  font-family: var(--font-body);
  color: var(--color-sub);
  font-weight: 600;
  font-size: var(--fs-sub);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-sm);
}

#page-container .bb-text,
#page-container .bb-text * {
  font-family: var(--font-body);
  color: var(--color-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}


/* ==========================================================================
   2b · MOBILE HEADLINE-SKALIERUNG
   Überschriften, die ihre Größe fest im Divi-Modul gesetzt haben (ohne
   Phone-Wert und ohne bb-head), skalieren auf dem Handy sonst nicht mit.
   Diese Regel macht ALLE H2/H3 unter 768px fluid – Desktop bleibt unberührt.
   ========================================================================== */
@media (max-width: 767px) {
  #page-container h2,
  #page-container .dipl_double_color_heading h2,
  #page-container .dipl_double_color_heading h2 span {
    font-size: clamp(1.3rem, 5vw, 1.75rem) !important;
    line-height: 1.25 !important;
  }
  #page-container h3,
  #page-container .et_pb_module_header {
    font-size: clamp(1.05rem, 4.2vw, 1.4rem) !important;
    line-height: 1.3 !important;
  }
}


/* ==========================================================================
   3 · KOMPONENTE: STAT-/KEY-FACT-BOXEN
   Hover: leicht abheben + Schatten verstärken.
   !important nötig, weil Divi den Spalten-/Box-Schatten inline setzt.
   ========================================================================== */

.bb-stat-box {
  box-shadow: var(--shadow-box) !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
}

.bb-stat-box:hover {
  box-shadow: var(--shadow-box-hover) !important;
  transform: translateY(-6px) !important;
}

/* Headline in der Stat-Box in Marken-Schrift (Good Times) */
#page-container .bb-stat-box .et_pb_module_header,
#page-container .bb-stat-box h1,
#page-container .bb-stat-box h2,
#page-container .bb-stat-box h3,
#page-container .bb-stat-box h4 {
  font-family: var(--font-heading) !important;
}


/* ==========================================================================
   4 · KOMPONENTE: BUTTONS
   Primär = gefüllt, Sekundär = Outline.
   !important, weil Divi Button-Styles mit hoher Spezifität ausliefert.
   ========================================================================== */

/* Der .et_pb_section-Vorfahre hebt die Spezifität über Divis generierte
   Button-Regel (body #page-container .et_pb_section .et_pb_button_X). */

/* Gemeinsamer Hover: leicht anheben + weicher Schatten (Pendant zu den Boxen) */
#page-container .et_pb_section a.bb-btn-primary.et_pb_button,
#page-container .et_pb_section a.bb-btn-secondary.et_pb_button {
  transition: background-color 0.25s ease, color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease !important;
}

#page-container .et_pb_section a.bb-btn-primary.et_pb_button:hover,
#page-container .et_pb_section a.bb-btn-secondary.et_pb_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(80, 143, 205, 0.35) !important;
}

/* Primär: blau (leicht transparent), weißer Rahmen; Hover = voll deckend */
#page-container .et_pb_section a.bb-btn-primary.et_pb_button {
  background-color: rgba(80, 143, 205, 0.80) !important;
  border: 2px solid var(--color-white) !important;
  color: var(--color-white) !important;
}

#page-container .et_pb_section a.bb-btn-primary.et_pb_button:hover {
  background-color: var(--color-blue) !important;   /* deckend */
}

/* Sekundär: blauer Rahmen + blaue Schrift, weiß-transparenter Hintergrund;
   Hover = kräftiger deckend (Pendant zum Primär) */
#page-container .et_pb_section a.bb-btn-secondary.et_pb_button {
  background-color: rgba(255, 255, 255, 0.60) !important;
  border: 2px solid var(--color-blue) !important;
  color: var(--color-blue) !important;
}

#page-container .et_pb_section a.bb-btn-secondary.et_pb_button:hover {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--color-blue-dark) !important;
}


/* ==========================================================================
   4b · KOMPONENTE: LEISTUNGS-CARDS (.bb-card)
   Für die kombinierbaren Leistungsbausteine. Hover wie die Stat-Boxen.
   ========================================================================== */

#page-container .bb-card {
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-blue) 18%, white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-box);
  transition: box-shadow var(--transition), transform var(--transition);
  height: 100%;
}

#page-container .bb-card:hover {
  box-shadow: var(--shadow-box-hover);
  transform: translateY(-6px);
}

/* Titel: entweder Klasse .bb-card-title ODER einfach eine Überschrift im Card-Modul */
#page-container .bb-card-title,
#page-container .bb-card-title *,
#page-container .bb-card h1,
#page-container .bb-card h2,
#page-container .bb-card h3,
#page-container .bb-card h4 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-heading);
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

/* Text: Klasse .bb-card-text ODER einfach ein Absatz im Card-Modul */
#page-container .bb-card-text,
#page-container .bb-card-text *,
#page-container .bb-card p,
#page-container .bb-card li {
  font-family: var(--font-body);
  color: var(--color-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}


/* ==========================================================================
   4c · KOMPONENTE: PROZESS-SCHRITTE (.bb-step)
   Nummerierte Schritte entlang der Wertschöpfungskette.
   ========================================================================== */

#page-container .bb-step {
  counter-increment: bb-step-counter;
  position: relative;
  padding-left: 3.25rem;
}

#page-container .bb-step::before {
  content: counter(bb-step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Zähler am umschließenden Zeilen-/Spalten-Container zurücksetzen: .bb-steps */
#page-container .bb-steps {
  counter-reset: bb-step-counter;
}


/* ==========================================================================
   5 · DUNKLE SEKTIONEN – helle Schrift (Modifier .bb-dark am Section-Modul)
   Höhere Spezifität durch die zusätzliche Klasse -> ohne !important.
   Ausnahme: DP-Heading-Spans setzen ihre Farbe selbst -> !important.
   ========================================================================== */

#page-container .bb-dark .bb-eyebrow,
#page-container .bb-dark .bb-eyebrow * {
  color: var(--color-blue-light);
}

#page-container .bb-dark .bb-head h1,
#page-container .bb-dark .bb-head h2,
#page-container .bb-dark .bb-head h3,
#page-container .bb-dark .bb-head .dipl_pre_text,
#page-container .bb-dark .bb-head .dipl_main_text {
  color: var(--color-white) !important;
}

#page-container .bb-dark .bb-sub,
#page-container .bb-dark .bb-sub * {
  color: var(--color-white);
}

#page-container .bb-dark .bb-text,
#page-container .bb-dark .bb-text * {
  color: var(--color-on-dark);
}


/* ==========================================================================
   5b · KEIN HORIZONTALER ÜBERLAUF (Tablet / Zwischenbreiten)
   Ursache: die Divi-Zeilen (.et_pb_row) haben eine feste Breite von 1200px
   und schrumpfen zwischen ~981px und 1200px Viewport nicht mit. Dadurch ragt
   der Inhalt – inkl. der Floating-Header-Grafik – über den Rand und erzeugt
   horizontales Scrollen. Fix: Zeilen im Bereich ≤1200px auf 90% Breite.
   Desktop (>1200px) bleibt unverändert (Zeile weiterhin 1200px).
   ========================================================================== */
@media (max-width: 1200px) {
  #page-container .et_pb_row:not(.et_pb_row_fullwidth) { width: 90% !important; }
}

/* Dekorativen seitlichen Überhang der Floating-Bilder sauber abschneiden */
#page-container .et_pb_section:has(.dipl_floating_image) {
  overflow-x: clip;
}


/* ==========================================================================
   5c · SEKTION MIT MARKEN-BLAU ALS HINTERGRUND (.bb-blue am Section-Modul)
   Hintergrund in Divi auf #508fcd setzen; diese Klasse macht die Schrift
   hell und die Eyebrow weiß (statt hellblau). Passender Button: .bb-btn-white.
   ========================================================================== */
#page-container .bb-blue .bb-eyebrow,
#page-container .bb-blue .bb-eyebrow * { color: var(--color-white); }

#page-container .bb-blue .bb-head h1,
#page-container .bb-blue .bb-head h2,
#page-container .bb-blue .bb-head h3,
#page-container .bb-blue .bb-head .dipl_pre_text,
#page-container .bb-blue .bb-head .dipl_main_text { color: var(--color-white) !important; }

#page-container .bb-blue .bb-sub,
#page-container .bb-blue .bb-sub * { color: var(--color-white); }

#page-container .bb-blue .bb-text,
#page-container .bb-blue .bb-text * { color: rgba(255, 255, 255, 0.9); }

/* Weißer Button für farbige/blaue Sektionen (Pendant zum Primär) */
#page-container .et_pb_section a.bb-btn-white.et_pb_button {
  background-color: var(--color-white) !important;
  border: 2px solid var(--color-white) !important;
  color: var(--color-blue) !important;
  transition: background-color 0.25s ease, color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease !important;
}
#page-container .et_pb_section a.bb-btn-white.et_pb_button:hover {
  background-color: rgba(255, 255, 255, 0.90) !important;
  color: var(--color-blue-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}


/* ==========================================================================
   5d · EIGENES ICON IN DIVIS ICON-LIST (Job-Bereich)
   Divis Icon-List nutzt ein ETmodules-Font-Zeichen (.et-pb-icon), kein Bild.
   Diese Regel blendet den Glyph aus und legt euer eigenes Icon als
   Hintergrundbild ein. So bekommst du das eigene Icon rein, ohne Supreme.
   Anwendung: den Divi-Icon-List-Modulen die Klasse .bb-joblist geben.
   Icon-URL bei Bedarf tauschen (Mediathek oder /assets/img/…).
   ========================================================================== */
#page-container .bb-joblist .et-pb-icon {
  color: transparent !important;
  width: 30px !important;
  height: 30px !important;
  background: url('/wp-content/uploads/2023/03/BB-Signet.png') no-repeat center / contain !important;
}

/* Text der Job-Liste größer (wie in der alten Supreme-Liste) */
#page-container .bb-joblist .et_pb_icon_list_text {
  font-size: 18px !important;
  line-height: 1.7 !important;
}


/* ==========================================================================
   5e · HEADER – Feinschliff + auch mobil sticky
   ========================================================================== */

/* Weicher Schatten, sobald der Header beim Scrollen fixiert wird
   (Divi ergänzt dann die Klasse .et-fixed-header) */
#main-header.et-fixed-header {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10) !important;
}

/* Nav-Links: etwas fetter, beim Hover kräftiger + Markenblau
   (aktiver Punkt ist per Theme bereits blau hervorgehoben – kein Unterstrich). */
#top-menu > li > a {
  font-weight: 600;
  transition: color 0.2s ease;
}
#top-menu > li > a:hover {
  color: var(--color-blue) !important;
  font-weight: 700;
}

/* Auch auf Mobil/Tablet sticky (Divi macht den Header dort sonst statisch).
   padding-top am Container = Header-Höhe (~90px), damit nichts überlappt. */
@media (max-width: 980px) {
  #main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important;
  }
  #page-container { padding-top: 90px !important; }
}


/* ==========================================================================
   6 · ACCESSIBILITY
   ========================================================================== */

/* Sichtbarer Fokus für Tastatur-Navigation */
#page-container a:focus-visible,
#page-container .et_pb_button:focus-visible,
#page-container button:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

/* Bewegung reduzieren, wenn der Nutzer das im System eingestellt hat */
@media (prefers-reduced-motion: reduce) {
  .bb-stat-box,
  .bb-stat-box:hover,
  #page-container .et_pb_section a.bb-btn-primary.et_pb_button:hover,
  #page-container .et_pb_section a.bb-btn-secondary.et_pb_button:hover {
    transform: none !important;
  }
}