/* Gemeinsame Gestaltung aller SEO-Landingpages (Rollen, Zertifikate, Kompetenzen,
   Zielgruppen, Rollenwechsel). Baut auf alpasana-design.css auf; hier stehen nur
   die Bausteine, die es ausserhalb des Assessments braucht. */

.lp-wrap { max-width: 820px; margin: 0 auto; padding: 6px 20px 24px; }
.lp-wrap.lp-wide { max-width: 1040px; }
.lp-crumb { font-size: .82rem; color: #A0AEC0; margin: 0 0 14px; }
.lp-crumb a { color: #718096; }
.lp-kicker { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--alp-blue, #4c6ef5); margin-bottom: 8px; }
.lp-wrap h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 14px; }
.lp-lead { font-size: 1.12rem; line-height: 1.7; color: var(--alp-muted, #5a6472); margin: 0 0 22px; }
.lp-wrap h2 { font-size: 1.3rem; margin: 34px 0 12px; }
.lp-wrap h3 { font-size: 1.02rem; margin: 0 0 8px; }
.lp-wrap p { line-height: 1.8; margin: 0 0 14px; }
.lp-wrap li { line-height: 1.7; margin: 0 0 6px; }

/* Hervorgehobene Kurzantwort – für Suchmaschinen und KI-Antworten die Kernaussage */
.lp-answer { background: #f2f7ff; border-left: 4px solid var(--alp-blue, #4c6ef5);
  border-radius: 0 10px 10px 0; padding: 16px 18px; margin: 0 0 22px; font-size: 1.02rem; line-height: 1.7; }
.lp-answer strong { color: #0b2545; }

.lp-cta { background: #0b2545; color: #fff; border-radius: 14px; padding: 24px 26px; margin: 26px 0; }
.lp-cta p { margin: 0 0 16px; color: rgba(255,255,255,.9); }

/* Kompetenz-Balken (Soll-Niveau) */
.lp-bars { display: grid; gap: 9px; margin: 6px 0 8px; }
.lp-bar { display: grid; grid-template-columns: 190px 1fr 62px; align-items: center; gap: 12px; font-size: .92rem; }
.lp-bar .lp-track { background: #edf0f4; border-radius: 6px; height: 12px; overflow: hidden; }
.lp-bar .lp-fill { height: 100%; background: var(--alp-blue, #4c6ef5); border-radius: 6px; }
.lp-bar.lp-critical .lp-fill { background: #1c7c54; }
.lp-bar .lp-val { font-size: .82rem; color: #718096; text-align: right; }
.lp-note { font-size: .85rem; color: #8a929e; margin-top: 6px; }

/* Zwei Spalten: passt / passt nicht */
.lp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 6px 0 8px; }
@media (max-width: 640px) { .lp-cols { grid-template-columns: 1fr; } }
.lp-yes, .lp-no { padding-left: 0; }
.lp-yes li, .lp-no li { list-style: none; position: relative; padding-left: 24px; }
.lp-yes li::before { content: "✓"; position: absolute; left: 0; color: #1c7c54; font-weight: 700; }
.lp-no li::before { content: "–"; position: absolute; left: 0; color: #b0453c; font-weight: 700; }

/* Faktentabelle (Zertifikate: Aufwand, Kosten, Gültigkeit …) */
.lp-facts { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: .95rem; }
.lp-facts th, .lp-facts td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #e6e8ec; vertical-align: top; }
.lp-facts th { width: 210px; color: #5a6472; font-weight: 600; }

/* Karten-Listen (Hubs) */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 10px 0 8px; }
.lp-card { display: block; background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 16px 18px;
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.lp-card:hover { border-color: var(--alp-blue, #4c6ef5); transform: translateY(-1px); }
.lp-card strong { display: block; color: #0b2545; margin-bottom: 4px; }
.lp-card span { font-size: .88rem; color: #5a6472; line-height: 1.6; }

/* Pillen für interne Verlinkung */
.lp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lp-pills a { display: inline-block; background: #f2f4f7; border: 1px solid #e6e8ec; border-radius: 999px;
  padding: 6px 14px; font-size: .9rem; color: #334; text-decoration: none; }
.lp-pills a:hover { border-color: var(--alp-blue, #4c6ef5); }

.lp-faq details { border-top: 1px solid #e6e8ec; padding: 12px 0; }
.lp-faq summary { font-weight: 600; cursor: pointer; }
.lp-faq p { margin: 8px 0 0; color: #5a6472; }

.lp-tag { display: inline-block; background: #eef2ff; color: #3b4b7a; border-radius: 6px;
  padding: 2px 8px; font-size: .78rem; font-weight: 600; margin-right: 6px; }
.lp-tag.lp-tag-gap { background: #fdecec; color: #b0453c; }
.lp-tag.lp-tag-ok { background: #e6f4ee; color: #1c7c54; }