/* Leistungsfarben — jede Leistung hat einen eigenen, gedämpften Ton (seit 29.09.2026).
   Regeln im Brandguide, Abschnitt „Leistungsfarben". Die Töne stammen aus der Landkarte
   der Orchestrierung und den Agenten-Kacheln.

   Eingesetzt nur als Linie, Beschriftung, Schein und Punkt — nie als Fläche, nie auf Knöpfen,
   nie für Fließtext. Knöpfe bleiben weiß. */

:root {
  --ton-cockpit: 127, 182, 214;        /* Blau      #7fb6d6 */
  --ton-orchestrierung: 217, 155, 78;  /* Bernstein #d99b4e */
  --ton-agenten: 167, 139, 250;        /* Violett   #a78bfa */
  --ton-schulung: 142, 189, 156;       /* Salbei    #8ebd9c */
}

/* Welche Stelle welchen Ton trägt */
:is(.lst-card[href="ki-cockpits.html"], .weitere-karte[href="ki-cockpits.html"], #ki-cockpits, .nav-panel a[href="ki-cockpits.html"]) { --ton: var(--ton-cockpit); }
:is(.lst-card[href="ki-orchestrierung.html"], .weitere-karte[href="ki-orchestrierung.html"], #ki-orchestrierung, .nav-panel a[href="ki-orchestrierung.html"]) { --ton: var(--ton-orchestrierung); }
:is(.lst-card[href="ki-agenten.html"], .weitere-karte[href="ki-agenten.html"], #ki-agenten, .nav-panel a[href="ki-agenten.html"]) { --ton: var(--ton-agenten); }
:is(.lst-card[href="ki-kompetenz-schulung.html"], .weitere-karte[href="ki-kompetenz-schulung.html"], #ki-kompetenz, .nav-panel a[href="ki-kompetenz-schulung.html"]) { --ton: var(--ton-schulung); }

/* ---------- Leistungskarten auf der Startseite ---------- */
.lst-card {
  position: relative;
  background:
    radial-gradient(ellipse 90% 70% at 0% 100%, rgba(var(--ton), .09), transparent 65%),
    rgba(255, 255, 255, .025);
}
.lst-card::before {          /* Kennlinie oben */
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; z-index: 2;
  background: linear-gradient(90deg, rgb(var(--ton)), rgba(var(--ton), .15));
}
.lst-card:hover { border-color: rgba(var(--ton), .5); }
.lst-kicker { color: rgb(var(--ton)); }
.lst-mehr .arrow { color: rgb(var(--ton)); }
.lst-bild { position: relative; }
.lst-bild::after {            /* leichter Farbschleier über dem Vorschaubild */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--ton), .16), transparent 55%);
}
.lst-card--haupt .lst-bild::after {
  background: linear-gradient(to right, rgba(var(--ton), .14), transparent 45%);
}

/* ---------- Leistungsseiten ---------- */
.page-first .section-head .section-eyebrow { color: rgb(var(--ton)); }
.page-first .section-head .section-eyebrow::before { background: rgb(var(--ton)); }
.page-first .section-head :is(h1, h2) .serif { color: rgb(var(--ton)); }
.page-first .brotkrumen [aria-current="page"] { color: rgb(var(--ton)); }
.page-first::before {         /* leiser Schein hinter der Überschrift */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 620px; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 12% 0%, rgba(var(--ton), .15), transparent 70%);
}
.page-first > .container { position: relative; }
.page-first .capability-grid article { border-top: 2px solid rgba(var(--ton), .55); }
.page-first .capability-grid article > span { color: rgb(var(--ton)); }

/* ---------- Weitere Leistungen ---------- */
.weitere-karte { position: relative; }
.weitere-karte span:first-child { color: rgb(var(--ton)); }
.weitere-karte .arrow { color: rgb(var(--ton)); }
.weitere-karte:hover { border-color: rgba(var(--ton), .5); }
.weitere-karte::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px;
  background: rgb(var(--ton));
}

/* ---------- Navigation: Farbpunkt je Leistung ---------- */
.nav-panel a:is([href="ki-cockpits.html"], [href="ki-orchestrierung.html"], [href="ki-agenten.html"], [href="ki-kompetenz-schulung.html"]) strong::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--ton)); margin-right: 9px; vertical-align: 1px;
}

/* Aktive Seite: statt des weißen Punkts dahinter wird der Farbpunkt davor etwas größer */
.nav-panel a[aria-current="page"] strong::after { display: none; }
.nav-panel a[aria-current="page"] strong::before { width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(var(--ton), .22); }