/* FELiX Wissenspfade – Frontend (Framework-Grün #2F7A57, Hover #3B8A65) */
.fwp-box,.fwp-zgs{--fwp-g:#2F7A57;--fwp-gh:#3B8A65;--fwp-ink:#1f2d27;--fwp-muted:#5a6b63;--fwp-bg:#f4f8f5;--fwp-line:#d5e3da}
.fwp-box{box-sizing:border-box;width:100%;max-width:900px;margin:22px 0 30px;padding:clamp(16px,3vw,28px);background:#fff;border:1px solid var(--fwp-line);border-radius:20px;box-shadow:0 14px 40px rgba(47,122,87,.09);color:var(--fwp-ink);font-size:1rem;line-height:1.55}
.fwp-box *,.fwp-zgs *{box-sizing:border-box}
.fwp-box ol,.fwp-box ul,.fwp-zgs ul{margin:0!important;padding:0!important;list-style:none!important}
.fwp-box li,.fwp-zgs li{margin:0!important;padding:0!important}
.fwp-box section+section,.fwp-box nav+section{margin-top:18px}
.fwp-label{display:block;margin:0 0 8px;font-size:.875rem;color:var(--fwp-muted);letter-spacing:.01em}
.fwp-label strong{color:var(--fwp-ink);font-weight:700}
.fwp-box .fwp-h.fwp-h{margin:0 0 10px!important;padding:0!important;font-size:1.25em!important;line-height:1.3!important;color:var(--fwp-ink)!important}
.fwp-vorschau-hinweis{margin:0 0 12px;padding:6px 12px;border-radius:8px;background:#fff4d6;color:#5b4300;font-size:.8125rem}

/* Kette: sechs Stufen, die eigene hervorgehoben */
.fwp-kette ol{display:flex;flex-wrap:wrap;gap:8px}
.fwp-stufe>a,.fwp-stufe>span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 6px;border:1px solid var(--fwp-line);border-radius:999px;background:#fff;color:var(--fwp-ink)!important;text-decoration:none!important;font-size:.95rem;line-height:1.25}
.fwp-nr{flex:0 0 30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--fwp-bg);color:var(--fwp-g);font-weight:700;font-size:.9rem}
.fwp-stufe>a:hover,.fwp-stufe>a:focus-visible{border-color:var(--fwp-gh);background:#eaf3ed;outline:none;box-shadow:0 0 0 3px rgba(59,138,101,.30)}
.fwp-stufe--aktiv>a,.fwp-stufe--aktiv>span{border-color:var(--fwp-g);background:var(--fwp-g);color:#fff!important;-webkit-text-fill-color:#fff;font-weight:700}
.fwp-stufe--aktiv .fwp-nr{background:#fff;color:var(--fwp-g)}
.fwp-stufe--aktiv>a:hover,.fwp-stufe--aktiv>a:focus-visible{background:var(--fwp-gh);color:#fff!important}
.fwp-stufe--leer>span{opacity:.55}

/* Weg der Gruppe: nummerierte Schritte */
.fwp-schritte{counter-reset:fwp}
.fwp-schritte li{counter-increment:fwp;margin:0 0 8px!important}
.fwp-schritte li>a,.fwp-schritte li>span{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 16px 8px 10px;border-radius:14px;background:var(--fwp-bg);border:1px solid var(--fwp-line);color:var(--fwp-ink)!important;text-decoration:none!important;overflow-wrap:anywhere}
.fwp-schritte li>a::before,.fwp-schritte li>span::before{content:counter(fwp);flex:0 0 28px;height:28px;border-radius:50%;background:var(--fwp-g);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.fwp-schritte li>a:hover,.fwp-schritte li>a:focus-visible{border-color:var(--fwp-gh);background:#eaf3ed;outline:none;box-shadow:0 0 0 3px rgba(59,138,101,.30)}
.fwp-schritte li.fwp-aktuell>span{background:#fff;border-color:var(--fwp-g);font-weight:700}
.fwp-box--oben .fwp-schritte{display:flex;flex-wrap:wrap;gap:8px}
.fwp-box--oben .fwp-schritte li{margin:0!important;max-width:100%}
.fwp-box--oben .fwp-schritte li>a,.fwp-box--oben .fwp-schritte li>span{min-height:44px;padding:6px 14px 6px 8px;border-radius:999px;font-size:.95rem;line-height:1.3}

/* Nächster Schritt, Zielgruppen */
.fwp-hinweis{margin:0 0 8px;color:var(--fwp-muted);font-size:.9375rem}
.fwp-box a.fwp-btn.fwp-btn{display:inline-flex!important;align-items:center;gap:10px;min-height:50px;padding:10px 22px!important;border:2px solid var(--fwp-g)!important;border-radius:999px!important;background:#fff!important;color:var(--fwp-g)!important;font-weight:700!important;text-decoration:none!important;transition:background .15s,color .15s}
.fwp-box a.fwp-btn.fwp-btn::after{content:"→"}
.fwp-box a.fwp-btn.fwp-btn:hover,.fwp-box a.fwp-btn.fwp-btn:focus-visible{background:var(--fwp-g)!important;color:#fff!important;outline:none;box-shadow:0 0 0 3px rgba(47,122,87,.30)}
.fwp-chips{display:flex!important;flex-wrap:wrap;gap:10px}
a.fwp-chip.fwp-chip,span.fwp-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1px solid var(--fwp-line)!important;border-radius:999px;background:#fff!important;color:var(--fwp-g)!important;-webkit-text-fill-color:var(--fwp-g);font-weight:600;text-decoration:none!important}
a.fwp-chip.fwp-chip:hover,a.fwp-chip.fwp-chip:focus-visible{background:var(--fwp-g)!important;color:#fff!important;-webkit-text-fill-color:#fff;border-color:var(--fwp-g)!important;outline:none}

/* Direkt unter „Das Wichtigste in Kürze“: eine gemeinsame Karte */
.felix-zusammenfassung.felix-zusammenfassung:has(+ .fwp-box){margin-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
.felix-zusammenfassung+.fwp-box{margin:0 0 30px!important;border:0!important;border-top:1px solid rgba(47,122,87,.18)!important;border-radius:0 0 20px 20px!important;box-shadow:none!important;background:linear-gradient(135deg,#EEF6F2 0%,#FBF7EE 100%)!important;padding:16px 26px 22px!important}
.felix-zusammenfassung+.fwp-box .fwp-schritte li>a,.felix-zusammenfassung+.fwp-box .fwp-schritte li>span,.felix-zusammenfassung+.fwp-box .fwp-stufe:not(.fwp-stufe--aktiv)>a,.felix-zusammenfassung+.fwp-box .fwp-stufe:not(.fwp-stufe--aktiv)>span{background:rgba(255,255,255,.75)}

@media (max-width:680px){
 .fwp-box{border-radius:16px;padding:14px}
 .felix-zusammenfassung+.fwp-box{padding:14px 14px 18px!important}
 .fwp-kette ol{gap:6px}
 .fwp-stufe>a,.fwp-stufe>span{min-height:40px;padding:4px 12px 4px 4px;font-size:.875rem}
 .fwp-nr{flex-basis:26px;height:26px}
 .fwp-box--oben .fwp-schritte{flex-direction:column;flex-wrap:nowrap}
 .fwp-box--oben .fwp-schritte li>a,.fwp-box--oben .fwp-schritte li>span{width:100%;border-radius:14px}
 .fwp-box a.fwp-btn.fwp-btn{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.fwp-box a.fwp-btn.fwp-btn{transition:none}}

/* Zielgruppen-Seite [felix_zielgruppe] – ab 1.1.0 „Wegweiser“: eine Karte je Gruppe, Schwerpunkt-Stufen offen, übrige zugeklappt */
.fwp-zgs{max-width:1080px;color:var(--fwp-ink);font-size:1.0625rem;line-height:1.6}
.fwp-zgs-nav{margin:0 0 32px}
.fwp-zgs .fwp-chips li>a.fwp-chip--schwerpunkt:not(.felix-btn):not(.felix-btn){border-color:var(--fwp-g)!important;font-weight:700}
.fwp-zgs-stufe{margin:0 0 44px}
section.fwp-zgs-stufe+section.fwp-zgs-stufe{padding-top:32px;border-top:1px solid var(--fwp-line)}
.fwp-zgs-nr{margin:0 0 4px;color:var(--fwp-g);font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.fwp-zgs .fwp-zgs-h2{margin:0 0 20px!important;font-size:1.75rem;line-height:1.2;font-weight:700}
.fwp-zgs-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.fwp-zgs-weg{display:flex;flex-direction:column;background:#fff;border:1px solid var(--fwp-line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(31,45,39,.04)}
.fwp-zgs-img{display:block;overflow:hidden;aspect-ratio:16/7;background:var(--fwp-bg)}
.fwp-zgs-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;margin:0;border-radius:0}
.fwp-zgs-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 24px 22px}
.fwp-zgs .fwp-zgs-h3{margin:0!important;font-size:1.25rem;line-height:1.3;font-weight:700;color:var(--fwp-ink)}
.fwp-zgs-meta{margin:0;color:var(--fwp-muted);font-size:.9rem}
.fwp-zgs .fwp-zgs-body>a.fwp-zgs-los:not(.felix-btn):not(.felix-btn){display:inline-flex;align-items:center;gap:8px;min-height:46px;margin:4px 0 6px;padding:8px 20px;border-radius:999px;background:var(--fwp-g)!important;color:#fff!important;-webkit-text-fill-color:#fff;font-weight:700;text-decoration:none!important;text-decoration-line:none!important}
.fwp-zgs .fwp-zgs-body>a.fwp-zgs-los:not(.felix-btn):not(.felix-btn)::after{content:"→"}
.fwp-zgs .fwp-zgs-body>a.fwp-zgs-los:not(.felix-btn):not(.felix-btn):hover,.fwp-zgs .fwp-zgs-body>a.fwp-zgs-los:not(.felix-btn):not(.felix-btn):focus-visible{background:var(--fwp-gh)!important;outline:none;box-shadow:0 0 0 3px rgba(47,122,87,.30)}
.fwp-zgs ol.fwp-zgs-schritte{counter-reset:fwpz;width:100%;margin:4px 0 0!important;padding:0!important;list-style:none!important}
.fwp-zgs ol.fwp-zgs-schritte>li{counter-increment:fwpz;display:flex;align-items:baseline;gap:10px;margin:0!important;padding:6px 0!important;border-top:1px solid var(--fwp-line);line-height:1.4}
.fwp-zgs ol.fwp-zgs-schritte>li::before{content:counter(fwpz);flex:0 0 24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--fwp-bg);color:var(--fwp-g);font-size:.8rem;font-weight:700}
.fwp-zgs ol.fwp-zgs-schritte>li>a:not(.felix-btn):not(.felix-btn){color:var(--fwp-ink)!important;-webkit-text-fill-color:var(--fwp-ink);text-decoration-line:none!important}
.fwp-zgs ol.fwp-zgs-schritte>li>a:not(.felix-btn):not(.felix-btn):hover,.fwp-zgs ol.fwp-zgs-schritte>li>a:not(.felix-btn):not(.felix-btn):focus-visible{color:var(--fwp-g)!important;-webkit-text-fill-color:var(--fwp-g);text-decoration-line:underline!important}
/* zugeklappte Stufe */
details.fwp-zgs-zu{border:1px solid var(--fwp-line);border-radius:16px;background:var(--fwp-bg);margin:0 0 16px}
details.fwp-zgs-zu>summary{display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 20px;cursor:pointer;list-style:none;border-radius:16px}
details.fwp-zgs-zu>summary::-webkit-details-marker{display:none}
details.fwp-zgs-zu>summary::marker{content:""}
details.fwp-zgs-zu>summary::after{content:"+";flex:0 0 30px;height:30px;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--fwp-g);color:#fff;font-size:1.25rem;line-height:1}
details.fwp-zgs-zu[open]>summary::after{content:"–"}
details.fwp-zgs-zu>summary:hover{background:rgba(47,122,87,.06)}
details.fwp-zgs-zu>summary:focus-visible{outline:3px solid rgba(47,122,87,.45);outline-offset:-3px}
.fwp-zgs-znr{flex:0 0 32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--fwp-line);color:var(--fwp-g);font-weight:700}
.fwp-zgs-zt{display:flex;flex-direction:column;min-width:0}
.fwp-zgs-zl{font-weight:700;font-size:1.15rem;color:var(--fwp-ink)}
.fwp-zgs-zi{font-size:.9rem;color:var(--fwp-muted)}
details.fwp-zgs-zu[open]>.fwp-zgs-wege{padding:4px 16px 18px}
details.fwp-zgs-zu[open]>summary{border-bottom:1px solid var(--fwp-line);border-radius:16px 16px 0 0;margin-bottom:14px}
.fwp-zgs-andere{margin-top:8px;padding-top:26px;border-top:1px solid var(--fwp-line)}
.fwp-zgs-andere p{margin:0 0 12px;font-weight:600}
@media (max-width:760px){
 .fwp-zgs-wege{grid-template-columns:1fr}
 .fwp-zgs .fwp-zgs-h2{font-size:1.45rem}
 .fwp-zgs-body{padding:18px}
 details.fwp-zgs-zu>summary{padding:12px 14px;gap:10px}
}

/* Gegen die Link-Regeln des Frameworks: „.felix-generic-content :is(p,li) a:not(.felix-btn):not(.felix-btn)“ erzwingt Unterstreichung
   und Linkfarbe mit !important (Spezifität 0,3,2). Deshalb hier gleiche :not()-Kette plus Kastenklasse (0,5,2). */
.fwp-box .fwp-kette li.fwp-stufe>a:not(.felix-btn):not(.felix-btn),
.fwp-box .fwp-schritte li>a:not(.felix-btn):not(.felix-btn),
.fwp-box .fwp-chips li>a.fwp-chip:not(.felix-btn):not(.felix-btn),
.fwp-zgs .fwp-chips li>a.fwp-chip:not(.felix-btn):not(.felix-btn),
.fwp-box .fwp-weiter a.fwp-btn:not(.felix-btn):not(.felix-btn){text-decoration:none!important;text-decoration-line:none!important}
.fwp-box .fwp-kette li.fwp-stufe>a:not(.felix-btn):not(.felix-btn),
.fwp-box .fwp-schritte li>a:not(.felix-btn):not(.felix-btn){color:var(--fwp-ink)!important;-webkit-text-fill-color:var(--fwp-ink)}
.fwp-box .fwp-kette li.fwp-stufe.fwp-stufe--aktiv>a:not(.felix-btn):not(.felix-btn),.fwp-box .fwp-kette li.fwp-stufe.fwp-stufe--aktiv>span{color:#fff!important;-webkit-text-fill-color:#fff}
.fwp-box .fwp-kette li.fwp-stufe.fwp-stufe--aktiv .fwp-nr{color:var(--fwp-g)!important;-webkit-text-fill-color:var(--fwp-g)}
.fwp-box .fwp-kette li.fwp-stufe .fwp-nr{color:var(--fwp-g);-webkit-text-fill-color:var(--fwp-g)}
.fwp-box .fwp-schritte li>a:not(.felix-btn):not(.felix-btn)::before{-webkit-text-fill-color:#fff}
.fwp-box .fwp-weiter a.fwp-btn:not(.felix-btn):not(.felix-btn),.fwp-box .fwp-chips li>a.fwp-chip:not(.felix-btn):not(.felix-btn),.fwp-zgs .fwp-chips li>a.fwp-chip:not(.felix-btn):not(.felix-btn){color:var(--fwp-g)!important;-webkit-text-fill-color:var(--fwp-g)}
.fwp-box .fwp-weiter a.fwp-btn:not(.felix-btn):not(.felix-btn):hover,.fwp-box .fwp-weiter a.fwp-btn:not(.felix-btn):not(.felix-btn):focus-visible,
.fwp-box .fwp-chips li>a.fwp-chip:not(.felix-btn):not(.felix-btn):hover,.fwp-box .fwp-chips li>a.fwp-chip:not(.felix-btn):not(.felix-btn):focus-visible,
.fwp-zgs .fwp-chips li>a.fwp-chip:not(.felix-btn):not(.felix-btn):hover,.fwp-zgs .fwp-chips li>a.fwp-chip:not(.felix-btn):not(.felix-btn):focus-visible{color:#fff!important;-webkit-text-fill-color:#fff}

/* 1.0.1: Stufen nie in sich umbrechen (live bei 90 % Zoom: „Früh erkennen“ zweizeilig, Pillen stießen aneinander) –
   ganze Pillen wandern in die nächste Zeile. Gilt auch gegen Theme-Regeln für li/span. */
.fwp-box .fwp-kette ol>li.fwp-stufe{flex:0 0 auto!important;min-width:0;max-width:100%}
.fwp-box .fwp-kette .fwp-name{white-space:nowrap}
.fwp-box .fwp-kette li.fwp-stufe>a,.fwp-box .fwp-kette li.fwp-stufe>span{white-space:nowrap;max-width:100%}

/* 1.1.1: Firefox berechnet die Breite eines Flex-Containers aus der Inhaltsbreite seiner Kinder, nicht aus deren flex-basis.
   Ziffernkreise (Inhalt 1 Ziffer ≈ 10 px, flex-basis 24–32 px) zählten deshalb zu schmal: Pillen ohne rechten Innenabstand,
   Text der aktiven Stufe lief über den Rand, Schritte brachen zu früh um (Screenshot Live-Seite, Firefox 90 %). Feste width behebt es. */
.fwp-box .fwp-nr{width:30px;min-width:30px}
.fwp-box .fwp-schritte li>a::before,.fwp-box .fwp-schritte li>span::before{width:28px;min-width:28px}
.fwp-zgs ol.fwp-zgs-schritte>li::before{width:24px;min-width:24px}
.fwp-zgs-znr{width:32px;min-width:32px}
details.fwp-zgs-zu>summary::after{width:30px;min-width:30px}
@media (max-width:680px){.fwp-box .fwp-nr{flex-basis:26px;width:26px;min-width:26px}}
