/* ===========================================================================
   produkte.css — LKI Erklär-/Skill-Seiten unter /lokale-ki/produkte/ (USCRX-2026-4788,
   Content-Pass 4660). Hub #0 + Erklär-Strecke #1–#5 + Skill-Template #T.
   Wird NACH style.css + lokale-ki.css geladen (nutzt LKI-Petrol #077CAA via body.ll).
   Zielgruppe kunde, jf-business/Sie, BC5k. KEIN GX/NP.

   LESBARKEITS-PRINZIP (nach dem /lokale-ki/box-stufen/-Kontrast-Bug): Sektion-Bilder liegen
   IMMER unter einem dunklen Gradient-Overlay mit WEISSEM Text — nie dunkler Text auf
   Bild/Dunkel. Content-Bereiche sind dunkel (color-bg/bg-alt), Text hell.
   =========================================================================== */

/* --- Hero mit Sektion-Bild + dunklem Overlay (immer hell lesbar) --- */
.pk-hero {
  position: relative; padding: calc(var(--nav-height, 80px) + 4rem) 0 3.5rem;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-bottom: 1px solid var(--color-border);
}
.pk-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(rgba(19,23,27,.50), rgba(19,23,27,.84));
}
.pk-hero > .container { position: relative; z-index: 1; }
.pk-hero__eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600;
  color: var(--color-accent-light); margin-bottom: 1rem;
}
.pk-hero__h1 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.0; letter-spacing: 0.01em;
  color: var(--color-white); margin: 0 0 1.1rem; max-width: 20ch; text-wrap: balance;
}
.pk-hero__lead {
  max-width: 60ch; color: rgba(254,254,254,.88); font-size: 1.1rem; line-height: 1.7;
}
.pk-hero__badge {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1.1rem;
  background: rgba(7,124,170,.16); border: 1px solid var(--color-accent, #077CAA);
  color: #3AAFD9; font-size: 0.82rem; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 999px;
}
.pk-hero__badge::before { content: '⏳'; font-size: 0.85rem; }

/* --- Content-Sektionen (dunkel, immer heller Text) --- */
.pk-sec { position: relative; padding: 3.5rem 0; background: var(--color-bg); border-top: 1px solid var(--color-border); }
.pk-sec--alt { background: var(--color-bg-alt); }

/* Seiten-Hintergrundbild (1 Motiv je Seite via --pk-page-img im body.pk-page) hinter ALLEN
   Content-Sektionen — nicht nur dem Hero (USCRX-2026-4788/Bild-Wunsch). Ruhiger fixed-Layer
   (Parallax): die ganze Seite wirkt bebildert. Starker dunkler Overlay haelt weissen Text
   lesbar; .pk-sec--alt minimal anders fuer Tiefe. Hero behaelt sein eigenes background-image. */
.pk-page .pk-sec::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(19,23,27,.83), rgba(19,23,27,.90)), var(--pk-page-img, none);
  background-size: cover; background-position: center; background-attachment: fixed;
}
.pk-page .pk-sec--alt::before {
  background-image: linear-gradient(rgba(23,28,34,.88), rgba(23,28,34,.94)), var(--pk-page-img, none);
}
.pk-page .pk-sec > .container { position: relative; z-index: 1; }
@media (max-width: 768px) { .pk-page .pk-sec::before { background-attachment: scroll; } }
.pk-prose { max-width: 70ch; margin: 0 auto; }
.pk-prose--wide { max-width: 80ch; }
.pk-h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem); color: var(--color-white); line-height: 1.05; margin: 0 0 1.1rem;
}
.pk-sec__lead { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; }
.pk-p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 1rem; }
.pk-p strong, .pk-li strong { color: var(--color-white); }

/* --- Nummerierte Schritte (Ablauf) --- */
.pk-steps { list-style: none; counter-reset: pk; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.9rem; }
.pk-step {
  counter-increment: pk; position: relative; padding: 1.1rem 1.25rem 1.1rem 3.6rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
  color: var(--color-text-muted); line-height: 1.6;
}
.pk-step::before {
  content: counter(pk); position: absolute; left: 1rem; top: 1.05rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg); font-weight: 700; border-radius: 50%; font-size: 0.95rem;
}
.pk-step strong { color: var(--color-white); display: block; margin-bottom: 0.15rem; }

/* --- Karten-Grid (Erklär-Punkte / Geht–Geht-nicht) --- */
.pk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin: 1.5rem 0; }
.pk-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
  padding: 1.4rem 1.3rem; border-top: 3px solid var(--color-accent);
}
.pk-card--muted { border-top-color: var(--color-text-muted); }
.pk-card__h { color: var(--color-white); font-weight: 700; font-family: var(--font-heading); margin-bottom: 0.5rem; font-size: 1.05rem; }
.pk-card__t { color: var(--color-text-muted); line-height: 1.6; font-size: 0.95rem; }

/* --- Skill-Kacheln (Hub) --- */
.pk-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin: 1.5rem 0; }
.pk-skill {
  display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
  padding: 1.4rem 1.3rem; transition: border-color .15s, transform .15s;
}
.pk-skill:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.pk-skill__h { color: var(--color-white); font-weight: 700; font-size: 1.1rem; }
.pk-skill__t { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.5; }
.pk-skill__more { color: var(--color-accent-light); font-size: 0.88rem; font-weight: 600; margin-top: auto; }
.pk-skill--soon { opacity: .85; }
.pk-skill--soon .pk-skill__more { color: #3AAFD9; }

/* --- Inline-Badge "in Vorbereitung" (Kacheln/Listen) --- */
.pk-tag-soon {
  display: inline-block; background: rgba(7,124,170,.16); color: #3AAFD9;
  border: 1px solid rgba(7,124,170,.5); font-size: 0.72rem; font-weight: 700;
  padding: 0.16rem 0.55rem; border-radius: 999px; vertical-align: middle; margin-left: 0.4rem;
}

/* --- Callout / Hinweis-Box (§201, Grenzen, Förderung) --- */
.pk-callout {
  margin: 1.5rem 0; padding: 1.1rem 1.3rem; border-left: 3px solid var(--color-accent);
  background: var(--color-accent-glow); border-radius: 4px;
  color: var(--color-text-muted); line-height: 1.65; font-size: 0.96rem;
}
.pk-callout strong { color: var(--color-accent-light); }
.pk-callout--warn { border-left-color: var(--color-accent, #077CAA); background: rgba(7,124,170,.1); }
.pk-callout--warn strong { color: #3AAFD9; }

/* --- Definitionsliste (Skill-Template, geht/geht-nicht) --- */
.pk-dl { margin: 1.5rem 0; display: grid; gap: 0; }
.pk-dl > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--color-border); }
.pk-dl > div:last-child { border-bottom: 1px solid var(--color-border); }
.pk-dl dt { color: var(--color-accent-light); font-weight: 700; font-size: 0.92rem; }
.pk-dl dd { color: var(--color-text-muted); margin: 0; line-height: 1.6; }
.pk-dl dd strong { color: var(--color-white); }

/* --- Strecke-Navigation (Weiter / Zurück) --- */
.pk-nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 2.5rem; }
.pk-next {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  background: var(--color-accent); color: var(--color-bg); font-weight: 700;
  padding: 0.8rem 1.5rem; border-radius: 999px; transition: background .15s;
}
.pk-next:hover { background: var(--color-accent-light); }
.pk-back { color: var(--color-text-muted); text-decoration: none; font-size: 0.92rem; }
.pk-back:hover { color: var(--color-white); }

/* --- Cross-Link zur Tier-Matrix /lokale-ki/box-stufen/ --- */
.pk-crosslink {
  display: block; margin: 1.5rem 0; padding: 1.3rem 1.5rem; text-decoration: none;
  background: var(--color-bg-alt); border: 1px solid var(--color-accent); border-radius: 12px;
  color: var(--color-text-muted); line-height: 1.5;
}
.pk-crosslink strong { color: var(--color-accent-light); display: block; font-size: 1.05rem; margin-bottom: 0.25rem; }
.pk-crosslink:hover { background: var(--color-surface); }

/* --- CTA-Block --- */
.pk-cta { text-align: center; max-width: 56ch; margin: 0 auto; }
.pk-cta__h { font-family: var(--font-display); font-style: italic; color: var(--color-white); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; margin-bottom: 0.9rem; }
.pk-cta__t { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 1.6rem; }
.pk-cta__sub { margin-top: 1.2rem; font-size: 0.92rem; color: var(--color-text-muted); }
.pk-cta__sub a { color: var(--color-accent-light); }

@media (max-width: 560px) {
  .pk-dl > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .pk-dl dt { font-size: 0.85rem; }
}