/* pi-bwtc-page.css - Seiten-CSS von Post 30857, aus dem Inline-Markup gezogen und
   mit html-body-Praefix versehen (08.09.2026). Quelle bleibt im Post, wird aber
   von dieser Datei ueberstimmt. Farbschicht: pi-bwtc-color.css laedt danach. */


html body .pi-bwt-hero-wrap{ font-family: 'DM Sans', system-ui, sans-serif !important; color: #002c26 !important; max-width: 1100px !important; margin: 0 auto !important; box-sizing: border-box !important;}
html body .pi-bwt-hero-wrap *, html body .pi-bwt-hero-wrap *::before, html body .pi-bwt-hero-wrap *::after{ box-sizing: border-box !important;}
html body .pi-bwt-breadcrumb{ font-size: 0.82rem !important; color: #4a5d5a !important; margin-bottom: 12px !important;}
html body .pi-bwt-breadcrumb ul{ list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important;}
html body .pi-bwt-breadcrumb li{ list-style: none !important; display: inline-flex; align-items: center !important;}
html body .pi-bwt-breadcrumb li::before, html body .pi-bwt-breadcrumb li::marker{ content: none !important; display: none !important;}
html body .pi-bwt-breadcrumb a{ color: #00543D !important; text-decoration: none !important; font-weight: 500 !important;}
html body .pi-bwt-breadcrumb a:hover{ text-decoration: underline !important;}
html body .pi-bwt-breadcrumb svg{ opacity: 0.5 !important;}
html body .pi-bwt-hero{ position: relative !important; background: linear-gradient(135deg, #002c26 0%, #003b33 100%) !important; color: #ffffff !important; border-radius: 20px !important; padding: 44px 48px !important; overflow: hidden !important; margin-bottom: 20px !important;}
html body .pi-bwt-hero::before{ content: "" !important; position: absolute !important; top: -80px !important; right: -80px !important; width: 280px !important; height: 280px !important; background: radial-gradient(circle, rgba(211,250,0,0.18) 0%, transparent 70%) !important; pointer-events: none !important;}
html body .pi-bwt-hero-eyebrow{ display: inline-flex; align-items: center !important; gap: 7px !important; background: rgba(211,250,0,0.15) !important; border: 1px solid rgba(211,250,0,0.35) !important; color: #eafc46 !important; padding: 5px 13px !important; border-radius: 50px !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; margin-bottom: 16px !important;}
html body .pi-bwt-hero-eyebrow svg{ flex-shrink: 0 !important;}
html body .pi-bwt-h1{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important; font-weight: 400 !important; line-height: 1.15 !important; margin: 0 0 6px !important; color: #ffffff !important;}
html body .pi-bwt-h1 strong{ font-family: 'DM Serif Display', Georgia, serif !important; font-weight: 400 !important; color: #eafc46 !important; font-style: normal !important;}
html body .pi-bwt-h1-sub{ font-family: 'DM Sans', sans-serif !important; font-size: clamp(0.95rem, 1.6vw, 1.15rem) !important; font-weight: 500 !important; color: rgba(255,255,255,0.82) !important; margin: 8px 0 0 !important; letter-spacing: 0.01em !important;}
html body .pi-bwt-hero-desc{ font-size: clamp(0.9rem, 1.3vw, 1rem) !important; line-height: 1.65 !important; color: rgba(255,255,255,0.88) !important; max-width: 700px !important; margin: 16px 0 22px !important;}
html body .pi-bwt-hero-desc strong{ color: #ffffff !important; font-weight: 600 !important;}
html body .pi-bwt-hero .pi-bwt-hero-desc a{ color: #eafc46 !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px !important;}
html body .pi-bwt-hero .pi-bwt-hero-desc a:hover{ color: #ffffff !important;}
html body #pi-bwt-h1 .pi-bwt-h1-sub{ display: block;}
html body .pi-bwt-hero-note{ max-width: 700px !important; margin: 0 0 22px !important; padding: 14px 18px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.16) !important; border-left: 3px solid #eafc46 !important; border-radius: 12px !important; font-size: 0.86rem !important; line-height: 1.6 !important; color: rgba(255,255,255,0.88) !important; text-align: left !important; box-sizing: border-box !important;}
html body .pi-bwt-hero-note strong{ color: #ffffff !important; font-weight: 700 !important;}
html body .pi-bwt-hero .pi-bwt-hero-note a{ color: #eafc46 !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px !important;}
html body .pi-bwt-hero .pi-bwt-hero-note a:hover{ color: #ffffff !important;}
@media (max-width: 768px) {
html body .pi-bwt-hero-note{ font-size: 0.82rem !important; padding: 12px 14px !important; margin: 0 0 18px !important; border-radius: 10px !important;} }
html body .pi-bwt-hero-cta{ display: inline-flex; align-items: center !important; gap: 9px !important; background: #eafc46 !important; color: #002c26 !important; padding: 14px 28px !important; border-radius: 50px !important; font-weight: 800 !important; font-size: 1rem !important; text-decoration: none !important; border: none !important; cursor: pointer !important; font-family: inherit !important; letter-spacing: 0.01em !important; box-shadow: 0 6px 20px rgba(211,250,0,0.28) !important; transition: transform 0.15s, box-shadow 0.2s !important;}
html body .pi-bwt-hero-cta:hover{ transform: translateY(-2px) !important; box-shadow: 0 9px 24px rgba(211,250,0,0.38) !important;}
html body .pi-bwt-hero-cta:active{ transform: translateY(0) !important;}
html body .pi-bwt-hero-trust{ display: flex; flex-wrap: wrap !important; gap: 7px !important; margin-top: 18px !important;}
html body .pi-bwt-hero-pill{ display: inline-flex; align-items: center !important; gap: 5px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.92) !important; padding: 5px 11px !important; border-radius: 50px !important; font-size: 0.76rem !important; font-weight: 600 !important; backdrop-filter: blur(6px) !important;}
html body .pi-bwt-hero-pill svg{ flex-shrink: 0 !important; opacity: 0.85 !important;}
html body .pi-bwt-freshness{ display: flex; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; margin-top: 18px !important; font-size: 0.78rem !important; color: #4a5d5a !important;}
html body .pi-bwt-freshness::before{ content: "" !important; display: inline-block; width: 7px !important; height: 7px !important; background: #0F6E56 !important; border-radius: 50% !important; box-shadow: 0 0 0 3px rgba(15,110,86,0.2) !important; flex-shrink: 0 !important;}

@media (max-width: 768px) {
html body .pi-bwt-hero{ padding: 26px 22px !important; border-radius: 14px !important;}
html body .pi-bwt-hero::before{ width: 220px !important; height: 220px !important; top: -60px !important; right: -60px !important;}
html body .pi-bwt-hero-eyebrow{ font-size: 0.66rem !important; padding: 4px 10px !important; margin-bottom: 12px !important;}
html body .pi-bwt-h1{ font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important; line-height: 1.2 !important;}
html body .pi-bwt-h1-sub{ font-size: 0.95rem !important;}
html body .pi-bwt-hero-desc{ font-size: 0.88rem !important; line-height: 1.6 !important; margin: 12px 0 16px !important;}
html body .pi-bwt-hero-cta{ padding: 13px 22px !important; font-size: 0.92rem !important; width: 100% !important; justify-content: center !important;}
html body .pi-bwt-hero-pill{ font-size: 0.7rem !important; padding: 4px 9px !important;}
html body .pi-bwt-freshness{ font-size: 0.72rem !important;}
}
@media (max-width: 400px) {
html body .pi-bwt-hero{ padding: 22px 18px !important;}
html body .pi-bwt-h1{ font-size: 1.3rem !important;}
html body .pi-bwt-h1-sub{ font-size: 0.88rem !important;}
html body .pi-bwt-hero-eyebrow{ font-size: 0.62rem !important; padding: 3px 8px !important;}
html body .pi-bwt-hero-pill{ font-size: 0.66rem !important;}
}
/* ═══ Quiz Container ═══ */
html body #pi-bwt-testContainer{ max-width: 1100px !important; margin: 28px auto 0 !important; font-family: 'DM Sans', system-ui, sans-serif !important; line-height: 1.5 !important; color: #0f172a !important; scroll-margin-top: 100px !important;}
html body #pi-bwt-testContainer *, html body #pi-bwt-testContainer *::before, html body #pi-bwt-testContainer *::after{ box-sizing: border-box !important;}
html body #pi-bwt-testContainer .pi-bwt-card{ background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 26px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; margin: 0 !important; overflow: visible !important;}
/* ═══ Intro + Scale ═══ */
html body #pi-bwt-testContainer .pi-bwt-intro-box{ font-size: 0.94rem !important; color: #475569 !important; line-height: 1.7 !important; margin: 0 0 16px !important; padding: 14px 17px !important; background: #fcfdf5 !important; border-left: 3px solid #eafc46 !important; border-radius: 8px !important;}
html body #pi-bwt-testContainer .pi-bwt-intro-box strong{ color: #002c26 !important; font-weight: 700 !important;}
html body #pi-bwt-testContainer .pi-bwt-scale-legend{ font-size: 0.82rem !important; color: #475569 !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 10px 14px !important; margin-bottom: 16px !important; line-height: 1.55 !important;}
html body #pi-bwt-testContainer .pi-bwt-scale-legend strong{ color: #0f172a !important; font-weight: 700 !important; margin-right: 4px !important;}
html body #pi-bwt-testContainer .pi-bwt-scale-legend .scdot{ color: #94a3b8 !important; margin: 0 6px !important;}
/* ═══ Progress Bar – Desktop sticky, Mobile nicht ═══ */
html body #pi-bwt-testContainer #pi-bwt-progressWrap{ position: sticky !important; top: 80px !important; z-index: 50 !important; background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; margin: -26px -26px 18px -26px !important; padding: 14px 26px 12px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important; border-radius: 16px 16px 0 0 !important; overflow: visible !important;}
html body .admin-bar #pi-bwt-testContainer #pi-bwt-progressWrap{ top: 112px !important;}
html body #pi-bwt-testContainer .pi-bwt-progress-top{ display: flex; justify-content: space-between !important; align-items: center !important; font-size: 0.92rem !important; font-weight: 600 !important; margin-bottom: 7px !important; color: #0f172a !important;}
html body #pi-bwt-testContainer .pi-bwt-progress-label{ display: inline-flex; align-items: center !important; gap: 6px !important;}
html body #pi-bwt-testContainer .pi-bwt-progress-count{ font-variant-numeric: tabular-nums !important; color: #475569 !important; font-weight: 700 !important;}
html body #pi-bwt-testContainer #pi-bwt-progBar{ position: relative !important; height: 10px !important; background: #edf2f7 !important; border-radius: 999px !important; overflow: hidden !important;}
html body #pi-bwt-testContainer #pi-bwt-progFill{ position: absolute !important; height: 100% !important; width: 0% !important; background: linear-gradient(90deg, #d3fa00 0%, #eafc46 100%) !important; border-radius: 999px !important; transition: width 0.3s ease !important;}
html body #pi-bwt-testContainer #pi-bwt-unansweredHint{ margin-top: 9px !important; padding: 9px 13px !important; background: #fff1f2 !important; border: 1px solid #fecdd3 !important; border-radius: 8px !important; font-size: 0.87rem !important; color: #9f1239 !important; line-height: 1.55 !important;}
/* ═══ Dimension Sections ═══ */
html body #pi-bwt-testContainer .pi-bwt-dim-section{ margin: 22px 0 0 !important; padding: 18px 18px 10px !important; border: 1px solid #f0f4f4 !important; border-radius: 12px !important; background: #fafafa !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-section:first-of-type{ margin-top: 0 !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-header{ display: flex; align-items: center !important; gap: 12px !important; margin-bottom: 14px !important; padding-bottom: 12px !important; border-bottom: 1px solid #e8ede8 !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-letter{ flex-shrink: 0 !important; width: 38px !important; height: 38px !important; border-radius: 10px !important; display: flex; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-family: 'DM Serif Display', serif !important; font-size: 1.15rem !important; font-weight: 700 !important;}
html body #pi-bwt-testContainer .pi-bwt-dh-R .pi-bwt-dim-letter{ background: #d97706 !important;}
html body #pi-bwt-testContainer .pi-bwt-dh-I .pi-bwt-dim-letter{ background: #2563eb !important;}
html body #pi-bwt-testContainer .pi-bwt-dh-A .pi-bwt-dim-letter{ background: #ec4899 !important;}
html body #pi-bwt-testContainer .pi-bwt-dh-S .pi-bwt-dim-letter{ background: #059669 !important;}
html body #pi-bwt-testContainer .pi-bwt-dh-E .pi-bwt-dim-letter{ background: #eab308 !important;}
html body #pi-bwt-testContainer .pi-bwt-dh-C .pi-bwt-dim-letter{ background: #0d9488 !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-header-text strong{ display: block; font-family: 'DM Serif Display', serif !important; font-size: 1.08rem !important; font-weight: 400 !important; color: #002c26 !important; line-height: 1.25 !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-header-text span{ display: block; font-size: 0.76rem !important; color: #4a5d5a !important; margin-top: 2px !important; font-weight: 500 !important; letter-spacing: 0.01em !important;}
/* ═══ Question List ═══ */
html body #pi-bwt-testContainer .pi-bwt-qlist{ list-style: decimal !important; padding-left: 26px !important; margin: 0 !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist li{ margin-bottom: 16px !important; font-size: 0.94rem !important; color: #1e293b !important; line-height: 1.55 !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist li::marker{ color: #4a5d5a !important; font-weight: 600 !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist li > span{ display: block; margin-bottom: 6px !important;}
/* ═══ Answer Options – 5 gleich breite Buttons ═══ */
html body #pi-bwt-testContainer .pi-bwt-opts{ display: flex; flex-wrap: nowrap !important; gap: 6px !important; margin-top: 7px !important;}
html body #pi-bwt-testContainer .pi-bwt-opts label{ flex: 1 1 0 !important; min-width: 0 !important; display: inline-flex; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 9px 6px !important; border: 1px solid #e5e7eb !important; border-radius: 999px !important; cursor: pointer !important; user-select: none !important; transition: border-color 0.15s, background 0.15s, transform 0.08s !important; font-size: 0.88rem !important; background: #ffffff !important; font-weight: 600 !important; color: #334155 !important;}
html body #pi-bwt-testContainer .pi-bwt-opts label:hover{ border-color: #d3fa00 !important; background: rgba(211,250,0,0.08) !important;}
html body #pi-bwt-testContainer .pi-bwt-opts label:has(input:checked){ border-color: #00543D !important; background: #002c26 !important; color: #ffffff !important;}
html body #pi-bwt-testContainer .pi-bwt-opts input[type="radio"]{ position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important;}
html body #pi-bwt-testContainer .pi-bwt-opts label span{ font-variant-numeric: tabular-nums !important;}
/* ═══ Actions ═══ */
html body #pi-bwt-testContainer .pi-bwt-actions{ display: flex; gap: 10px !important; flex-wrap: wrap !important; margin-top: 24px !important; padding-top: 18px !important; border-top: 1px solid #e8ede8 !important;}
html body #pi-bwt-testContainer .pi-bwt-btn{ display: inline-flex; align-items: center !important; gap: 9px !important; padding: 12px 22px !important; font-weight: 700 !important; font-size: 0.95rem !important; border-radius: 999px !important; border: 1px solid transparent !important; cursor: pointer !important; font-family: inherit !important; transition: transform 0.08s, box-shadow 0.2s, background 0.2s !important; letter-spacing: 0.01em !important;}
html body #pi-bwt-testContainer .pi-bwt-btn:active{ transform: translateY(1px) !important;}
html body #pi-bwt-testContainer .pi-bwt-btn--primary{ background: #eafc46 !important; color: #002c26 !important; box-shadow: 0 6px 20px rgba(211,250,0,0.3) !important;}
html body #pi-bwt-testContainer .pi-bwt-btn--primary:hover{ filter: brightness(0.97) !important; box-shadow: 0 9px 24px rgba(211,250,0,0.38) !important;}
html body #pi-bwt-testContainer .pi-bwt-btn--ghost{ background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important;}
html body #pi-bwt-testContainer .pi-bwt-btn--ghost:hover{ background: #f8fafc !important; border-color: #cbd5e1 !important;}
html body #pi-bwt-testContainer .pi-bwt-btn:focus-visible, html body #pi-bwt-testContainer input:focus-visible + span{ outline: 3px solid rgba(211,250,0,0.7) !important; outline-offset: 2px !important;}

/* ═══ RESPONSIVE – 5 Breakpoints ═══ */
@media (max-width: 1024px) {
html body #pi-bwt-testContainer{ padding: 0 16px !important;}
}

@media (max-width: 900px) {
html body #pi-bwt-testContainer #pi-bwt-progressWrap{
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e2e8f0 !important;}
html body .admin-bar #pi-bwt-testContainer #pi-bwt-progressWrap{ top: auto !important;}
}

@media (max-width: 820px) {
html body #pi-bwt-testContainer .pi-bwt-opts{ gap: 5px !important;}
html body #pi-bwt-testContainer .pi-bwt-opts label{ padding: 9px 4px !important; font-size: 0.86rem !important;}
}

@media (max-width: 768px) {
html body #pi-bwt-testContainer{ margin-top: 18px !important; padding: 0 14px !important;}
html body #pi-bwt-testContainer .pi-bwt-card{ padding: 18px 16px !important; border-radius: 14px !important;}
html body #pi-bwt-testContainer #pi-bwt-progressWrap{ margin: -18px -16px 14px -16px !important; padding: 11px 16px 9px !important; border-radius: 14px 14px 0 0 !important;}
html body #pi-bwt-testContainer .pi-bwt-progress-top{ font-size: 0.86rem !important;}
html body #pi-bwt-testContainer #pi-bwt-progBar{ height: 9px !important;}
html body #pi-bwt-testContainer .pi-bwt-intro-box{ font-size: 0.87rem !important; padding: 12px 14px !important; line-height: 1.6 !important;}
html body #pi-bwt-testContainer .pi-bwt-scale-legend{ font-size: 0.75rem !important; padding: 9px 12px !important; line-height: 1.5 !important;}
html body #pi-bwt-testContainer .pi-bwt-scale-legend .scdot{ display: none !important;}
html body #pi-bwt-testContainer .pi-bwt-scale-legend span{ display: block; margin-top: 3px !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-section{ padding: 14px 12px 8px !important; margin-top: 16px !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-header{ gap: 10px !important; margin-bottom: 12px !important; padding-bottom: 10px !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-letter{ width: 34px !important; height: 34px !important; font-size: 1rem !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-header-text strong{ font-size: 0.98rem !important;}
html body #pi-bwt-testContainer .pi-bwt-dim-header-text span{ font-size: 0.72rem !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist{ padding-left: 22px !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist li{ font-size: 0.9rem !important; margin-bottom: 14px !important; line-height: 1.5 !important;}
html body #pi-bwt-testContainer .pi-bwt-btn{ padding: 11px 18px !important; font-size: 0.9rem !important;}
html body #pi-bwt-testContainer .pi-bwt-actions{ gap: 8px !important; padding-top: 16px !important; margin-top: 20px !important;}
html body #pi-bwt-testContainer .pi-bwt-actions .pi-bwt-btn{ flex: 1 1 auto !important; justify-content: center !important;}
}

@media (max-width: 560px) {
html body #pi-bwt-testContainer{ padding: 0 12px !important;}
html body #pi-bwt-testContainer .pi-bwt-card{ padding: 16px 14px !important;}
html body #pi-bwt-testContainer #pi-bwt-progressWrap{ margin: -16px -14px 12px -14px !important; padding: 10px 14px 8px !important;}
html body #pi-bwt-testContainer .pi-bwt-progress-top{ font-size: 0.82rem !important;}
html body #pi-bwt-testContainer #pi-bwt-progBar{ height: 8px !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist{ padding-left: 20px !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist li{ font-size: 0.87rem !important;}
html body #pi-bwt-testContainer .pi-bwt-opts label{ font-size: 0.83rem !important; padding: 9px 3px !important; gap: 4px !important;}
html body #pi-bwt-testContainer .pi-bwt-intro-box{ font-size: 0.82rem !important; padding: 11px 13px !important;}
html body #pi-bwt-testContainer .pi-bwt-scale-legend{ font-size: 0.72rem !important; padding: 9px 11px !important;}
}

@media (max-width: 400px) {
html body #pi-bwt-testContainer .pi-bwt-card{ padding: 14px 12px !important;}
html body #pi-bwt-testContainer #pi-bwt-progressWrap{ margin: -14px -12px 11px -12px !important; padding: 9px 12px 7px !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist{ padding-left: 18px !important;}
html body #pi-bwt-testContainer .pi-bwt-qlist li{ font-size: 0.85rem !important;}
html body #pi-bwt-testContainer .pi-bwt-opts label{ font-size: 0.8rem !important; padding: 9px 2px !important; gap: 3px !important;}
html body #pi-bwt-testContainer .pi-bwt-actions{ flex-direction: column !important;}
html body #pi-bwt-testContainer .pi-bwt-actions .pi-bwt-btn{ width: 100% !important;}
}
html body #pi-bwt-testContainer{ overflow-x: hidden !important;}
/* ═══ Result Container ═══ */
html body #pi-bwt-resultContainer{ max-width: 1100px !important; margin: 28px auto 0 !important; font-family: 'DM Sans', system-ui, sans-serif !important; color: #0f172a !important; scroll-margin-top: 100px !important;}
html body #pi-bwt-resultContainer *, html body #pi-bwt-resultContainer *::before, html body #pi-bwt-resultContainer *::after{ box-sizing: border-box !important;}
html body #pi-bwt-resultContainer .pi-bwt-rcard{ background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 26px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;}
html body #pi-bwt-resultContainer .pi-bwt-result-head h2{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: clamp(1.25rem, 2.5vw, 1.7rem) !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 0 4px !important; line-height: 1.2 !important;}
html body #pi-bwt-resultContainer .pi-bwt-result-sub{ font-size: 0.9rem !important; color: #475569 !important; margin: 0 0 18px !important; line-height: 1.55 !important;}
/* ═══ Holland-Code Hero-Box ═══ */
html body #pi-bwt-hollandBox{ background: linear-gradient(135deg, #002c26 0%, #003b33 100%) !important; color: #ffffff !important; border-radius: 14px !important; padding: 22px 26px !important; margin: 6px 0 18px !important; display: flex; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;}
html body #pi-bwt-hollandBox .hc-label{ font-size: 0.74rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #eafc46 !important; opacity: 0.9 !important; margin-bottom: 4px !important;}
html body #pi-bwt-hollandBox .hc-letters{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: clamp(2.2rem, 5vw, 3rem) !important; font-weight: 400 !important; letter-spacing: 0.1em !important; line-height: 1 !important; color: #eafc46 !important;}
html body #pi-bwt-hollandBox .hc-desc{ font-size: 0.88rem !important; color: rgba(255,255,255,0.85) !important; margin-top: 8px !important; line-height: 1.55 !important; max-width: 520px !important;}
html body #pi-bwt-hollandBox .hc-info{ font-size: 0.76rem !important; color: rgba(255,255,255,0.65) !important; margin-top: 6px !important; font-style: italic !important;}
/* ═══ Bars ═══ */
html body #pi-bwt-bars{ margin: 14px 0 4px !important;}
html body #pi-bwt-bars .pi-bwt-bar{ margin: 8px 0 !important;}
html body #pi-bwt-bars .pi-bwt-bar-row{ display: flex; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 10px !important; cursor: pointer !important; transition: background 0.15s !important; border: 1px solid transparent !important;}
html body #pi-bwt-bars .pi-bwt-bar-row:hover{ background: #f8fafc !important; border-color: #e2e8f0 !important;}
html body #pi-bwt-bars .pi-bwt-bar-row:focus-visible{ outline: 3px solid rgba(211,250,0,0.7) !important; outline-offset: 2px !important;}
html body #pi-bwt-bars .pi-bwt-bar-label{ min-width: 230px !important; flex-shrink: 0 !important; font-size: 0.92rem !important; line-height: 1.3 !important;}
html body #pi-bwt-bars .pi-bwt-bar-label strong{ display: block; color: #002c26 !important; font-weight: 700 !important; font-size: 0.94rem !important;}
html body #pi-bwt-bars .pi-bwt-bar-label span{ display: block; color: #6b7280 !important; font-size: 0.74rem !important; margin-top: 2px !important; font-weight: 500 !important;}
html body #pi-bwt-bars .pi-bwt-bar-track{ flex: 1 !important; height: 16px !important; background: #f1f5f9 !important; border-radius: 999px !important; overflow: hidden !important; min-width: 60px !important;}
html body #pi-bwt-bars .pi-bwt-bar-fill{ height: 100% !important; width: 0% !important; border-radius: 999px !important; transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important;}
html body #pi-bwt-bars .pi-bwt-bar-pct{ width: 56px !important; text-align: right !important; font-variant-numeric: tabular-nums !important; font-size: 0.95rem !important; color: #002c26 !important; font-weight: 700 !important; flex-shrink: 0 !important;}
/* ═══ Dimension Detail Cards ═══ */
html body #pi-bwt-detailArea{ margin-top: 22px !important; display: grid; gap: 14px !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card{ border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 20px 22px !important; background: #ffffff !important; border-left: 4px solid !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card.R{ border-left-color: #d97706 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card.I{ border-left-color: #2563eb !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card.A{ border-left-color: #ec4899 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card.S{ border-left-color: #059669 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card.E{ border-left-color: #eab308 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card.C{ border-left-color: #0d9488 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card__head{ display: flex; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: wrap !important; margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid #f0f4f4 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card__head h3{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: 1.1rem !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-badge{ font-size: 0.78rem !important; font-weight: 700 !important; color: #ffffff !important; padding: 5px 12px !important; border-radius: 50px !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-badge.R{ background: #d97706 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-badge.I{ background: #2563eb !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-badge.A{ background: #ec4899 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-badge.S{ background: #059669 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-badge.E{ background: #eab308 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-badge.C{ background: #0d9488 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card p{ font-size: 0.92rem !important; color: #334155 !important; line-height: 1.7 !important; margin: 0 0 12px !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card h4{ font-size: 0.85rem !important; color: #002c26 !important; margin: 12px 0 6px !important; font-weight: 700 !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card ul{ margin: 0 0 10px !important; padding-left: 20px !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card li{ font-size: 0.88rem !important; color: #334155 !important; line-height: 1.6 !important; padding: 2px 0 !important;}
html body #pi-bwt-detailArea .pi-bwt-deep-jobs{ font-size: 0.88rem !important; color: #334155 !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 10px 13px !important; margin-top: 10px !important; line-height: 1.6 !important;}
html body #pi-bwt-detailArea .pi-bwt-deep-jobs strong{ color: #002c26 !important;}
html body #pi-bwt-detailArea .pi-bwt-tip-box{ font-size: 0.87rem !important; color: #475569 !important; background: #fefce8 !important; border-left: 3px solid #facc15 !important; border-radius: 6px !important; padding: 10px 13px !important; margin-top: 10px !important; line-height: 1.6 !important;}
html body #pi-bwt-detailArea .pi-bwt-tip-box strong{ color: #713f12 !important;}
/* ═══ Result CTAs ═══ */
html body #pi-bwt-resultContainer .pi-bwt-result-ctas{ display: flex; gap: 10px !important; flex-wrap: wrap !important; margin-top: 22px !important; padding-top: 18px !important; border-top: 1px solid #e8ede8 !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn{ display: inline-flex; align-items: center !important; gap: 9px !important; padding: 12px 22px !important; font-weight: 700 !important; font-size: 0.95rem !important; border-radius: 999px !important; border: 1px solid transparent !important; cursor: pointer !important; font-family: inherit !important; transition: transform 0.08s, box-shadow 0.2s, background 0.2s !important; text-decoration: none !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn:active{ transform: translateY(1px) !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn--primary{ background: #002c26 !important; color: #eafc46 !important; box-shadow: 0 6px 20px rgba(0,44,38,0.25) !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn--primary:hover{ background: #003b33 !important; box-shadow: 0 9px 24px rgba(0,44,38,0.32) !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn--ghost{ background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn--ghost:hover{ background: #f8fafc !important; border-color: #cbd5e1 !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn--neutral{ background: #f1f5f9 !important; color: #334155 !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn--neutral:hover{ background: #e2e8f0 !important;}
html body #pi-bwt-resultContainer .pi-bwt-counter{ margin-top: 18px !important; padding-top: 14px !important; border-top: 1px solid #f0f4f4 !important; color: #6b7280 !important; font-size: 0.85rem !important;}
html body #pi-bwt-resultContainer .pi-bwt-counter strong{ color: #002c26 !important; font-weight: 700 !important;}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
html body #pi-bwt-resultContainer{ padding: 0 16px !important;}
}
@media (max-width: 768px) {
html body #pi-bwt-resultContainer{ margin-top: 18px !important; padding: 0 14px !important;}
html body #pi-bwt-resultContainer .pi-bwt-rcard{ padding: 18px 16px !important; border-radius: 14px !important;}
html body #pi-bwt-resultContainer .pi-bwt-result-head h2{ font-size: 1.2rem !important;}
html body #pi-bwt-resultContainer .pi-bwt-result-sub{ font-size: 0.85rem !important;}
html body #pi-bwt-hollandBox{ padding: 18px 20px !important; gap: 10px !important;}
html body #pi-bwt-hollandBox .hc-letters{ font-size: 2.2rem !important;}
html body #pi-bwt-hollandBox .hc-desc{ font-size: 0.82rem !important;}
html body #pi-bwt-bars .pi-bwt-bar-row{ flex-wrap: wrap !important; gap: 7px 10px !important; padding: 10px 10px !important;}
html body #pi-bwt-bars .pi-bwt-bar-label{ min-width: 100% !important; order: 1 !important;}
html body #pi-bwt-bars .pi-bwt-bar-track{ flex: 1 !important; order: 2 !important; height: 13px !important;}
html body #pi-bwt-bars .pi-bwt-bar-pct{ width: 48px !important; order: 3 !important; font-size: 0.88rem !important;}
html body #pi-bwt-bars .pi-bwt-bar-label strong{ font-size: 0.88rem !important;}
html body #pi-bwt-bars .pi-bwt-bar-label span{ font-size: 0.7rem !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card{ padding: 16px 16px !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card__head h3{ font-size: 1rem !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-badge{ font-size: 0.7rem !important; padding: 4px 10px !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card p{ font-size: 0.87rem !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card li{ font-size: 0.83rem !important;}
html body #pi-bwt-detailArea .pi-bwt-deep-jobs, html body #pi-bwt-detailArea .pi-bwt-tip-box{ font-size: 0.82rem !important; padding: 9px 11px !important;}
html body #pi-bwt-resultContainer .pi-bwt-btn{ padding: 11px 18px !important; font-size: 0.9rem !important;}
html body #pi-bwt-resultContainer .pi-bwt-result-ctas .pi-bwt-btn{ flex: 1 1 100% !important; justify-content: center !important;}
}
@media (max-width: 560px) {
html body #pi-bwt-resultContainer{ padding: 0 12px !important;}
html body #pi-bwt-resultContainer .pi-bwt-rcard{ padding: 16px 14px !important;}
html body #pi-bwt-hollandBox{ padding: 16px 16px !important;}
html body #pi-bwt-hollandBox .hc-letters{ font-size: 1.9rem !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card{ padding: 14px 14px !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card__head{ gap: 8px !important; padding-bottom: 8px !important; margin-bottom: 8px !important;}
}
@media (max-width: 400px) {
html body #pi-bwt-resultContainer .pi-bwt-rcard{ padding: 14px 12px !important;}
html body #pi-bwt-resultContainer .pi-bwt-result-head h2{ font-size: 1.08rem !important;}
html body #pi-bwt-detailArea .pi-bwt-dim-card{ padding: 12px 12px !important;}
}
html body #pi-bwt-resultContainer{ overflow-x: hidden !important;}
html body .pi-bwtc-wrap{ font-family: 'DM Sans', system-ui, sans-serif !important; color: #002c26 !important; max-width: 1100px !important; margin: 44px auto 0 !important; box-sizing: border-box !important;}
html body .pi-bwtc-wrap *, html body .pi-bwtc-wrap *::before, html body .pi-bwtc-wrap *::after{ box-sizing: border-box !important;}
html body .pi-bwtc-divider{ height: 1px !important; background: #f0f4f4 !important; border: none !important; margin: 0 0 52px !important;}
html body .pi-bwtc-section{ margin-bottom: 52px !important;}
html body .pi-bwtc-h2{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: clamp(1.3rem, 2.6vw, 1.9rem) !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 0 12px !important; line-height: 1.2 !important;}
html body .pi-bwtc-h3{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 0 10px !important; line-height: 1.3 !important;}
html body .pi-bwtc-lead{ font-size: 0.97rem !important; color: #4a5d5a !important; line-height: 1.75 !important; max-width: 780px !important; margin: 0 0 26px !important;}
html body .pi-bwtc-prose p{ font-size: 0.97rem !important; color: #4a5d5a !important; line-height: 1.82 !important; margin: 0 0 16px !important; max-width: 820px !important;}
html body .pi-bwtc-prose p:last-child{ margin-bottom: 0 !important;}
html body .pi-bwtc-prose strong{ color: #002c26 !important; font-weight: 700 !important;}
html body .pi-bwtc-prose a{ color: #002c26 !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: #b5cc00 !important; text-underline-offset: 3px !important;}
/* ═══ Author Strip ═══ */
html body .pi-bwtc-author-strip{ display: flex !important; align-items: center !important; gap: 16px !important; background: #F7F5EF !important; border: 1px solid #e8ede8 !important; border-radius: 14px !important; padding: 16px 20px !important; margin-bottom: 44px !important;}
html body .pi-bwtc-author-strip-ava{ width: 48px !important; height: 48px !important; border-radius: 50% !important; overflow: hidden !important; flex-shrink: 0 !important; border: 2px solid #eafc46 !important;}
html body .pi-bwtc-author-strip-ava img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;}
html body .pi-bwtc-author-strip-text{ flex: 1 !important; min-width: 0 !important;}
html body .pi-bwtc-author-strip-name{ font-weight: 700 !important; font-size: 0.9rem !important; color: #002c26 !important;}
html body .pi-bwtc-author-strip-cred{ font-size: 0.78rem !important; color: #4a5d5a !important; line-height: 1.45 !important;}
html body .pi-bwtc-author-strip-stats{ display: flex !important; gap: 14px !important; flex-shrink: 0 !important;}
html body .pi-bwtc-author-strip-stat{ text-align: center !important;}
html body .pi-bwtc-author-strip-stat-val{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: 1.18rem !important; font-weight: 400 !important; color: #002c26 !important; line-height: 1 !important;}
html body .pi-bwtc-author-strip-stat-label{ font-size: 0.66rem !important; color: #4a5d5a !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-top: 3px !important;}
/* ═══ ToC ═══ */
html body .pi-bwtc-toc{ background: #F7F5EF !important; border: 1px solid #e8ede8 !important; border-radius: 14px !important; padding: 22px 28px !important; margin-bottom: 44px !important;}
html body .pi-bwtc-toc-title{ font-family: 'DM Serif Display', serif !important; font-size: 0.95rem !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 0 12px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important;}
html body .pi-bwtc-toc-list{ margin: 0 !important; padding: 0 !important; list-style: none !important; columns: 2 !important; column-gap: 28px !important;}
html body .pi-bwtc-toc-list li{ list-style: none !important; break-inside: avoid !important; margin-bottom: 7px !important;}
html body .pi-bwtc-toc-list li::before, html body .pi-bwtc-toc-list li::marker{ content: none !important; display: none !important;}
html body .pi-bwtc-toc-list a{ font-size: 0.84rem !important; color: #002c26 !important; font-weight: 500 !important; text-decoration: none !important; display: flex !important; align-items: baseline !important; gap: 7px !important; line-height: 1.5 !important;}
html body .pi-bwtc-toc-list a:hover{ color: #00543D !important;}
html body .pi-bwtc-toc-list a::before{ content: "→" !important; display: inline !important; font-size: 0.7rem !important; color: #b5cc00 !important; flex-shrink: 0 !important; font-weight: 700 !important;}
/* ═══ USP Row ═══ */
html body .pi-bwtc-usp-row{ display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; margin-bottom: 44px !important;}
html body .pi-bwtc-usp-item{ display: flex !important; gap: 12px !important; align-items: flex-start !important; background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-radius: 12px !important; padding: 18px 16px !important;}
html body .pi-bwtc-usp-icon{ flex-shrink: 0 !important; width: 40px !important; height: 40px !important; background: #F7F5EF !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important;}
html body .pi-bwtc-usp-ttl{ font-weight: 700 !important; font-size: 0.9rem !important; color: #002c26 !important; margin-bottom: 3px !important;}
html body .pi-bwtc-usp-desc{ font-size: 0.82rem !important; color: #4a5d5a !important; line-height: 1.55 !important; margin: 0 !important;}
/* ═══ Intro Stats Grid ═══ */
html body .pi-bwtc-intro-grid{ display: grid !important; grid-template-columns: 1.6fr 1fr !important; gap: 32px !important; align-items: start !important;}
html body .pi-bwtc-stats-grid{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important;}
html body .pi-bwtc-stat-card{ background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-radius: 12px !important; padding: 18px 16px !important; text-align: center !important;}
html body .pi-bwtc-stat-num{ display: block !important; font-family: 'DM Serif Display', Georgia, serif !important; font-size: 1.8rem !important; font-weight: 400 !important; color: #002c26 !important; line-height: 1 !important; margin-bottom: 5px !important;}
html body .pi-bwtc-stat-label{ display: block !important; font-size: 0.72rem !important; color: #4a5d5a !important; font-weight: 600 !important; line-height: 1.35 !important;}
/* ═══ RIASEC Dimension Cards ═══ */
html body .pi-bwtc-dims{ display: grid !important; gap: 18px !important;}
html body .pi-bwtc-dim-card{ background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-left: 4px solid !important; border-radius: 14px !important; padding: 22px 24px !important;}
html body .pi-bwtc-dim-card.R{ border-left-color: #d97706 !important;}
html body .pi-bwtc-dim-card.I{ border-left-color: #2563eb !important;}
html body .pi-bwtc-dim-card.A{ border-left-color: #ec4899 !important;}
html body .pi-bwtc-dim-card.S{ border-left-color: #059669 !important;}
html body .pi-bwtc-dim-card.E{ border-left-color: #eab308 !important;}
html body .pi-bwtc-dim-card.C{ border-left-color: #0d9488 !important;}
html body .pi-bwtc-dim-head{ display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 12px !important;}
html body .pi-bwtc-dim-letter{ flex-shrink: 0 !important; width: 42px !important; height: 42px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-family: 'DM Serif Display', serif !important; font-size: 1.2rem !important; font-weight: 400 !important;}
html body .pi-bwtc-dim-card.R .pi-bwtc-dim-letter{ background: #d97706 !important;}
html body .pi-bwtc-dim-card.I .pi-bwtc-dim-letter{ background: #2563eb !important;}
html body .pi-bwtc-dim-card.A .pi-bwtc-dim-letter{ background: #ec4899 !important;}
html body .pi-bwtc-dim-card.S .pi-bwtc-dim-letter{ background: #059669 !important;}
html body .pi-bwtc-dim-card.E .pi-bwtc-dim-letter{ background: #eab308 !important;}
html body .pi-bwtc-dim-card.C .pi-bwtc-dim-letter{ background: #0d9488 !important;}
html body .pi-bwtc-dim-head h3{ font-family: 'DM Serif Display', serif !important; font-size: 1.15rem !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 !important; line-height: 1.25 !important;}
html body .pi-bwtc-dim-head h3 .en{ font-size: 0.85rem !important; color: #6b7280 !important; font-style: italic !important; font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; margin-left: 4px !important;}
html body .pi-bwtc-dim-spectrum{ display: flex !important; align-items: center !important; gap: 12px !important; margin: 10px 0 16px !important; font-size: 0.8rem !important; color: #475569 !important;}
html body .pi-bwtc-dim-spectrum .poles{ display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; gap: 2px !important;}
html body .pi-bwtc-dim-spectrum .spec-l{ text-align: right !important;}
html body .pi-bwtc-dim-spectrum .spec-r{ text-align: left !important;}
html body .pi-bwtc-spectrum-bar{ flex: 1 !important; height: 6px !important; border-radius: 999px !important;}
html body .pi-bwtc-dim-card.R .pi-bwtc-spectrum-bar{ background: linear-gradient(90deg, #e5e7eb, #d97706) !important;}
html body .pi-bwtc-dim-card.I .pi-bwtc-spectrum-bar{ background: linear-gradient(90deg, #e5e7eb, #2563eb) !important;}
html body .pi-bwtc-dim-card.A .pi-bwtc-spectrum-bar{ background: linear-gradient(90deg, #e5e7eb, #ec4899) !important;}
html body .pi-bwtc-dim-card.S .pi-bwtc-spectrum-bar{ background: linear-gradient(90deg, #e5e7eb, #059669) !important;}
html body .pi-bwtc-dim-card.E .pi-bwtc-spectrum-bar{ background: linear-gradient(90deg, #e5e7eb, #eab308) !important;}
html body .pi-bwtc-dim-card.C .pi-bwtc-spectrum-bar{ background: linear-gradient(90deg, #e5e7eb, #0d9488) !important;}
html body .pi-bwtc-dim-card p{ font-size: 0.92rem !important; color: #334155 !important; line-height: 1.75 !important; margin: 0 0 14px !important;}
html body .pi-bwtc-dim-card p strong{ color: #002c26 !important;}
html body .pi-bwtc-dim-cols{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-top: 6px !important;}
html body .pi-bwtc-dim-cols h4{ font-size: 0.85rem !important; color: #002c26 !important; margin: 0 0 6px !important; font-weight: 700 !important;}
html body .pi-bwtc-dim-cols ul{ margin: 0 !important; padding-left: 18px !important;}
html body .pi-bwtc-dim-cols li{ font-size: 0.85rem !important; color: #334155 !important; line-height: 1.6 !important; padding: 2px 0 !important;}
html body .pi-bwtc-dim-jobs{ font-size: 0.88rem !important; color: #334155 !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 11px 14px !important; margin-top: 14px !important; line-height: 1.6 !important;}
html body .pi-bwtc-dim-jobs strong{ color: #002c26 !important;}
/* ═══ Wissenschaft ═══ */
html body .pi-bwtc-sci-grid{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px !important; align-items: start !important;}
html body .pi-bwtc-sci-list{ list-style: none !important; margin: 0 !important; padding: 0 !important;}
html body .pi-bwtc-sci-list li{ list-style: none !important; padding: 10px 14px !important; background: #fafafa !important; border-radius: 8px !important; margin-bottom: 6px !important; font-size: 0.88rem !important; color: #334155 !important; line-height: 1.55 !important; border-left: 3px solid #eafc46 !important;}
html body .pi-bwtc-sci-list li::before, html body .pi-bwtc-sci-list li::marker{ content: none !important; display: none !important;}
html body .pi-bwtc-sci-list li strong{ color: #002c26 !important;}
html body .pi-bwtc-metric-row{ display: grid !important; grid-template-columns: 190px 1fr auto !important; gap: 10px !important; align-items: center !important; padding: 9px 0 !important; border-bottom: 1px solid #f0f4f4 !important; font-size: 0.85rem !important;}
html body .pi-bwtc-metric-row:last-child{ border-bottom: none !important;}
html body .pi-bwtc-metric-label{ color: #475569 !important; font-weight: 500 !important;}
html body .pi-bwtc-metric-bar-wrap{ height: 8px !important; background: #f1f5f9 !important; border-radius: 999px !important; overflow: hidden !important;}
html body .pi-bwtc-metric-bar{ height: 100% !important; background: #00543D !important; border-radius: 999px !important;}
html body .pi-bwtc-metric-val{ color: #002c26 !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; min-width: 75px !important; text-align: right !important;}
html body .pi-bwtc-sci-note{ font-size: 0.78rem !important; color: #6b7280 !important; font-style: italic !important; margin-top: 12px !important; line-height: 1.55 !important;}
/* ═══ Hexagon ═══ */
html body .pi-bwtc-hexagon-wrap{ display: grid !important; grid-template-columns: 1fr 1.2fr !important; gap: 32px !important; align-items: center !important; background: #F7F5EF !important; border-radius: 16px !important; padding: 32px 36px !important;}
html body .pi-bwtc-hexagon-svg{ width: 100% !important; max-width: 380px !important; height: auto !important; margin: 0 auto !important; display: block !important;}
html body .pi-bwtc-hexagon-legend{ font-size: 0.92rem !important; line-height: 1.7 !important; color: #334155 !important;}
html body .pi-bwtc-hexagon-legend strong{ color: #002c26 !important;}
html body .pi-bwtc-hexagon-legend p{ margin: 0 0 12px !important;}
html body .pi-bwtc-hexagon-legend p:last-child{ margin-bottom: 0 !important;}

/* ═══ RESPONSIVE – Teil A ═══ */
@media (max-width: 1024px) {
html body .pi-bwtc-wrap{ padding: 0 16px !important;}
}
@media (max-width: 900px) {
html body .pi-bwtc-intro-grid{ grid-template-columns: 1fr !important; gap: 22px !important;}
html body .pi-bwtc-usp-row{ grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important;}
html body .pi-bwtc-sci-grid{ grid-template-columns: 1fr !important; gap: 24px !important;}
html body .pi-bwtc-hexagon-wrap{ grid-template-columns: 1fr !important; gap: 20px !important; padding: 24px !important;}
}
@media (max-width: 768px) {
html body .pi-bwtc-wrap{ margin-top: 30px !important; padding: 0 14px !important;}
html body .pi-bwtc-section{ margin-bottom: 36px !important;}
html body .pi-bwtc-divider{ margin-bottom: 36px !important;}
html body .pi-bwtc-h2{ font-size: 1.25rem !important; line-height: 1.3 !important;}
html body .pi-bwtc-h3{ font-size: 1.05rem !important;}
html body .pi-bwtc-lead{ font-size: 0.9rem !important; line-height: 1.65 !important;}
html body .pi-bwtc-prose p{ font-size: 0.9rem !important; line-height: 1.7 !important;}
html body .pi-bwtc-author-strip{ flex-wrap: wrap !important; padding: 14px 16px !important; gap: 12px !important;}
html body .pi-bwtc-author-strip-stats{ width: 100% !important; justify-content: space-around !important; padding-top: 12px !important; border-top: 1px solid #e8ede8 !important; gap: 8px !important;}
html body .pi-bwtc-author-strip-stat-val{ font-size: 1.05rem !important;}
html body .pi-bwtc-author-strip-stat-label{ font-size: 0.6rem !important;}
html body .pi-bwtc-toc{ padding: 16px 18px !important;}
html body .pi-bwtc-toc-list{ columns: 1 !important;}
html body .pi-bwtc-toc-list a{ font-size: 0.8rem !important;}
html body .pi-bwtc-usp-row{ grid-template-columns: 1fr !important; gap: 10px !important;}
html body .pi-bwtc-stats-grid{ grid-template-columns: 1fr 1fr !important; gap: 10px !important;}
html body .pi-bwtc-stat-num{ font-size: 1.5rem !important;}
html body .pi-bwtc-stat-label{ font-size: 0.68rem !important;}
html body .pi-bwtc-dim-card{ padding: 18px 16px !important;}
html body .pi-bwtc-dim-letter{ width: 36px !important; height: 36px !important; font-size: 1.05rem !important;}
html body .pi-bwtc-dim-head h3{ font-size: 1rem !important;}
html body .pi-bwtc-dim-head h3 .en{ display: block !important; font-size: 0.75rem !important; margin-left: 0 !important; margin-top: 2px !important;}
html body .pi-bwtc-dim-spectrum{ flex-direction: column !important; gap: 6px !important; font-size: 0.72rem !important;}
html body .pi-bwtc-dim-spectrum .spec-l, html body .pi-bwtc-dim-spectrum .spec-r{ text-align: left !important;}
html body .pi-bwtc-spectrum-bar{ width: 100% !important;}
html body .pi-bwtc-dim-cols{ grid-template-columns: 1fr !important; gap: 10px !important;}
html body .pi-bwtc-dim-cols h4{ font-size: 0.82rem !important;}
html body .pi-bwtc-dim-cols li{ font-size: 0.82rem !important;}
html body .pi-bwtc-dim-jobs{ font-size: 0.82rem !important; padding: 9px 12px !important;}
html body .pi-bwtc-metric-row{ grid-template-columns: 1fr !important; gap: 5px !important; padding: 8px 0 !important;}
html body .pi-bwtc-metric-label{ font-size: 0.82rem !important;}
html body .pi-bwtc-metric-val{ text-align: left !important; font-size: 0.82rem !important;}
}
@media (max-width: 560px) {
html body .pi-bwtc-wrap{ padding: 0 12px !important;}
html body .pi-bwtc-h2{ font-size: 1.12rem !important;}
html body .pi-bwtc-dim-card{ padding: 16px 14px !important;}
}
@media (max-width: 400px) {
html body .pi-bwtc-h2{ font-size: 1.02rem !important;}
html body .pi-bwtc-lead{ font-size: 0.85rem !important;}
html body .pi-bwtc-prose p{ font-size: 0.85rem !important;}
html body .pi-bwtc-dim-card{ padding: 14px 12px !important;}
html body .pi-bwtc-stats-grid{ grid-template-columns: 1fr !important;}
}
html body .pi-bwtc-wrap{ overflow-x: hidden !important;}
html body .pi-sb{margin:12px 0 16px!important;border:1px solid #d7e5db!important;border-radius:8px!important;overflow:hidden!important;background:#fff!important;max-width:100%!important;}
html body .pi-sb-h{background:#198754!important;color:#fff!important;padding:7px 12px!important;margin:0!important;font-weight:700!important;font-size:13.5px!important;line-height:1.3!important;}
html body .pi-sb table{width:100%!important;max-width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;margin:0!important;font-size:13.5px!important;}
html body .pi-sb tr{background:transparent!important;}
html body .pi-sb th, html body .pi-sb td{text-align:left!important;padding:4px 12px!important;border-top:1px solid #eaf1ec!important;vertical-align:top!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:13.5px!important;line-height:1.35!important;}
html body .pi-sb th{width:30%!important;font-weight:600!important;color:#3c5a49!important;background:#f7fbf8!important;font-size:12.5px!important;}
html body .pi-sb td{color:#1d2b22!important;font-weight:400!important;}@media (max-width:700px){
html body .pi-sb{margin:12px 0 16px!important;border-radius:7px!important;}
html body .pi-sb-h{font-size:13px!important;padding:8px 12px!important;}
html body .pi-sb th, html body .pi-sb td{display:block!important;width:auto!important;border-top:0!important;padding:0 12px!important;}
html body .pi-sb th{background:transparent!important;color:#6a8479!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;line-height:1.3!important;padding-top:7px!important;border-top:1px solid #eaf1ec!important;}
html body .pi-sb td{font-size:13.5px!important;line-height:1.35!important;padding-bottom:7px!important;}}
/* ═══ 6×6 Matrix ═══ */
html body .pi-bwtc-kombi-scroll{ overflow-x: auto !important; border-radius: 14px !important; border: 1px solid #f0f4f4 !important;}
html body .pi-bwtc-ktable{ width: 100% !important; min-width: 900px !important; border-collapse: collapse !important; font-size: 0.66rem !important;}
html body .pi-bwtc-ktable th, html body .pi-bwtc-ktable td{ border: 1px solid #f0f4f4 !important; padding: 6px 8px !important; vertical-align: top !important; line-height: 1.4 !important;}
html body .pi-bwtc-ktable thead th{ color: #ffffff !important; font-family: 'DM Serif Display', Georgia, serif !important; font-weight: 400 !important; text-align: center !important; white-space: nowrap !important; font-size: 0.72rem !important; padding: 9px 8px !important;}
html body .pi-bwtc-ktable tbody th{ font-weight: 700 !important; color: #002c26 !important; white-space: nowrap !important; width: 110px !important; border-left-width: 3px !important; border-left-style: solid !important; font-size: 0.72rem !important; background: #F7F5EF !important;}
html body .pi-bwtc-ktable td{ background: #ffffff !important; color: #334155 !important;}
html body .pi-bwtc-ktable td.diag{ background: #fcfdf5 !important; color: #002c26 !important; font-weight: 500 !important;}
html body .pi-bwtc-ktable td strong{ display: block !important; font-weight: 700 !important; color: #002c26 !important; margin-bottom: 2px !important;}
/* ═══ Vergleichstabelle ═══ */
html body .pi-bwtc-table-wrap{ overflow-x: auto !important; border-radius: 14px !important; border: 1px solid #f0f4f4 !important;}
html body .pi-bwtc-ctable{ width: 100% !important; min-width: 700px !important; border-collapse: collapse !important; font-size: 0.84rem !important;}
html body .pi-bwtc-ctable th{ background: #002c26 !important; color: #ffffff !important; padding: 11px 13px !important; font-weight: 700 !important; text-align: left !important; font-size: 0.82rem !important;}
html body .pi-bwtc-ctable th.best{ background: #00543D !important;}
html body .pi-bwtc-ctable td{ padding: 10px 13px !important; border-top: 1px solid #f0f4f4 !important; color: #334155 !important; vertical-align: top !important; line-height: 1.5 !important;}
html body .pi-bwtc-ctable td.best{ background: #fcfdf5 !important; font-weight: 500 !important;}
html body .pi-bwtc-ctable tr:nth-child(even) td{ background: #fafafa !important;}
html body .pi-bwtc-ctable tr:nth-child(even) td.best{ background: #f5fa80 !important;}
html body .pi-bwtc-ctable td:first-child{ font-weight: 700 !important; color: #002c26 !important;}
html body .pi-bwtc-tag{ display: inline-block !important; font-size: 0.72rem !important; font-weight: 700 !important; padding: 2px 9px !important; border-radius: 50px !important;}
html body .pi-bwtc-tag-green{ background: #d1fae5 !important; color: #065f46 !important;}
html body .pi-bwtc-tag-yellow{ background: #fef3c7 !important; color: #92400e !important;}
html body .pi-bwtc-tag-red{ background: #fee2e2 !important; color: #991b1b !important;}
/* ═══ Timing ═══ */
html body .pi-bwtc-timing{ display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important;}
html body .pi-bwtc-timing-card{ background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-radius: 12px !important; padding: 18px 18px !important;}
html body .pi-bwtc-timing-kicker{ font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #4a5d5a !important; background: #F7F5EF !important; padding: 3px 9px !important; border-radius: 50px !important; display: inline-block !important; margin-bottom: 10px !important;}
html body .pi-bwtc-timing-card h3{ font-family: 'DM Serif Display', serif !important; font-size: 1rem !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 0 6px !important; line-height: 1.3 !important;}
html body .pi-bwtc-timing-card p{ font-size: 0.82rem !important; color: #4a5d5a !important; line-height: 1.55 !important; margin: 0 !important;}
/* ═══ Berufsfelder BA ═══ */
html body .pi-bwtc-bf-grid{ display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 10px !important;}
html body .pi-bwtc-bf-item{ background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: 0.84rem !important; font-weight: 600 !important; color: #002c26 !important; transition: border-color 0.15s, background 0.15s !important;}
html body .pi-bwtc-bf-item:hover{ border-color: #b5cc00 !important; background: #fcfdf5 !important;}
html body .pi-bwtc-bf-riasec{ display: block !important; font-size: 0.68rem !important; color: #4a5d5a !important; font-weight: 500 !important; margin-top: 4px !important; letter-spacing: 0.03em !important;}
/* ═══ Interpretation-Grid ═══ */
html body .pi-bwtc-interp-row{ display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important;}
html body .pi-bwtc-interp-item{ display: flex !important; gap: 12px !important; align-items: flex-start !important; background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-radius: 12px !important; padding: 18px 16px !important;}
html body .pi-bwtc-interp-num{ flex-shrink: 0 !important; width: 40px !important; height: 40px !important; background: #eafc46 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; color: #002c26 !important; font-size: 1.05rem !important;}
html body .pi-bwtc-interp-ttl{ font-weight: 700 !important; font-size: 0.9rem !important; color: #002c26 !important; margin-bottom: 3px !important;}
html body .pi-bwtc-interp-desc{ font-size: 0.82rem !important; color: #4a5d5a !important; line-height: 1.55 !important; margin: 0 !important;}
/* ═══ BWT vs SWT Box ═══ */
html body .pi-bwtc-diff-box{ background: linear-gradient(135deg, #fcfdf5 0%, #ffffff 100%) !important; border: 1px solid #eafc46 !important; border-radius: 16px !important; padding: 26px 30px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 22px !important;}
html body .pi-bwtc-diff-col h4{ font-family: 'DM Serif Display', serif !important; font-size: 1.05rem !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 0 8px !important; display: flex !important; align-items: center !important; gap: 8px !important;}
html body .pi-bwtc-diff-col h4 svg{ flex-shrink: 0 !important;}
html body .pi-bwtc-diff-col p{ font-size: 0.9rem !important; color: #334155 !important; line-height: 1.65 !important; margin: 0 0 10px !important;}
html body .pi-bwtc-diff-col a{ color: #002c26 !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: #b5cc00 !important;}
html body .pi-bwtc-diff-tag{ font-size: 0.7rem !important; font-weight: 700 !important; background: #002c26 !important; color: #eafc46 !important; padding: 3px 10px !important; border-radius: 50px !important; display: inline-block !important; margin-bottom: 6px !important;}
/* ═══ Testimonials ═══ */
html body .pi-bwtc-testi-grid{ display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important;}
html body .pi-bwtc-testi-card{ background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-radius: 16px !important; padding: 22px 20px !important; display: flex !important; flex-direction: column !important; gap: 14px !important;}
html body .pi-bwtc-testi-stars{ display: flex !important; gap: 3px !important; color: #eab308 !important; font-size: 0.9rem !important;}
html body .pi-bwtc-testi-code{ display: inline-block !important; background: #002c26 !important; color: #eafc46 !important; font-family: 'DM Serif Display', serif !important; font-size: 0.95rem !important; font-weight: 400 !important; padding: 4px 12px !important; border-radius: 50px !important; letter-spacing: 0.1em !important; align-self: flex-start !important;}
html body .pi-bwtc-testi-quote{ font-size: 0.87rem !important; color: #334155 !important; line-height: 1.75 !important; flex: 1 !important; font-style: italic !important; padding-left: 14px !important; position: relative !important;}
html body .pi-bwtc-testi-quote::before{ content: "\201C" !important; position: absolute !important; left: 0 !important; top: -4px !important; font-size: 1.8rem !important; color: #eafc46 !important; font-style: normal !important; line-height: 1 !important; font-family: 'DM Serif Display', serif !important;}
html body .pi-bwtc-testi-footer{ display: flex !important; align-items: center !important; gap: 10px !important; padding-top: 12px !important; border-top: 1px solid #f0f4f4 !important;}
html body .pi-bwtc-testi-avatar{ width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #002c26 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; color: #eafc46 !important; font-size: 0.9rem !important;}
html body .pi-bwtc-testi-name{ font-weight: 700 !important; font-size: 0.83rem !important; color: #002c26 !important;}
html body .pi-bwtc-testi-context{ font-size: 0.72rem !important; color: #4a5d5a !important;}
html body .pi-bwtc-testi-note{ font-size: 0.75rem !important; color: #4a5d5a !important; margin-top: 14px !important; font-style: italic !important;}
/* ═══ FAQ ═══ */
html body .pi-bwtc-faq-grid{ display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important;}
html body .pi-bwtc-faq-item{ border: 1px solid #f0f4f4 !important; border-radius: 10px !important; overflow: hidden !important; background: #ffffff !important;}
html body .pi-bwtc-faq-q{ width: 100% !important; text-align: left !important; background: #ffffff !important; border: none !important; padding: 15px 18px !important; font-family: inherit !important; font-size: 0.88rem !important; color: #002c26 !important; font-weight: 700 !important; cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 10px !important; line-height: 1.4 !important; transition: background 0.18s !important;}
html body .pi-bwtc-faq-q:hover{ background: #fcfdf5 !important;}
html body .pi-bwtc-faq-q[aria-expanded="true"]{ background: #002c26 !important; color: #eafc46 !important;}
html body .pi-bwtc-faq-icon{ flex-shrink: 0 !important; width: 22px !important; height: 22px !important; background: #fcfdf5 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1rem !important; color: #002c26 !important; transition: transform 0.28s, background 0.18s !important; margin-top: 1px !important; font-weight: 700 !important;}
html body .pi-bwtc-faq-q[aria-expanded="true"] .pi-bwtc-faq-icon{ transform: rotate(45deg) !important; background: #eafc46 !important; color: #002c26 !important;}
html body .pi-bwtc-faq-a{ display: none !important; padding: 14px 18px !important; font-size: 0.88rem !important; color: #334155 !important; line-height: 1.75 !important; border-top: 1px solid #f0f4f4 !important; background: #fafafa !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: #002c26 !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: #b5cc00 !important;}
html body .pi-bwtc-faq-a strong{ color: #002c26 !important;}
/* ═══ Standort-Pills ═══ */
html body .pi-bwtc-locations{ display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 44px !important;}
html body .pi-bwtc-loc-pill{ display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-radius: 50px !important; padding: 8px 14px !important; font-size: 0.83rem !important; font-weight: 600 !important; color: #002c26 !important; text-decoration: none !important; transition: border-color 0.15s, background 0.15s !important;}
html body .pi-bwtc-loc-pill:hover{ border-color: #002c26 !important; background: #fcfdf5 !important;}
html body .pi-bwtc-loc-cta{ display:inline-flex !important; align-items:center !important; gap:8px !important; background:#003A2A !important; color:#D3FA00 !important; border-radius:50px !important; padding:12px 22px !important; margin:4px 0 44px !important; font-size:0.9rem !important; font-weight:700 !important; text-decoration:none !important; transition:background .15s, transform .15s !important;}
html body .pi-bwtc-loc-cta:hover{ background:#00543D !important; transform:translateY(-2px) !important;}
html body .pi-bwtc-loc-pill{ cursor:default !important;}
html body .pi-bwtc-loc-pill svg{ flex-shrink: 0 !important;}
/* ═══ Jan-Box ═══ */
html body .pi-bwtc-jan-box{ background: #002c26 !important; border-radius: 20px !important; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px) !important; display: grid !important; grid-template-columns: auto 1fr !important; gap: 32px !important; align-items: center !important; margin-bottom: 52px !important;}
html body .pi-bwtc-jan-photo{ width: 120px !important; height: 120px !important; border-radius: 50% !important; border: 2px solid rgba(234,252,70,0.25) !important; flex-shrink: 0 !important; overflow: hidden !important;}
html body .pi-bwtc-jan-photo img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;}
html body .pi-bwtc-jan-kicker{ font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #eafc46 !important; margin-bottom: 8px !important; opacity: 0.8 !important;}
html body .pi-bwtc-jan-name{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: clamp(1.25rem, 2vw, 1.6rem) !important; font-weight: 400 !important; color: #ffffff !important; margin: 0 0 6px !important;}
html body .pi-bwtc-jan-title{ font-size: 0.85rem !important; color: rgba(255,255,255,0.62) !important; margin-bottom: 14px !important; line-height: 1.55 !important;}
html body .pi-bwtc-jan-creds{ display: flex !important; flex-wrap: wrap !important; gap: 7px !important; margin-bottom: 18px !important;}
html body .pi-bwtc-jan-cred{ font-size: 0.72rem !important; font-weight: 700 !important; background: rgba(234,252,70,0.12) !important; border: 1px solid rgba(234,252,70,0.22) !important; color: #eafc46 !important; padding: 4px 11px !important; border-radius: 50px !important;}
html body .pi-bwtc-jan-cta{ display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #eafc46 !important; color: #002c26 !important; padding: 12px 26px !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 0.9rem !important; text-decoration: none !important; transition: transform 0.15s !important;}
html body .pi-bwtc-jan-cta:hover{ transform: translateY(-2px) !important;}
/* ═══ CTA Banner ═══ */
html body .pi-bwtc-cta-banner{ background: linear-gradient(135deg, #fcfdf5 0%, #eafc46 100%) !important; border: 1px solid #eafc46 !important; border-radius: 20px !important; padding: clamp(26px, 4vw, 42px) !important; display: grid !important; grid-template-columns: 1.3fr 1fr !important; gap: 28px !important; align-items: center !important; margin-bottom: 44px !important;}
html body .pi-bwtc-cta-banner h3{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: clamp(1.15rem, 2vw, 1.45rem) !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 0 8px !important; line-height: 1.25 !important;}
html body .pi-bwtc-cta-banner p{ font-size: 0.92rem !important; color: #002c26 !important; line-height: 1.65 !important; margin: 0 !important;}
html body .pi-bwtc-cta-banner p strong{ font-weight: 700 !important;}
html body .pi-bwtc-cta-btns{ display: flex !important; flex-direction: column !important; gap: 9px !important;}
html body .pi-bwtc-cta-btn-primary{ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #002c26 !important; color: #eafc46 !important; padding: 13px 24px !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 0.9rem !important; text-decoration: none !important; transition: transform 0.15s !important;}
html body .pi-bwtc-cta-btn-primary:hover{ transform: translateY(-2px) !important;}
html body .pi-bwtc-cta-btn-outline{ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: transparent !important; color: #002c26 !important; padding: 13px 24px !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 0.9rem !important; text-decoration: none !important; border: 2px solid #002c26 !important;}
html body .pi-bwtc-cta-btn-outline:hover{ background: #002c26 !important; color: #eafc46 !important;}
/* ═══ Related ═══ */
html body .pi-bwtc-related{ background: #F7F5EF !important; border-radius: 14px !important; padding: 28px 30px !important;}
html body .pi-bwtc-related-title{ font-family: 'DM Serif Display', Georgia, serif !important; font-size: 1.15rem !important; font-weight: 400 !important; color: #002c26 !important; margin: 0 0 20px !important;}
html body .pi-bwtc-related-cats{ display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important;}
html body .pi-bwtc-related-cat-label{ font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #4a5d5a !important; margin-bottom: 11px !important; padding-bottom: 6px !important; border-bottom: 2px solid #eafc46 !important;}
html body .pi-bwtc-related-link{ display: block !important; font-size: 0.83rem !important; color: #002c26 !important; font-weight: 600 !important; text-decoration: none !important; padding: 8px 11px !important; background: #ffffff !important; border: 1px solid #f0f4f4 !important; border-radius: 8px !important; margin-bottom: 6px !important; line-height: 1.4 !important; transition: border-color 0.15s, background 0.15s !important;}
html body .pi-bwtc-related-link:hover{ border-color: #b5cc00 !important; background: #fcfdf5 !important;}

/* ═══ RESPONSIVE – Teil B ═══ */
@media (max-width: 900px) {
html body .pi-bwtc-timing{ grid-template-columns: repeat(2, 1fr) !important;}
html body .pi-bwtc-bf-grid{ grid-template-columns: repeat(3, 1fr) !important;}
html body .pi-bwtc-interp-row{ grid-template-columns: repeat(2, 1fr) !important;}
html body .pi-bwtc-diff-box{ grid-template-columns: 1fr !important;}
html body .pi-bwtc-cta-banner{ grid-template-columns: 1fr !important; text-align: center !important;}
html body .pi-bwtc-cta-btns{ max-width: 380px !important; margin: 0 auto !important; width: 100% !important;}
}
@media (max-width: 768px) {
html body .pi-bwtc-ctable{ min-width: 540px !important; font-size: 0.75rem !important;}
html body .pi-bwtc-ctable th, html body .pi-bwtc-ctable td{ padding: 8px 10px !important; font-size: 0.75rem !important;}
html body .pi-bwtc-ktable{ min-width: 700px !important; font-size: 0.58rem !important;}
html body .pi-bwtc-ktable th, html body .pi-bwtc-ktable td{ padding: 5px 6px !important;}
html body .pi-bwtc-ktable tbody th{ width: 80px !important;}
html body .pi-bwtc-timing{ grid-template-columns: 1fr !important;}
html body .pi-bwtc-bf-grid{ grid-template-columns: repeat(2, 1fr) !important;}
html body .pi-bwtc-interp-row{ grid-template-columns: 1fr !important;}
html body .pi-bwtc-diff-box{ padding: 20px 18px !important;}
html body .pi-bwtc-faq-grid{ grid-template-columns: 1fr !important; gap: 6px !important;}
html body .pi-bwtc-faq-q{ padding: 13px 14px !important; font-size: 0.83rem !important;}
html body .pi-bwtc-faq-a{ padding: 12px 14px !important; font-size: 0.82rem !important;}
html body .pi-bwtc-testi-grid{ grid-template-columns: 1fr !important; gap: 12px !important;}
html body .pi-bwtc-testi-card{ padding: 18px 16px !important; gap: 10px !important;}
html body .pi-bwtc-testi-quote{ font-size: 0.83rem !important; line-height: 1.7 !important;}
html body .pi-bwtc-jan-box{ grid-template-columns: 1fr !important; text-align: center !important; padding: 26px 20px !important; gap: 18px !important;}
html body .pi-bwtc-jan-photo{ margin: 0 auto !important; width: 94px !important; height: 94px !important;}
html body .pi-bwtc-jan-name{ font-size: 1.18rem !important;}
html body .pi-bwtc-jan-title{ font-size: 0.8rem !important;}
html body .pi-bwtc-jan-creds{ justify-content: center !important; gap: 5px !important;}
html body .pi-bwtc-jan-cred{ font-size: 0.66rem !important; padding: 3px 9px !important;}
html body .pi-bwtc-jan-cta{ font-size: 0.84rem !important; padding: 11px 22px !important;}
html body .pi-bwtc-loc-pill{ font-size: 0.77rem !important; padding: 6px 11px !important;}
html body .pi-bwtc-related{ padding: 22px 18px !important;}
html body .pi-bwtc-related-title{ font-size: 1.02rem !important; margin-bottom: 16px !important;}
html body .pi-bwtc-related-cats{ grid-template-columns: 1fr !important; gap: 20px !important;}
html body .pi-bwtc-related-link{ font-size: 0.8rem !important;}
html body .pi-bwtc-cta-banner{ padding: 22px 18px !important;}
}
@media (max-width: 560px) {
html body .pi-bwtc-ktable, html body .pi-bwtc-ktable th, html body .pi-bwtc-ktable td{ font-size: 0.52rem !important;}
html body .pi-bwtc-ktable tbody th{ width: 70px !important;}
html body .pi-bwtc-ctable{ min-width: 380px !important; font-size: 0.68rem !important;}
html body .pi-bwtc-ctable th, html body .pi-bwtc-ctable td{ padding: 7px 8px !important; font-size: 0.68rem !important;}
}
@media (max-width: 400px) {
html body .pi-bwtc-faq-q{ padding: 11px 12px !important; font-size: 0.8rem !important;}
html body .pi-bwtc-faq-a{ padding: 11px 12px !important; font-size: 0.78rem !important;}
html body .pi-bwtc-jan-box{ padding: 22px 16px !important;}
html body .pi-bwtc-jan-name{ font-size: 1.08rem !important;}
html body .pi-bwtc-jan-cred{ font-size: 0.62rem !important;}
}
html body .pi-top-btn{
  position: fixed !important;
  bottom: 5rem !important;
  right: 2rem !important;
  z-index: 999 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #D3FA00 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease !important;
  pointer-events: none !important;}
html body .pi-top-btn.pi-top-btn--visible{
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;}
html body .pi-top-btn:hover{
  background: #00543D !important;}
html body .pi-top-btn:hover .pi-top-btn__icon{
  stroke: #F7F5EF !important;}
html body .pi-top-btn__icon{
  stroke: #00543D !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.2s ease !important;}