/* Persönlichkeitstest — Test-Engine-Oberfläche (dunkles Theme der Site). */

/* Sichtbarer Hero-Titel je Sprachblock — bewusst KEIN h1 (die Seite hat genau
   eine, unsichtbare H1; drei sichtbare wären eins pro Sprachblock gewesen). */
.pa-hero-h1{font-size:clamp(40px,4.6vw,64px);line-height:1.05;letter-spacing:-.055em;margin:0;font-weight:730;max-width:820px;color:var(--ink,#f5f8ff)}

.pa-app{background:linear-gradient(145deg,rgba(18,27,42,.82),rgba(12,18,29,.92));border:1px solid var(--line,rgba(143,174,220,.16));border-radius:14px;padding:26px 26px 30px;margin:0 auto;max-width:860px}
.pa-hidden{display:none!important}

/* Fortschritt */
.pa-progress{position:sticky;top:84px;z-index:5;background:rgba(12,19,31,.96);border:1px solid var(--line,rgba(143,174,220,.16));border-radius:10px;padding:10px 14px;margin:0 0 22px;backdrop-filter:blur(8px)}
.pa-progress-row{display:flex;justify-content:space-between;font-size:12.5px;color:#8fa0b8;margin:0 0 7px}
.pa-progress-bar{background:rgba(255,255,255,.08);border-radius:5px;height:8px;overflow:hidden}
.pa-progress-bar i{display:block;height:100%;background:linear-gradient(90deg,#4d8dff,#45d7ff);border-radius:5px;transition:width .3s}

/* Intro */
.pa-intro h2{margin:0 0 12px;font-size:22px}
.pa-intro p{color:#a7b3c5;font-size:14.5px;margin:0 0 12px}
.pa-intro ul{color:#a7b3c5;font-size:14.5px;margin:0 0 16px;padding-left:20px}
.pa-intro li{margin:0 0 6px}
.pa-privacy-note{margin:0 0 18px;padding:14px 16px;border:1px solid rgba(86,217,155,.35);border-left:4px solid #56d99b;border-radius:10px;background:rgba(86,217,155,.08);color:#dce8e3;font-size:14px;line-height:1.55}
.pa-privacy-note b{color:#73e1b0}

/* Items */
.pa-scale-legend{display:flex;justify-content:space-between;font-size:12px;color:#8fa0b8;margin:0 0 14px;padding:0 2px}
.pa-item{padding:16px 2px 14px;border-bottom:1px solid var(--line,rgba(143,174,220,.16))}
.pa-item:last-of-type{border-bottom:none}
.pa-item.pa-missing{background:rgba(229,72,77,.07);border-radius:10px;padding-left:12px;padding-right:12px}
.pa-item-text{font-size:15px;color:var(--ink,#f5f8ff);margin:0 0 12px;font-weight:560}
.pa-item.pa-attn .pa-item-text{color:#9fdfff}
.pa-options{display:flex;justify-content:space-between;gap:6px;max-width:520px}
.pa-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.pa-opt input{position:absolute;opacity:0;pointer-events:none}
.pa-dot{width:40px;height:40px;border-radius:50%;border:2px solid rgba(143,174,220,.35);background:rgba(255,255,255,.03);transition:.15s;display:grid;place-items:center;font-size:12px;color:#7c8a9d}
.pa-opt:nth-child(1) .pa-dot,.pa-opt:nth-child(5) .pa-dot{width:44px;height:44px}
.pa-opt:hover .pa-dot{border-color:#4d8dff}
.pa-opt input:checked+.pa-dot{background:linear-gradient(135deg,#4d8dff,#246df1);border-color:#7fb0ff;color:#fff;box-shadow:0 0 18px rgba(77,141,255,.4)}
.pa-opt input:focus-visible+.pa-dot{outline:2px solid #45d7ff;outline-offset:2px}
.pa-opt small{font-size:10.5px;color:#7c8a9d;text-align:center;line-height:1.25;min-height:26px}
@media(max-width:560px){.pa-opt small{display:none}.pa-options{max-width:none}.pa-dot{width:44px;height:44px}}

/* Navigation */
.pa-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 0}
.pa-back{background:none;border:1px solid var(--line,rgba(143,174,220,.16));color:#a9b5c6;border-radius:9px;min-height:48px;padding:0 20px;font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.pa-back:hover{color:#fff;border-color:rgba(121,173,255,.5)}
.pa-msg{color:#ffb4b6;background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.32);border-radius:9px;padding:10px 14px;font-size:13.5px;margin:16px 0 0}

/* Abschluss-Formular */
.pa-final h2{margin:0 0 8px;font-size:21px}
.pa-final>p{color:#a7b3c5;font-size:14px;margin:0 0 18px}
.pa-field{margin:0 0 16px}
.pa-field label{display:block;font-size:13px;font-weight:700;color:#e8edf3;margin:0 0 7px}
.pa-field label span{color:#8a97ab;font-weight:500}
.pa-field input,.pa-field select{width:100%;height:48px;padding:0 14px;border-radius:9px;border:1px solid var(--line,rgba(143,174,220,.16));background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:14.5px}
.pa-field input:focus,.pa-field select:focus{outline:none;border-color:#4d8dff}
.pa-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.pa-grid2{grid-template-columns:1fr}}
.pa-consent{display:flex;gap:11px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid var(--line,rgba(143,174,220,.16));border-radius:10px;padding:14px 16px;margin:0 0 12px;cursor:pointer}
.pa-consent input{width:19px;height:19px;margin:2px 0 0;flex-shrink:0;accent-color:#246df1}
.pa-consent div{font-size:13px;color:#a7b3c5;line-height:1.55}
.pa-consent a{color:#6bb8ff;text-decoration:underline}
.pa-consent.pa-missing{border-color:rgba(229,72,77,.5)}
.pa-hp{position:absolute;left:-9999px;top:-9999px}
.pa-fine{font-size:12px;color:#7c8a9d;margin:14px 0 0;line-height:1.6}

/* Fertig */
.pa-done{text-align:center;padding:20px 0}
.pa-done-icon{width:64px;height:64px;border-radius:50%;background:rgba(50,180,115,.15);display:grid;place-items:center;margin:0 auto 18px;font-size:28px;color:#54e39c}
.pa-done h2{margin:0 0 10px;font-size:22px}
.pa-done p{color:#a7b3c5;font-size:14.5px;max-width:520px;margin:0 auto 10px}

/* Wissenschafts-/Info-Abschnitte auf der Landing-Page */
.pa-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 0}
@media(max-width:820px){.pa-facts{grid-template-columns:1fr}}
.pa-fact{background:linear-gradient(145deg,rgba(18,27,42,.6),rgba(12,18,29,.85));border:1px solid var(--line,rgba(143,174,220,.16));border-radius:12px;padding:18px 20px}
.pa-fact b{display:block;font-size:15px;color:var(--ink,#f5f8ff);margin:0 0 6px}
.pa-fact p{margin:0;font-size:13.5px;color:#9aa6b8;line-height:1.6}
.pa-refs{font-size:12px;color:#7c8a9d;line-height:1.7;margin:18px 0 0}
.pa-refs li{margin:0 0 4px}

/* ---------- Blockstruktur ---------- */
/* Der Fahrplan auf der Startseite: Länge vorher ehrlich zeigen. */
.pa-plan{margin:20px 0 18px;padding:16px 18px;background:rgba(255,255,255,.03);border:1px solid var(--line,rgba(143,174,220,.16));border-radius:12px}
.pa-plan>b{display:block;font-size:14px;color:var(--ink,#f5f8ff);margin:0 0 10px}
.pa-plan-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid rgba(143,174,220,.1)}
.pa-plan-row:last-of-type{border-bottom:none}
.pa-plan-no{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:rgba(77,141,255,.16);color:#6bdfff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.pa-plan-name{flex:1;font-size:14px;color:#dbe4f0}
.pa-plan-meta{font-size:12px;color:#8fa0b8;white-space:nowrap}
.pa-plan-note{margin:12px 0 0;font-size:12.5px;color:#8fa0b8;line-height:1.55}

.pa-block-step{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6bdfff}
.pa-block-meta{margin:0 0 14px;font-size:13px;color:#8fa0b8}
.pa-block-hint{margin:0 0 18px;padding:12px 15px;background:rgba(77,141,255,.08);border-left:3px solid #4d8dff;border-radius:8px;font-size:13.5px;color:#b9c8de;line-height:1.55}

/* ---------- Kartensortierung ---------- */
.pa-cs-stem{margin:0 0 16px;font-size:14px;color:#8fa0b8}
.pa-cs-card{background:linear-gradient(145deg,rgba(30,45,70,.95),rgba(18,28,45,.95));border:1px solid rgba(100,155,255,.32);border-radius:14px;padding:26px 24px;margin:0 0 20px;box-shadow:0 18px 40px rgba(0,0,0,.35);position:relative;min-height:104px;display:flex;align-items:center}
.pa-cs-card p{margin:0;font-size:19px;line-height:1.45;color:var(--ink,#f5f8ff);font-weight:560}
.pa-cs-count{position:absolute;top:12px;right:16px;font-size:11.5px;color:#7c8a9d}
.pa-cs-tiers{display:flex;flex-direction:column;gap:8px}
.pa-cs-tier{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 16px;border-radius:10px;border:1px solid var(--line,rgba(143,174,220,.16));background:rgba(255,255,255,.035);color:#dbe4f0;font:inherit;font-size:14.5px;cursor:pointer;transition:.15s;text-align:left}
.pa-cs-tier b{font-weight:650}
.pa-cs-tier small{font-size:11.5px;color:#7c8a9d;white-space:nowrap}
.pa-cs-tier:hover:not(:disabled){border-color:#4d8dff;background:rgba(77,141,255,.12)}
.pa-cs-tier:disabled,.pa-cs-full{opacity:.4;cursor:default}
.pa-cs-done{display:grid;gap:12px;margin:0 0 8px}
.pa-cs-group{padding:12px 15px;background:rgba(255,255,255,.03);border:1px solid var(--line,rgba(143,174,220,.16));border-radius:10px}
.pa-cs-group b{display:block;font-size:12.5px;color:#6bdfff;margin:0 0 6px}
.pa-cs-group ul{margin:0;padding-left:18px}
.pa-cs-group li{font-size:13.5px;color:#b9c8de;margin:0 0 3px}

/* ---------- Zwischenergebnis ---------- */
.pa-payoff{text-align:center;padding:8px 0}
.pa-payoff-icon{width:56px;height:56px;border-radius:50%;background:rgba(50,180,115,.16);display:grid;place-items:center;margin:0 auto 16px;font-size:24px;color:#54e39c}
.pa-payoff h2{margin:0 0 10px;font-size:21px}
.pa-payoff>p{color:#a7b3c5;font-size:14.5px;max-width:560px;margin:0 auto 20px}
.pa-mini{text-align:left;max-width:520px;margin:0 auto 18px}
.pa-mini-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.pa-mini-label{width:190px;flex-shrink:0;font-size:13.5px;color:#dbe4f0}
.pa-mini-bar{flex:1;height:9px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.pa-mini-bar i{display:block;height:100%;background:linear-gradient(90deg,#4d8dff,#45d7ff);border-radius:5px}
.pa-mini-rank{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:rgba(77,141,255,.16);color:#6bdfff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.pa-mini-text{font-size:13.5px;color:#dbe4f0;line-height:1.45}
.pa-mini-note{font-size:13px;color:#8fa0b8;margin:0}
@media(max-width:560px){.pa-mini-label{width:120px;font-size:12.5px}}

/* ---------- Pause ---------- */
.pa-pause{text-align:center;padding:14px 0}
.pa-pause-icon{width:56px;height:56px;border-radius:50%;background:rgba(240,180,41,.14);display:grid;place-items:center;margin:0 auto 16px;font-size:26px}
.pa-pause h2{margin:0 0 10px;font-size:21px}
.pa-pause p{color:#a7b3c5;font-size:14.5px;max-width:560px;margin:0 auto 10px}
.pa-pause-meta{color:#8fa0b8!important;font-size:13px!important;margin-bottom:20px!important}

/* Nachfrage zu Energie und Nutzung */
.pa-fu-q{font-size:12.5px;color:#8fa0b8;margin:12px 0 8px;line-height:1.5}
.pa-pause-out{margin:6px 0 18px;text-align:center}
.pa-pause-out button{font-size:13px;min-height:42px;padding:0 16px}

/* Was der Test kann und was nicht — steht auf der Startseite, nicht erst im
   Report: Wer 30 Minuten investiert, soll vorher wissen, was er bekommt. */
.pa-honesty{border-left:3px solid #56d99b}
.pa-honesty p{margin:0 0 10px}
.pa-honesty-limits{color:#8fa0b8!important}

/* ---------- Fragezeichen: Erklärung und Rückmeldung ----------
   Das Fragezeichen steht an jeder Aussage, sein Inhalt kommt aber von der
   Skala — vier Aussagen messen dasselbe, vier Umformulierungen wären Füllwerk.
   Nur etwa jeder Siebte öffnet so etwas überhaupt; wer beim ersten Mal nichts
   Neues findet, öffnet nie wieder eins. Deshalb dezent, aber gut treffbar. */
.pa-help-btn{margin-left:8px;width:20px;height:20px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#8fa0b8;font-size:12px;font-weight:700;line-height:1;cursor:pointer;padding:0;vertical-align:middle;transition:background .12s,color .12s,border-color .12s}
.pa-help-btn:hover,.pa-help-btn:focus-visible{background:rgba(77,141,255,.16);color:#7db3ff;border-color:rgba(77,141,255,.5)}
.pa-help-btn.pa-help-open{background:#4d8dff;border-color:#4d8dff;color:#fff}
.pa-help-panel{grid-column:1/-1;margin:10px 0 2px;padding:12px 14px;border-radius:9px;background:rgba(77,141,255,.07);border:1px solid rgba(77,141,255,.18)}
.pa-help-text{margin:0;font-size:13.5px;line-height:1.6;color:#c3cede}
.pa-help-fb{margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.08)}
.pa-help-fb-label{display:block;font-size:12.5px;color:#8fa0b8;margin:0 0 6px}
.pa-help-fb-input{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:#e8ecf3;font:inherit;font-size:13.5px;line-height:1.5;resize:vertical;min-height:44px}
.pa-help-fb-input:focus{outline:none;border-color:rgba(77,141,255,.55);background:rgba(0,0,0,.3)}
.pa-help-fb-note{margin:6px 0 0;font-size:12px;color:#7c8a9d;line-height:1.5}
.pa-cs-card .pa-help-panel{margin-top:14px;text-align:left}
/* Der sichtbare Kreis bleibt klein, die Trefferflaeche wird es nicht: 24 x 24
   Pixel sind auf dem Telefon zu wenig (Apple nennt 44, Android 48). Ein
   ::after-Rechteck vergroessert das Ziel, ohne das Layout anzufassen —
   ein groesserer Knopf wuerde die Fragezeile auseinanderziehen. */
@media(max-width:560px){
  .pa-help-btn{width:24px;height:24px;font-size:13px;position:relative}
  .pa-help-btn::after{content:'';position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
}