/* ============================================================
   pi-bwtc-color.css - Farbschicht Saeulendiagramm-Palette
   Seite 30857 /berufswahltest-schueler/ - angelegt 08.09.2026
   Palette: Orange #E8722B (Text-Variante #C2410C), Frischgruen #0B7C58,
            Hellgruen #5CBF71, Limette #D3FA00, Mittelgruen #1F6B4A,
            Tiefgruen #14472F
   Alle Regeln mit html body + !important, damit Divi sie nicht schlaegt.
   ============================================================ */

/* --- Hero --------------------------------------------------- */
/* --- Hero: frischer Verlauf, Farbband und zwei Lichtpunkte ---- */
html body .pi-bwt-hero.pi-bwt-hero {
  background:
    linear-gradient(90deg, #E8722B 0%, #D3FA00 32%, #5CBF71 64%, #1F6B4A 100%) top left / 100% 5px no-repeat,
    radial-gradient(115% 85% at 88% 6%, rgba(211,250,0,0.26) 0%, rgba(211,250,0,0) 58%),
    radial-gradient(95% 85% at 4% 98%, rgba(232,114,43,0.30) 0%, rgba(232,114,43,0) 62%),
    linear-gradient(135deg, #0B7C58 0%, #1F6B4A 48%, #14472F 100%) !important;
}
html body .pi-bwt-hero-eyebrow.pi-bwt-hero-eyebrow { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: rgba(211,250,0,0.14) !important; border: 1px solid rgba(211,250,0,0.34) !important; border-radius: 50px !important; padding: 5px 13px !important; color: #D3FA00 !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
html body .pi-bwt-hero-note.pi-bwt-hero-note { border-left: 3px solid #E8722B !important; background: rgba(255,255,255,0.10) !important; }
html body .pi-bwt-hero-cta.pi-bwt-hero-cta { background: #D3FA00 !important; color: #14472F !important; border: 0 !important; box-shadow: 0 10px 26px rgba(211,250,0,0.28) !important; font-weight: 700 !important; }
html body .pi-bwt-hero-cta.pi-bwt-hero-cta:hover { background: #E3F53C !important; transform: translateY(-2px) !important; box-shadow: 0 14px 32px rgba(211,250,0,0.36) !important; }
html body .pi-bwt-hero-pill.pi-bwt-hero-pill { background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.20) !important; color: #ffffff !important; }
html body .pi-bwt-hero-pill:nth-child(1) { border-color: rgba(211,250,0,0.55) !important; background: rgba(211,250,0,0.13) !important; }
html body .pi-bwt-hero-pill:nth-child(2) { border-color: rgba(92,191,113,0.60) !important; background: rgba(92,191,113,0.15) !important; }
html body .pi-bwt-hero-pill:nth-child(3) { border-color: rgba(232,114,43,0.60) !important; background: rgba(232,114,43,0.16) !important; }
html body .pi-bwt-hero-pill:nth-child(4) { border-color: rgba(211,250,0,0.45) !important; background: rgba(211,250,0,0.10) !important; }
html body .pi-bwt-hero-pill:nth-child(5) { border-color: rgba(92,191,113,0.45) !important; background: rgba(92,191,113,0.11) !important; }
html body .pi-bwt-hero-pill svg { color: #D3FA00 !important; }
html body .pi-bwt-h1 strong { color: #D3FA00 !important; }

/* --- Trennlinien: Palette als Farbband ---------------------- */
html body .pi-bwtc-divider { height: 3px !important; border: 0 !important; border-radius: 3px !important; background: linear-gradient(90deg, #E8722B 0%, #D3FA00 34%, #5CBF71 62%, #1F6B4A 82%, #14472F 100%) !important; opacity: 1 !important; margin: 34px 0 !important; }

/* --- Kennzahlen und USP-Kacheln ----------------------------- */
html body .pi-bwtc-stat-num { color: #C2410C !important; }
html body .pi-bwtc-stat-card { border-color: #E7EFE9 !important; border-top: 3px solid #E8722B !important; }
html body .pi-bwtc-stats-grid .pi-bwtc-stat-card:nth-child(2) { border-top-color: #0B7C58 !important; }
html body .pi-bwtc-stats-grid .pi-bwtc-stat-card:nth-child(3) { border-top-color: #D3FA00 !important; }
html body .pi-bwtc-stats-grid .pi-bwtc-stat-card:nth-child(4) { border-top-color: #14472F !important; }
html body .pi-bwtc-usp-item:nth-child(1) .pi-bwtc-usp-icon { background: #FCEBDD !important; }
html body .pi-bwtc-usp-item:nth-child(2) .pi-bwtc-usp-icon { background: #E3F3E8 !important; }
html body .pi-bwtc-usp-item:nth-child(3) .pi-bwtc-usp-icon { background: #F2FBD1 !important; }

/* --- Die sechs RIASEC-Dimensionen --------------------------- */
html body .pi-bwtc-dim-card.R { border-left-color: #E8722B !important; }
html body .pi-bwtc-dim-card.I { border-left-color: #14472F !important; }
html body .pi-bwtc-dim-card.A { border-left-color: #D3FA00 !important; }
html body .pi-bwtc-dim-card.S { border-left-color: #1F6B4A !important; }
html body .pi-bwtc-dim-card.E { border-left-color: #0B7C58 !important; }
html body .pi-bwtc-dim-card.C { border-left-color: #5CBF71 !important; }
html body .pi-bwtc-dim-card.R .pi-bwtc-dim-letter { background: #C2410C !important; color: #ffffff !important; }
html body .pi-bwtc-dim-card.I .pi-bwtc-dim-letter { background: #14472F !important; color: #ffffff !important; }
html body .pi-bwtc-dim-card.A .pi-bwtc-dim-letter { background: #D3FA00 !important; color: #14472F !important; }
html body .pi-bwtc-dim-card.S .pi-bwtc-dim-letter { background: #1F6B4A !important; color: #ffffff !important; }
html body .pi-bwtc-dim-card.E .pi-bwtc-dim-letter { background: #0B7C58 !important; color: #ffffff !important; }
html body .pi-bwtc-dim-card.C .pi-bwtc-dim-letter { background: #5CBF71 !important; color: #14472F !important; }

/* --- Vergleichstabelle -------------------------------------- */
html body .pi-bwtc-ctable th { background: #14472F !important; color: #ffffff !important; }
html body .pi-bwtc-ctable th.best { background: #0B7C58 !important; }
html body .pi-bwtc-ctable td.best { background: #F6FDE4 !important; }
html body .pi-bwtc-ctable tr:nth-child(even) td.best { background: #EDFBC8 !important; }
html body .pi-bwtc-ctable td:first-child { color: #14472F !important; }

/* --- FAQ: Reparatur (Flexbox statt Grid) plus Farbe --------- */
html body .pi-bwtc-faq-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: flex-start !important; }
html body .pi-bwtc-faq-item { flex: 1 1 calc(50% - 8px) !important; min-width: 280px !important; border: 1px solid #E7EFE9 !important; border-left: 3px solid #0B7C58 !important; border-radius: 10px !important; overflow: hidden !important; background: #ffffff !important; }
html body .pi-bwtc-faq-item:nth-child(5n+1) { border-left-color: #E8722B !important; }
html body .pi-bwtc-faq-item:nth-child(5n+2) { border-left-color: #0B7C58 !important; }
html body .pi-bwtc-faq-item:nth-child(5n+3) { border-left-color: #D3FA00 !important; }
html body .pi-bwtc-faq-item:nth-child(5n+4) { border-left-color: #1F6B4A !important; }
html body .pi-bwtc-faq-item:nth-child(5n+5) { border-left-color: #5CBF71 !important; }
html body .pi-bwtc-faq-q { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 10px !important; text-align: left !important; background: #ffffff !important; border: 0 !important; box-shadow: none !important; padding: 15px 18px !important; font-family: inherit !important; font-size: 0.9rem !important; font-weight: 700 !important; color: #14472F !important; line-height: 1.4 !important; cursor: pointer !important; transition: background 0.18s !important; text-transform: none !important; letter-spacing: normal !important; }
html body .pi-bwtc-faq-q:hover { background: #F6FDE4 !important; }
html body .pi-bwtc-faq-q[aria-expanded="true"] { background: #14472F !important; color: #D3FA00 !important; }
html body .pi-bwtc-faq-icon { flex-shrink: 0 !important; width: 22px !important; height: 22px !important; background: #F2FBD1 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1rem !important; color: #14472F !important; font-weight: 700 !important; margin-top: 1px !important; transition: transform 0.28s, background 0.18s !important; }
html body .pi-bwtc-faq-q[aria-expanded="true"] .pi-bwtc-faq-icon { background: #D3FA00 !important; color: #14472F !important; transform: rotate(45deg) !important; }
html body .pi-bwtc-faq-a { display: none !important; padding: 14px 18px !important; font-size: 0.9rem !important; color: #33413E !important; line-height: 1.75 !important; border-top: 1px solid #E7EFE9 !important; background: #FBFDF7 !important; }
html body .pi-bwtc-faq-a.open { display: block !important; }
html body .pi-bwtc-faq-a p { margin: 0 0 8px !important; }
html body .pi-bwtc-faq-a p:last-child { margin-bottom: 0 !important; }
html body .pi-bwtc-faq-a a { color: #0B7C58 !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: #D3FA00 !important; }
html body .pi-bwtc-faq-a strong { color: #14472F !important; }

/* --- Standort-Pillen, Autorenblock, CTA --------------------- */
html body .pi-bwtc-loc-pill { border: 1px solid #5CBF71 !important; color: #14472F !important; background: #ffffff !important; }
html body .pi-bwtc-loc-pill:hover { border-color: #0B7C58 !important; background: #F6FDE4 !important; }
html body .pi-bwtc-jan-box { background: #14472F !important; }
html body .pi-bwtc-cta-banner { background: linear-gradient(135deg, #F7FEE2 0%, #D3FA00 100%) !important; border-color: #D3FA00 !important; }
html body .pi-bwtc-cta-banner h3, html body .pi-bwtc-cta-banner p { color: #14472F !important; }
html body .pi-bwtc-related-link { border-left: 3px solid #5CBF71 !important; }

/* --- Mobil: FAQ einspaltig --------------------------------- */
@media (max-width: 820px) {
  html body .pi-bwtc-faq-item { flex: 1 1 100% !important; min-width: 0 !important; }
  html body .pi-bwtc-faq-q { padding: 13px 14px !important; font-size: 0.86rem !important; }
  html body .pi-bwtc-faq-a { padding: 12px 14px !important; font-size: 0.85rem !important; }
}
/* --- Spektrumbalken der sechs Dimensionen ------------------- */
html body .pi-bwtc-dim-card.R .pi-bwtc-spectrum-bar { background: linear-gradient(90deg, #E7EFE9, #E8722B) !important; }
html body .pi-bwtc-dim-card.I .pi-bwtc-spectrum-bar { background: linear-gradient(90deg, #E7EFE9, #14472F) !important; }
html body .pi-bwtc-dim-card.A .pi-bwtc-spectrum-bar { background: linear-gradient(90deg, #E7EFE9, #C7E800) !important; }
html body .pi-bwtc-dim-card.S .pi-bwtc-spectrum-bar { background: linear-gradient(90deg, #E7EFE9, #1F6B4A) !important; }
html body .pi-bwtc-dim-card.E .pi-bwtc-spectrum-bar { background: linear-gradient(90deg, #E7EFE9, #0B7C58) !important; }
html body .pi-bwtc-dim-card.C .pi-bwtc-spectrum-bar { background: linear-gradient(90deg, #E7EFE9, #5CBF71) !important; }
html body .pi-bwtc-metric-bar { background: #0B7C58 !important; }

/* --- Ergebniskarten des Tests (gleiche Zuordnung) ----------- */
html body #pi-bwt-detailArea .pi-bwt-dim-card.R { border-left-color: #E8722B !important; }
html body #pi-bwt-detailArea .pi-bwt-dim-card.I { border-left-color: #14472F !important; }
html body #pi-bwt-detailArea .pi-bwt-dim-card.A { border-left-color: #C7E800 !important; }
html body #pi-bwt-detailArea .pi-bwt-dim-card.S { border-left-color: #1F6B4A !important; }
html body #pi-bwt-detailArea .pi-bwt-dim-card.E { border-left-color: #0B7C58 !important; }
html body #pi-bwt-detailArea .pi-bwt-dim-card.C { border-left-color: #5CBF71 !important; }
/* --- Kombinations-Matrix: kleinere Schrift, engere Zellen ---- */
/* Divi setzt .entry-content tr td{font-size:18px!important} - deshalb hier direkt am Zelltyp */
html body .pi-bwtc-ktable { font-size: 11px !important; }
html body .pi-bwtc-ktable th, html body .pi-bwtc-ktable td { font-size: 11px !important; line-height: 1.35 !important; padding: 5px 7px !important; }
html body .pi-bwtc-ktable thead th { font-size: 11.5px !important; padding: 7px 7px !important; }
html body .pi-bwtc-ktable tbody th { font-size: 11px !important; }
html body .pi-bwtc-ktable td strong { font-size: 11.5px !important; margin-bottom: 1px !important; }

/* Kopfzeile und Zeilenmarker auf die Palette (schlagen die Inline-Styles) */
html body .pi-bwtc-ktable thead th:nth-child(1) { background: #14472F !important; }
html body .pi-bwtc-ktable thead th:nth-child(2) { background: #E8722B !important; }
html body .pi-bwtc-ktable thead th:nth-child(3) { background: #14472F !important; }
html body .pi-bwtc-ktable thead th:nth-child(4) { background: #D3FA00 !important; color: #14472F !important; }
html body .pi-bwtc-ktable thead th:nth-child(5) { background: #1F6B4A !important; }
html body .pi-bwtc-ktable thead th:nth-child(6) { background: #0B7C58 !important; }
html body .pi-bwtc-ktable thead th:nth-child(7) { background: #5CBF71 !important; color: #14472F !important; }
html body .pi-bwtc-ktable tbody tr:nth-child(1) th { border-left-color: #E8722B !important; }
html body .pi-bwtc-ktable tbody tr:nth-child(2) th { border-left-color: #14472F !important; }
html body .pi-bwtc-ktable tbody tr:nth-child(3) th { border-left-color: #D3FA00 !important; }
html body .pi-bwtc-ktable tbody tr:nth-child(4) th { border-left-color: #1F6B4A !important; }
html body .pi-bwtc-ktable tbody tr:nth-child(5) th { border-left-color: #0B7C58 !important; }
html body .pi-bwtc-ktable tbody tr:nth-child(6) th { border-left-color: #5CBF71 !important; }

@media (max-width: 820px) {
  html body .pi-bwtc-ktable, html body .pi-bwtc-ktable th, html body .pi-bwtc-ktable td { font-size: 10.5px !important; }
  html body .pi-bwtc-ktable th, html body .pi-bwtc-ktable td { padding: 4px 6px !important; }
}