/* ============================================================================
   /lokale-ki/ — Research-/Einordnungsseite: Bild- und Layout-Schicht
   ----------------------------------------------------------------------------
   Fusion aus dem Archiv-Stand (vor Commit efda775, 2026-08-11) und dem
   Pivot-Text von heute: Hero-Video, Sektionsbilder und der Hell/Dunkel-Rhythmus
   kommen zurueck, der Angebots-Inhalt bleibt weg.

   Warum eine NEUE Datei statt der alten lokale-ki.css:
     1. lokale-ki.css steht in .git-ftp-ignore (Pivot-Nachzug 2026-08-11). Sie zu
        reaktivieren wuerde 553 Zeilen Angebots-CSS (Estimator, Tiers, Bundles,
        Preise) auf den Server zurueckholen — genau das, was der Pivot abgeschaltet
        hat.
     2. Ihre Regeln haengen alle am .ll-Scope, und .ll setzt --color-accent auf
        LKI-Petrol. Owner-Entscheidung 2026-08-26: die Seite bleibt auf JF-Gold.
   Diese Datei traegt deshalb KEIN .ll und KEINEN .ll-Selektor.

   Brand-Disziplin (brand_drift_check.py Schicht A):
     Der Pfad /lokale-ki/* gilt dem Gate als LKI-Flaeche. Ein roher JF-Identitaets-
     Hex (#ECBC1F, #f5cd4a, #8C6A14, #4C545C) fuehrt hier zu Exit 1 — empirisch
     verifiziert 2026-08-26. Alle Marken-Farben kommen deshalb ausschliesslich als
     var(--color-*) aus /style.css. Rohe Hex-Werte unten sind ausnahmslos
     Neutrale/Overlays, die in keiner Sub-Brand-Palette der SSoT stehen.
   ========================================================================== */

/* --- Hero-Fallback ------------------------------------------------------- */
/* Der Fallback-Hintergrund der Motion-Hero-Buehne steht im geteilten style.css und zeigte
   dort fest auf den Startseiten-Frame (poster-karten.jpg). Hier der eigene Poster —
   absoluter Pfad, weil eine url() in einer Custom Property relativ zu DIESER Datei
   aufgeloest wird. Sichtbar wird er vor dem Video-Decode und ohne JS. */
.hero--motion .mh-viewport { --mh-fallback: url('/img/poster-lki.jpg'); }

/* --- Sektion mit Bildhintergrund ----------------------------------------- */
/* Muster 1:1 aus dem Archiv (lokale-ki.css .ll-sec): Bild liegt im ::before auf
   z-index -1, der Inhalt im .container darueber. Das Overlay ist Teil desselben
   background-image-Stapels, damit Bild und Abdunklung nie auseinanderlaufen. */
.lki-sec { position: relative; isolation: isolate; }
.lki-sec > .container { position: relative; z-index: 1; }
.lki-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lki-sec--dark  { color: var(--color-white); }
.lki-sec--light { color: var(--color-bg-alt); }

/* Textschutz-Scrim. Warum er noetig ist — gemessen, nicht geschaetzt: die Motive haben
   helle Glaskanten, und wo eine davon hinter die Textspalte laeuft, faellt der Kontrast
   des Fliesstexts unter 4,5:1. Am gerenderten Bild ausgezaehlt lagen 3,1 % (#bild-video)
   bzw. 10,0 % (#gemessen) der Textspalten-Flaeche darueber. Ein dichteres Flaechen-Overlay
   haette das Motiv erledigt; dieser gerichtete Verlauf dunkelt nur die linke Haelfte ab
   (dort steht der 68ch-Text) und laesst das Bild rechts stehen.
   ::after statt ::before, damit der Scrim UEBER dem Bild liegt (gleiches z-index, spaeter
   im Stapel) und trotzdem unter dem Inhalt (.container hat z-index 1). */
.lki-sec::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.lki-sec--dark::after {
  background: linear-gradient(to right,
              rgba(19,23,27,.80) 0%, rgba(19,23,27,.78) 52%,
              rgba(19,23,27,.72) 70%, rgba(19,23,27,.34) 80%,
              rgba(19,23,27,0) 92%);
}
.lki-sec--light::after {
  background: linear-gradient(to right,
              rgba(242,239,233,.62) 0%, rgba(242,239,233,.58) 52%,
              rgba(242,239,233,.50) 70%, rgba(242,239,233,.22) 80%,
              rgba(242,239,233,0) 92%);
}
/* Auf schmalen Viewports steht der Text ueber der ganzen Breite -> Scrim ebenfalls. */
@media (max-width: 900px) {
  .lki-sec--dark::after  { background: rgba(19,23,27,.62); }
  .lki-sec--light::after { background: rgba(242,239,233,.44); }
}

/* Bildzuordnung — 5 der 7 Archiv-Motive. ku-hero-02-handover (Uebergabe an die
   IT) und ku-sec-loesung (RAG-Straenge) tragen Aussagen, die es nach dem Pivot
   nicht mehr gibt, und bleiben deshalb bewusst ungenutzt. */
#bild-video.lki-sec::before {
  background-image: linear-gradient(rgba(19,23,27,.56), rgba(19,23,27,.68)),
                    url('/lokale-ki/img/ku-hero-01-sanctuary.jpg');
}
#sprachmodelle.lki-sec::before {
  background-image: linear-gradient(rgba(242,239,233,.64), rgba(242,239,233,.74)),
                    url('/lokale-ki/img/ku-sec-ablauf.jpg');
}
#gemessen.lki-sec::before {
  background-image: linear-gradient(rgba(19,23,27,.54), rgba(19,23,27,.66)),
                    url('/lokale-ki/img/ku-sec-vertrauen.jpg');
}
#praktisch.lki-sec::before {
  background-image: linear-gradient(rgba(242,239,233,.64), rgba(242,239,233,.74)),
                    url('/lokale-ki/img/ku-sec-problem.jpg');
}
/* Quellenblock: dasselbe Motiv-Prinzip, nur stark zurueckgenommen — der Ausklang
   soll nicht mit den Inhaltssektionen konkurrieren. */
#quellen.lki-sec::before {
  background-image: linear-gradient(rgba(19,23,27,.72), rgba(19,23,27,.83)),
                    url('/lokale-ki/img/ku-hero-03-source.jpg');
}

/* Mobile-Varianten (vorhanden fuer alle fuenf genutzten Motive). */
@media (max-width: 768px) {
  #bild-video.lki-sec::before {
    background-image: linear-gradient(rgba(19,23,27,.56), rgba(19,23,27,.68)),
                      url('/lokale-ki/img/mobile/ku-hero-01-sanctuary-mobile.jpg');
  }
  #sprachmodelle.lki-sec::before {
    background-image: linear-gradient(rgba(242,239,233,.64), rgba(242,239,233,.74)),
                      url('/lokale-ki/img/mobile/ku-sec-ablauf-mobile.jpg');
  }
  #gemessen.lki-sec::before {
    background-image: linear-gradient(rgba(19,23,27,.54), rgba(19,23,27,.66)),
                      url('/lokale-ki/img/mobile/ku-sec-vertrauen-mobile.jpg');
  }
  #praktisch.lki-sec::before {
    background-image: linear-gradient(rgba(242,239,233,.64), rgba(242,239,233,.74)),
                      url('/lokale-ki/img/mobile/ku-sec-problem-mobile.jpg');
  }
  #quellen.lki-sec::before {
    background-image: linear-gradient(rgba(19,23,27,.72), rgba(19,23,27,.83)),
                      url('/lokale-ki/img/mobile/ku-hero-03-source-mobile.jpg');
  }
}

/* --- Helle Sektionen ------------------------------------------------------ */
/* Auf Beige braucht es dunkle Schrift und eine dunkle Gold-Stufe: das reine
   --color-accent (#ECBC1F) kaeme auf #F2EFE9 nur auf rund 1,6:1 und waere als
   Text-/Linkfarbe unlesbar. --color-accent-deep stammt aus der Brand-SSoT
   (jf.primary_deep) und wird in /style.css definiert — siehe Kopf dieser Datei.

   Warum nicht --color-accent-deep pur: am gerenderten Bild GEMESSEN (nicht gerechnet)
   ergibt #8C6A14 auf dem realen Untergrund dieser Sektionen 4,15-4,29:1 — unter den
   4,5:1, die WCAG AA fuer Text dieser Groesse verlangt. Der Wert wird deshalb aus
   ZWEI bestehenden Tokens abgeleitet (color-mix), nicht durch einen neu erfundenen
   Hex ersetzt: 72 % primary_deep + 28 % Ink ergibt 4,69:1 gegen den dunkelsten
   Untergrund, der unter dem Akzent tatsaechlich liegt (Label/Link/Marker stehen alle
   links, x 145-800 — dort wurde gemessen, nicht im Worst Case der ganzen Spalte). Die Zeile davor ist der Fallback fuer Browser ohne
   color-mix — dort greift der pure SSoT-Wert. */
.lki-sec--light .section__title { color: var(--color-bg-alt); }
.lki-sec--light .section__label {
  color: var(--color-accent-deep);
  color: color-mix(in srgb, var(--color-accent-deep) 72%, var(--color-bg-alt));
}
.lki-sec--light .section__intro,
.lki-sec--light .lki-prose p,
.lki-sec--light .lki-prose li { color: #3a424a; }
.lki-sec--light .lki-prose strong { color: var(--color-bg-alt); }
.lki-sec--light .lki-prose a {
  color: var(--color-accent-deep);
  color: color-mix(in srgb, var(--color-accent-deep) 72%, var(--color-bg-alt));
}
.lki-sec--light .lki-prose li::marker {
  color: var(--color-accent-deep);
  color: color-mix(in srgb, var(--color-accent-deep) 72%, var(--color-bg-alt));
}

/* Fliesstextfarbe auf den dunklen BILD-Sektionen: Weiss, nicht das sonst uebliche
   --color-text-muted. Das ist keine Stilfrage, sondern gerechnet: die Motive haben
   nahezu weisse Glaskanten. Damit #8b929a dahinter noch 4,5:1 haelt, muesste das
   Overlay ~98 % deckend sein — dann waere das Bild weg. Mit --color-text reichen
   rund 15 % Bilddurchlass in der Textspalte, und genau das leistet der Scrim oben.
   Der Archiv-Stand hatte dieselbe Regel (.ll-sec--dark { color: var(--color-white) }). */
.lki-sec--dark .lki-prose p,
.lki-sec--dark .lki-prose li { color: var(--color-text); }
.lki-sec--dark .lki-prose small { color: var(--color-text); }

/* --- Fliesstext ----------------------------------------------------------- */
/* Lesemass wie im Archiv (dort .section__intro/.ll-foundation__text mit 68ch/60ch).
   Ohne das laufen die Absaetze ueber die vollen 1200px des .container — genau der
   Zustand, den die Seite seit dem Pivot hat. */
.lki-prose { max-width: 68ch; }
.lki-prose p { line-height: 1.75; margin: 0 0 1.15rem; color: var(--color-text-muted); }
.lki-prose p:last-child { margin-bottom: 0; }
.lki-prose strong { color: var(--color-text); }
.lki-prose a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.lki-prose a:hover { color: var(--color-accent-light); }
.lki-prose ul { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.lki-prose li { line-height: 1.7; margin-bottom: 0.85rem; color: var(--color-text-muted); }
.lki-prose li::marker { color: var(--color-accent); }
.lki-prose small { color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.7; display: block; }

/* Abschluss-Zeile "Artikel · Kontakt": etwas Luft und deutlicher als Fliesstext. */
.lki-prose .lki-links { margin-top: 1.9rem; font-size: 1.02rem; }

/* --- Seiten-lokale Sprungleiste ------------------------------------------ */
/* Uebernommen aus dem Archiv (.ll-subnav), entkoppelt vom .ll-Scope. Die Seite
   ist mit den Bildsektionen wieder lang genug, dass sie einen Ueberblick braucht. */
.lki-subnav {
  position: sticky;
  top: 3.75rem;
  z-index: 900;
  background: rgba(14,16,19,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.lki-subnav__inner {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  scrollbar-width: none;
}
.lki-subnav__inner::-webkit-scrollbar { display: none; }
.lki-subnav a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.15rem 0;
  transition: color .2s;
}
.lki-subnav a:hover { color: var(--color-accent-light); }

html { scroll-padding-top: 6.5rem; }

@media (max-width: 600px) {
  .lki-subnav { top: 3.25rem; }
  html { scroll-padding-top: 5.5rem; }
}