/* ==========================================================================
   All.in People & Culture — Seitenspezifische Styles: fuer-unternehmen.html
   Nur Layoutbloecke, fuer die das gemeinsame Design-System keine fertige
   Komponente bereitstellt (Single-B2B-Hero, Feature-Check-Liste,
   CTA-Banner-Innenleben). Verwendet ausschliesslich bestehende Tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   B2B-Hero (Single, mit hellem Gold-Overlay aus .pw-hero-overlay)
   -------------------------------------------------------------------------- */
.pw-hero-b2b {
  max-width: 720px;
  color: var(--pw-text-on-gold);
}

.pw-hero-b2b .pw-hero-headline {
  color: var(--pw-text-on-gold);
  margin-bottom: var(--pw-space-6);
}

.pw-hero-b2b .pw-section-header__eyebrow {
  color: var(--pw-primary-800);
}

.pw-hero-b2b__subtext {
  font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed);
  color: var(--pw-neutral-800);
  margin-bottom: var(--pw-space-8);
  max-width: 56ch;
}

.pw-hero-b2b__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-4);
}

/* Hinweis: .pw-btn--on-dark ist zentral in components.css definiert
   (Section BUTTON VARIANTS), da mehrere Seiten sie nutzen. */

/* --------------------------------------------------------------------------
   Feature-Check-Liste (Leistungsmodul-Akkordeon)
   -------------------------------------------------------------------------- */
.pw-feature-list {
  list-style: none;
  margin: var(--pw-space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--pw-space-3);
}

.pw-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--pw-space-3);
  font-size: var(--pw-text-base);
  color: var(--pw-neutral-800);
  line-height: var(--pw-leading-normal);
}

.pw-feature-list__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--pw-primary-700);
}

/* Label innerhalb des Accordion-Summary (Icon + Text) */
.pw-accordion__summary-label {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-3);
}
.pw-accordion__summary-label .pw-icon {
  width: 24px;
  height: 24px;
  color: var(--pw-primary-700);
  flex-shrink: 0;
}
.pw-accordion__item[open] summary .pw-accordion__summary-label .pw-icon {
  color: var(--pw-primary-700);
}

/* Hinweis: Alle .pw-cta-banner__* Sub-Element-Stile sind zentral in
   components.css definiert (Section CTA-BANNER), da index.html,
   fuer-unternehmen.html und ueber-uns.html sie gemeinsam nutzen. */