/* =====================================================================
   Persönlichkeitsentwicklung – Übersicht · Redesign 2026
   Lädt NACH persoenlichkeitsentwicklung-uebersicht.css und überschreibt
   gezielt: kompakter Hero mit Suche, helle Methoden-Sektion im Look der
   Methodenseiten (MethodKit), Karten mit Kategorie-Akzent, Fortschritts-
   Badge, kompakte "Auch für den Beruf"-Leiste.
   ===================================================================== */
:root {
    --pe-bg: #f6f8fc;
    --pe-surface: #ffffff;
    --pe-text: #0f172a;
    --pe-muted: #64748b;
    --pe-faint: #94a3b8;
    --pe-line: #e6eaf1;
    --pe-accent: #6366f1;
    --pe-accent-2: #8b5cf6;
    --pe-radius: 18px;
    --pe-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
    --pe-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
}

/* Platz für die schwebende Navbar */
html { scroll-padding-top: 5.5rem; }
body { padding-top: 0; }

/* ---------------- Hero: kompakt, mit Suche ---------------- */
.personality-hero { padding: 5.5rem 0 2.25rem !important; margin-top: 0 !important; }
.personality-hero .pe-hero-container { min-height: 0 !important; display: block !important; max-width: 1120px; margin: 0 auto; padding: 0 1.25rem !important; }
.pe-hero-content { max-width: 720px; }
.pe-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.personality-hero .pe-hero-content .hero-title { font-size: clamp(1.85rem, 3.8vw, 2.75rem) !important; line-height: 1.12 !important; margin: 0 0 12px !important; letter-spacing: -.025em; text-shadow: none !important; white-space: normal !important; }
.personality-hero .pe-hero-content .hero-subtitle { font-size: 1.02rem !important; line-height: 1.55 !important; color: rgba(255,255,255,.86) !important; margin: 0 0 16px !important; max-width: 58ch; text-align: left !important; }
.pe-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: 22px; }
.pe-hero-meta i { color: #c7d2fe; margin-right: 4px; }
.pe-hero-meta b { color: #fff; }
.pe-hero-login {
    appearance: none; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14);
    color: #fff; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 13px; border-radius: 999px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s, transform .15s;
}
.pe-hero-login i { color: #fff; margin: 0; }
.pe-hero-login:hover { background: #fff; color: #312e81; border-color: #fff; }
.pe-hero-login:hover i { color: #312e81; }
.pe-hero-login[hidden] { display: none !important; }

.pe-search { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--pe-radius); padding: 12px; backdrop-filter: blur(12px); }
.pe-search.is-stuck {
    position: sticky; top: 4.6rem; z-index: 40;
    background: rgba(15, 23, 42, .86);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 12px 32px rgba(15,23,42,.28);
}
.pe-search-input { position: relative; }
.pe-search-input > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--pe-faint); pointer-events: none; }
.pe-search .search-input { width: 100% !important; box-sizing: border-box; font: inherit; font-size: 15px !important; padding: 14px 44px 14px 44px !important; border-radius: 14px !important; border: 1.5px solid transparent !important; background: var(--pe-surface) !important; color: var(--pe-text) !important; box-shadow: 0 4px 14px rgba(15,23,42,.12); transition: box-shadow .15s, border-color .15s; }
.pe-search .search-input:focus { outline: none; border-color: #c7d2fe !important; box-shadow: 0 0 0 4px rgba(199,210,254,.45); }
.pe-search .search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--pe-bg); color: var(--pe-muted); cursor: pointer; }
.pe-search .filter-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: flex-start; }
.pe-search .filter-tag {
    padding: 6px 11px 6px 13px !important; border-radius: 999px !important;
    font-size: 13px !important; font-weight: 600 !important; line-height: 1.2;
    border: 1px solid rgba(255,255,255,.25) !important; background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.92) !important; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    box-shadow: none !important; transform: none !important;
    display: inline-flex; align-items: center; gap: 7px; appearance: none; font-family: inherit;
}
.pe-search .filter-tag:hover { background: rgba(255,255,255,.18) !important; transform: none !important; }
.pe-search .filter-tag.active { background: #fff !important; color: #312e81 !important; border-color: #fff !important; }
.pe-search .filter-tag:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 2px; }
.pe-chip-n {
    min-width: 1.35em; height: 1.35em; padding: 0 5px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1.35em; text-align: center;
    background: rgba(15,23,42,.18); color: inherit;
}
.pe-search .filter-tag.active .pe-chip-n { background: #e0e7ff; color: #312e81; }
.method-card.is-filtered { display: none !important; }
.method-card.is-hit { border-color: color-mix(in srgb, var(--c1) 55%, var(--pe-line)) !important; }
.personality-hero .particles-container { opacity: .6; }

/* ---------------- Methoden-Sektion: hell ---------------- */
.personality-methods-overview { background: var(--pe-bg) !important; color: var(--pe-text) !important; padding: 2.25rem 0 3.5rem !important; scroll-margin-top: 6rem; }
.personality-methods-overview .container { max-width: 1200px !important; padding: 0 1.25rem !important; }
.personality-methods-overview .section-header { text-align: left !important; margin: 0 0 1.25rem !important; padding: 0 !important; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.personality-methods-overview .section-title { color: var(--pe-text) !important; font-size: 1.6rem !important; font-weight: 800 !important; margin: 0 !important; letter-spacing: -.01em; text-shadow: none !important; -webkit-text-fill-color: initial !important; background: none !important; }
.personality-methods-overview .section-subtitle { color: var(--pe-muted) !important; font-size: .95rem !important; margin: 4px 0 0 !important; max-width: 60ch; text-align: left !important; }
.pe-result-count { font-size: 13px; color: var(--pe-muted); white-space: nowrap; }
.pe-result-count b { color: var(--pe-text); }

.methods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
@media (max-width: 1024px) { .methods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .methods-grid { grid-template-columns: 1fr !important; gap: 14px !important; } }

/* ---------------- Karten ---------------- */
.method-card {
    background: var(--pe-surface) !important; color: var(--pe-text) !important;
    border: 1px solid var(--pe-line) !important; border-radius: var(--pe-radius) !important;
    box-shadow: var(--pe-shadow) !important; padding: 22px 22px 18px !important;
    height: auto !important; min-height: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    display: flex !important; flex-direction: column; position: relative; overflow: hidden; z-index: 1 !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    --c1: #6366f1; --c2: #8b5cf6;
}
.method-card::before { content: '' !important; position: absolute; left: 0; right: 0; top: 0; height: 4px !important; background: linear-gradient(90deg, var(--c1), var(--c2)) !important; opacity: 1 !important; border-radius: 0 !important; }
.method-card:hover { transform: translateY(-3px) !important; box-shadow: var(--pe-shadow-lg) !important; border-color: var(--c1) !important; background: var(--pe-surface) !important; }
.method-card:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: 2px; }
.method-card .service-icon, .method-card > .method-icon {
    width: 46px !important; height: 46px !important; border-radius: 13px !important; font-size: 19px !important;
    background: linear-gradient(135deg, var(--c1), var(--c2)) !important; color: #fff !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--c1) 30%, transparent) !important; margin: 0 0 14px !important; text-shadow: none !important;
    display: flex !important; align-items: center; justify-content: center; transform: none !important;
}
.method-card:hover .service-icon { background: linear-gradient(135deg, var(--c1), var(--c2)) !important; transform: none !important; }
.method-card h3 { color: var(--pe-text) !important; font-size: 1.08rem !important; font-weight: 800 !important; margin: 0 0 8px !important; line-height: 1.3; letter-spacing: -.01em; }
.method-card:has(.pe-progress) h3 { padding-right: 7.25rem; }
.method-card:hover h3 { color: var(--pe-text) !important; }
.method-card p { color: var(--pe-muted) !important; font-size: .9rem !important; line-height: 1.55 !important; margin: 0 0 12px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 0 0 auto !important; }
.method-card:hover p { color: var(--pe-muted) !important; }
.method-card .service-features { list-style: none !important; margin: 0 0 16px !important; padding: 0 !important; display: grid; gap: 5px; flex: 1 1 auto; }
.method-card .service-features li { font-size: .82rem !important; color: var(--pe-muted) !important; padding: 0 0 0 20px !important; position: relative; line-height: 1.4; background: none !important; border: 0 !important; margin: 0 !important; }
.method-card .service-features li::before { content: '\f00c' !important; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; font-size: 10px; color: var(--c1) !important; background: none !important; width: auto !important; height: auto !important; }
.method-card:hover .service-features li, .method-card:hover .service-features li::before { color: var(--pe-muted) !important; }
.method-card:hover .service-features li::before { color: var(--c1) !important; }
.method-card .service-cta {
    margin-top: auto !important; display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px !important; border-radius: 12px !important; background: color-mix(in srgb, var(--c1) 9%, white) !important;
    color: var(--c1) !important; font-weight: 700 !important; font-size: .88rem !important; border: 0 !important; box-shadow: none !important; transition: background .15s, color .15s !important;
}
.method-card .service-cta .cta-text, .method-card .service-cta span, .method-card .service-cta a { color: inherit !important; font-weight: inherit !important; }
.method-card .service-cta i { color: inherit !important; transition: transform .15s; }
.method-card:hover .service-cta { background: linear-gradient(135deg, var(--c1), var(--c2)) !important; color: #fff !important; }
.method-card:hover .service-cta i { transform: translateX(3px); color: #fff !important; }
.method-card .method-tag { display: none !important; }
.method-card.search-highlight { border-color: var(--c1) !important; }

/* Fortschritts-Badge (wird per JS gesetzt, wenn lokal/cloud ein Stand existiert) */
.pe-progress { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #065f46; background: #d1fae5; border-radius: 999px; padding: 4px 9px; }
.pe-progress.done { color: #3730a3; background: #e0e7ff; }
.pe-progress i { font-size: 10px; }

/* Kategorie-Akzente */
.method-card[data-category="self-discovery"] { --c1: #6366f1; --c2: #8b5cf6; }
.method-card[data-category="goals"] { --c1: #f59e0b; --c2: #f97316; }
.method-card[data-category="communication"] { --c1: #0ea5e9; --c2: #06b6d4; }
.method-card[data-category="mindfulness"] { --c1: #10b981; --c2: #14b8a6; }
.method-card[data-category="coaching"] { --c1: #ec4899; --c2: #f43f5e; }
.method-card[data-category="nlp"] { --c1: #a855f7; --c2: #d946ef; }
.method-card[data-category="habits"] { --c1: #22c55e; --c2: #84cc16; }
.method-card[data-category="analysis"] { --c1: #3b82f6; --c2: #6366f1; }
.method-card[data-category="conflict"] { --c1: #ef4444; --c2: #f97316; }

/* Leerer Suchzustand */
.pe-empty { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--pe-muted); background: var(--pe-surface); border: 1px dashed var(--pe-line); border-radius: var(--pe-radius); }
.pe-empty b { display: block; color: var(--pe-text); font-size: 1.05rem; margin-bottom: 6px; }
.pe-empty button { margin-top: 14px; font: inherit; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--pe-accent), var(--pe-accent-2)); border: 0; border-radius: 12px; padding: 10px 16px; cursor: pointer; }

/* Berufliches (HR-Selbsttest, Bewerbungsmanager, KI-Strategie) ist von dieser Seite entfernt */
.berufliches-section { display: none !important; }

/* ---------------- Kontakt: schlank, im gleichen Look ---------------- */
.contact { background: var(--pe-surface) !important; padding: 2.5rem 0 3.25rem !important; margin: 0 !important; border-top: 1px solid var(--pe-line); }
.contact .container { max-width: 1200px !important; padding: 0 1.25rem !important; }
.contact .section-header { text-align: left !important; margin: 0 0 1.25rem !important; }
.contact .section-title { font-size: 1.45rem !important; font-weight: 800 !important; color: var(--pe-text) !important; margin: 0 !important; }
.contact .section-subtitle { font-size: .95rem !important; color: var(--pe-muted) !important; margin: 4px 0 0 !important; text-align: left !important; max-width: 52ch; }
.contact-content { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important; gap: 20px !important; margin: 0 !important; }
.contact-info { gap: 10px !important; }
.contact-item { padding: 14px 16px !important; border-radius: 14px !important; background: var(--pe-bg) !important; border: 1px solid var(--pe-line); box-shadow: none !important; }
.contact-item:hover { transform: none !important; box-shadow: none !important; border-color: var(--pe-accent); }
.contact-form { background: var(--pe-bg) !important; border: 1px solid var(--pe-line); border-radius: var(--pe-radius); padding: 18px 20px; }
@media (max-width: 768px) {
    .contact-content { grid-template-columns: 1fr !important; }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 768px) {
    .personality-hero { padding: 2.25rem 0 1.75rem !important; }
    .personality-hero .pe-hero-content .hero-title { white-space: normal !important; text-align: left !important; font-size: 1.9rem !important; }
    .pe-hero-meta { gap: 6px 14px; font-size: 12px; margin-bottom: 18px; }
    .pe-search { padding: 10px; border-radius: 14px; }
    .pe-search .filter-tags { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
    .pe-search .filter-tags::-webkit-scrollbar { display: none; }
    .pe-search .filter-tag { flex: 0 0 auto; }
    .personality-methods-overview { padding: 2rem 0 2.5rem !important; }
    .method-card { padding: 18px 18px 16px !important; }
    .pe-progress { top: 14px; right: 14px; }
}

/* Auth-Gate-Karten (hidden-Attribut) bleiben trotz display:flex unsichtbar */
.method-card[hidden] { display: none !important; }
.pe-section-text { min-width: 0; flex: 1 1 420px; }
@media (max-width: 768px) {
    .personality-hero .pe-hero-content .hero-subtitle { display: block !important; font-size: .95rem !important; margin-bottom: 12px !important; }
}