/* ===========================================================================
   lokale-ki-berater.css — additive Styles für /lokale-ki-berater/ (BC5k, MD38).
   Wird NACH /style.css und NACH der geteilten /lokale-ki/lokale-ki.css geladen
   (LKI-Sub-Brand-Basis: Petrol #077CAA, .ll-Scope, Hell/Dunkel-Sektions-Schema,
   Hero/Card/Button/Footer-Komponenten). Diese Datei ergänzt nur berater-spezifische
   Komponenten (Rollen-Liste, Passt/Passt-nicht-Ampel, Grenzen-Zeile, Hero-Zusätze)
   + die Sektions-Hintergrundbilder dieser Seite.
   BILDER: aktuell PLATZHALTER aus /lokale-ki/img/ (LKI-Bildlinie). Echte Berater-
   Bilder (PLAN-MM-050, ~6-7 Motive) ersetzen die URLs später auf /lokale-ki-berater/img/.
   =========================================================================== */

/* Hero-Beweiszeile + Querverweise liegen jetzt geteilt in /lokale-ki/lokale-ki.css (.ll). */

/* --- A4: Rollen-Liste (Sie / Ich / Kunden-IT) --- */
.ll-berater .ll-roles { display: grid; gap: 1rem; max-width: 820px; margin: 0 auto 2rem; }
.ll-berater .ll-role {
  display: grid; gap: 0.25rem 1.25rem; padding: 1.1rem 1.4rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent); border-radius: 12px;
}
@media (min-width: 640px) { .ll-berater .ll-role { grid-template-columns: 13rem 1fr; align-items: baseline; } }
.ll-berater .ll-role__who { font-family: var(--font-heading); font-style: italic; font-weight: 600; color: var(--color-accent-light); }
.ll-berater .ll-role__what { color: var(--color-text-muted); line-height: 1.55; }

/* --- A6: Passt / Passt-nicht (Ampel, 2 Spalten) --- */
.ll-berater .ll-fit { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ll-berater .ll-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ll-berater .ll-fit__col {
  min-width: 0; padding: 1.75rem 1.6rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px;
}
.ll-berater .ll-fit__col--yes { border-left: 4px solid #3a9d5c; }
.ll-berater .ll-fit__col--no  { border-left: 4px solid #c2643a; }
.ll-berater .ll-fit__title { font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: 1.25rem; color: var(--color-white); margin: 0 0 1rem; }
.ll-berater .ll-fit__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.ll-berater .ll-fit__list li { position: relative; padding-left: 1.6rem; color: var(--color-text-muted); line-height: 1.5; font-size: 0.95rem; }
.ll-berater .ll-fit__col--yes li::before { content: '✓'; position: absolute; left: 0; color: #3a9d5c; font-weight: 700; }
.ll-berater .ll-fit__col--no  li::before { content: '✕'; position: absolute; left: 0; color: #c2643a; font-weight: 700; }

/* --- Berater-Schaubilder (inline-SVG, USCRX-2026-4387): Reifegrad-Rampe / Rollen / RAG-Demo --- */
.ll-berater .ll-schaubild { display: block; width: 100%; max-width: 1100px; margin: 2.5rem auto 0; }
.ll-berater .ll-schaubild svg { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }

/* --- A7: Grenzen-Zeile --- */
.ll-berater .ll-limits {
  max-width: 820px; margin: 0 auto; text-align: center;
  font-family: var(--font-heading); font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.7;
  color: var(--color-white);
}

/* Helle Sektionen: berater-spezifische Komponenten auf Charcoal/Creme abstimmen */
.ll-berater .ll-sec--light .ll-role { background: rgba(255,255,255,.74); border-color: rgba(19,23,27,.12); border-left-color: #066089; }
.ll-berater .ll-sec--light .ll-role__who { color: #066089; }
.ll-berater .ll-sec--light .ll-role__what { color: #3a424a; }
.ll-berater .ll-sec--light .ll-fit__col { background: rgba(255,255,255,.74); border-color: rgba(19,23,27,.12); }
.ll-berater .ll-sec--light .ll-fit__title { color: #1d2228; }
.ll-berater .ll-sec--light .ll-fit__list li { color: #3a424a; }

/* === Hero-Slider (3 Bilder, USCRX-4386) + Sektions-Hintergrundbilder (echte LKI-Petrol-Serie).
   Rotation der Slides + Slogans/Sublines macht das globale /script.js (greift bei heroSlides > 1). === */
.ll-berater .hero__slide { background-size: cover; background-position: center; }
.ll-berater .hero__slide--1 { background-image: linear-gradient(rgba(19,23,27,.42), rgba(19,23,27,.72)), url('/lokale-ki-berater/img/be-hero-01-workshop.jpg'); }
.ll-berater .hero__slide--2 { background-image: linear-gradient(rgba(19,23,27,.42), rgba(19,23,27,.72)), url('/lokale-ki-berater/img/be-hero-02-mandate.jpg'); }
.ll-berater .hero__slide--3 { background-image: linear-gradient(rgba(19,23,27,.42), rgba(19,23,27,.72)), url('/lokale-ki-berater/img/be-hero-03-pilot.jpg'); }

.ll-berater #positionierung.ll-sec::before { background-image: linear-gradient(rgba(19,23,27,.66), rgba(19,23,27,.78)),  url('/lokale-ki-berater/img/be-hero-02-mandate.jpg'); }
.ll-berater #situation.ll-sec::before { background-image: linear-gradient(rgba(242,239,233,.74), rgba(242,239,233,.8)), url('/lokale-ki-berater/img/be-sec-rag-demo.jpg'); }
.ll-berater #angebot.ll-sec::before   { background-image: linear-gradient(rgba(19,23,27,.62), rgba(19,23,27,.74)),  url('/lokale-ki-berater/img/be-hero-03-pilot.jpg'); }
.ll-berater #rollen.ll-sec::before    { background-image: linear-gradient(rgba(242,239,233,.74), rgba(242,239,233,.8)), url('/lokale-ki-berater/img/be-sec-rollen.jpg'); }
.ll-berater #wege.ll-sec::before      { background-image: linear-gradient(rgba(19,23,27,.62), rgba(19,23,27,.74)),  url('/lokale-ki-berater/img/be-sec-rampe.jpg'); }
.ll-berater #passt.ll-sec::before     { background-image: linear-gradient(rgba(242,239,233,.74), rgba(242,239,233,.8)), url('/lokale-ki-berater/img/be-sec-rag-demo.jpg'); }
.ll-berater #grenzen.ll-sec::before   { background-image: linear-gradient(rgba(19,23,27,.62), rgba(19,23,27,.74)),  url('/lokale-ki-berater/img/be-hero-02-mandate.jpg'); }
.ll-berater #andere.ll-sec::before    { background-image: linear-gradient(rgba(242,239,233,.74), rgba(242,239,233,.8)), url('/lokale-ki-berater/img/be-sec-rollen.jpg'); }
.ll-berater #kontakt.ll-sec::before   { background-image: linear-gradient(rgba(19,23,27,.62), rgba(19,23,27,.74)),  url('/lokale-ki-berater/img/be-hero-01-workshop.jpg'); }

/* Mobile-Crops (4:5) fuer die Hero-Slides */
@media (max-width: 768px) {
  .ll-berater .hero__slide--1 { background-image: linear-gradient(rgba(19,23,27,.42), rgba(19,23,27,.72)), url('/lokale-ki-berater/img/mobile/be-hero-01-workshop-mobile.jpg'); }
  .ll-berater .hero__slide--2 { background-image: linear-gradient(rgba(19,23,27,.42), rgba(19,23,27,.72)), url('/lokale-ki-berater/img/mobile/be-hero-02-mandate-mobile.jpg'); }
  .ll-berater .hero__slide--3 { background-image: linear-gradient(rgba(19,23,27,.42), rgba(19,23,27,.72)), url('/lokale-ki-berater/img/mobile/be-hero-03-pilot-mobile.jpg'); }
}