/* USP- & Conversion-Layer — geteiltes Bau-Element für die 5 Kern-Seiten
   (index, ki-beratung, ki-dienste, ki-loesungen, ueber-uns).
   Nutzt die --saa-*-Tokens aus styles.css. Alle Flächen sind bewusst HELL,
   damit die globale !important-Ink-Härtung aus styles.css keine unlesbaren
   Texte erzeugt; nur Akzent-/Muted-Farben werden per main.saa-usp-scope
   reasserted. Scope-Marker: <main class="… saa-usp-scope">. */

/* ---------- Warum-wir-Strip ---------- */
.saa-why {
  padding: clamp(52px, 6.5vw, 84px) 0;
  background: var(--saa-bg, #f7f9fb);
}
.saa-why__inner {
  width: min(1160px, calc(100% - clamp(20px, 6vw, 96px)));
  margin-inline: auto;
}
.saa-why__head { max-width: 660px; margin-bottom: clamp(26px, 3vw, 40px); }
.saa-why__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--saa-red, #d91e18);
  margin-bottom: 12px;
}
.saa-why__head h2 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  color: var(--saa-text, #191c1e);
  margin: 0;
}
.saa-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.saa-why__item {
  background: var(--saa-surface, #fff);
  border: 1px solid var(--saa-border, #e2e8f0);
  border-radius: 16px;
  padding: clamp(22px, 2.4vw, 30px);
}
.saa-why__item > .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(217, 30, 24, .09);
  color: var(--saa-red, #d91e18);
  font-size: 26px;
  margin-bottom: 16px;
}
.saa-why__item h3 {
  font-family: "Inter", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--saa-text, #191c1e);
  margin: 0 0 8px;
}
.saa-why__item p {
  font-size: 15px;
  line-height: 1.58;
  color: var(--saa-text-muted, #5d6673);
  margin: 0;
}

/* ---------- Ansprechpartner-Element ---------- */
.saa-contact-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--saa-surface, #fff);
  border: 1px solid var(--saa-border, #e2e8f0);
  border-radius: 14px;
}
.saa-contact-person > .material-symbols-outlined {
  font-size: 30px;
  color: var(--saa-red, #d91e18);
  flex: 0 0 auto;
}
.saa-contact-person__name { font-weight: 500; color: var(--saa-text, #191c1e); }
.saa-contact-person__role { display: block; font-size: 14px; color: var(--saa-text-muted, #5d6673); }

/* ---------- CTA-Gruppe (Sekundär-Link an Nicht-Hero-CTAs) ---------- */
.saa-cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.saa-cta-group__secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--saa-red, #d91e18);
  text-decoration: none;
}
.saa-cta-group__secondary:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .saa-why__grid { grid-template-columns: 1fr; }
}

/* ---------- Overrides gegen die globale !important-Härtung aus styles.css ----------
   Die Härtung (~Spez. 0,3,2) existiert je nach Seite unter .home-page ODER
   body.page-shell und erzwingt Sektions-Hintergrund = surface sowie
   Überschriften/Spans = Ink. Body-Klassen-agnostisch lösen: eine am Ziel
   verdoppelte Klasse hebt die Spezifität auf 0,3,3+ und schlägt beide Varianten.
   Flächen bleiben hell, daher wird erzwungenes Ink für Text bewusst zugelassen;
   nur Hintergründe und Akzentfarben (rot) werden zurückgeholt. */

/* Sektions-Hintergründe zurückholen */
html body main.saa-usp-scope .saa-why.saa-why { background: var(--saa-bg, #f7f9fb) !important; }

/* Akzentfarben (rot) zurückholen */
html body main.saa-usp-scope .saa-why__eyebrow.saa-why__eyebrow,
html body main.saa-usp-scope .saa-cta-group__secondary.saa-cta-group__secondary { color: var(--saa-red, #d91e18) !important; }
html body main.saa-usp-scope .saa-why__item > .material-symbols-outlined.material-symbols-outlined,
html body main.saa-usp-scope .saa-contact-person > .material-symbols-outlined.material-symbols-outlined { color: var(--saa-red, #d91e18) !important; }

/* Muted-Text auf hellem Grund */
html body main.saa-usp-scope .saa-why__item.saa-why__item p,
html body main.saa-usp-scope .saa-contact-person .saa-contact-person__role { color: var(--saa-text-muted, #5d6673) !important; }

/* ---------- Hero-Typewriter ----------  VERSCHOBEN 2026-07-15 -> css/hero-unify.css
   Der Cursor und die Layout-Stabilität des rotierenden Wortes sind
   Hero-Darstellung und gehören damit in den Hero-Contract (hero-unify.css,
   Block 12) — diese Datei lädt vor hero-unify und ist nicht auf allen
   Hero-Seiten eingebunden (6 von 9). Regel und Prüfung: SAIG-v3-intern/HERO.md,
   check_hero.py. */