/* stein-master.de/wollmilchsau (08.11.2026) - Ergaenzungen zu seiten.css. Fragezeile oben, FAQ darunter:
   Frage wie ein Feldlabel (klein, fett, Sand hell), Antwort etwas eingesetzt. */
[hidden]{display:none!important}   /* sonst gewinnt display:flex der Klassen gegen das hidden-Attribut */
.frage-box{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;padding:22px 26px}
.frage-box h2{margin-top:0}
.fragezeile{display:flex;gap:10px;flex-wrap:wrap;max-width:1000px}
.fragezeile input{flex:1 1 320px;font:18px/1.4 var(--f-body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px 14px}
.fragezeile input:focus{outline:2px solid var(--accent);outline-offset:1px}
.fragezeile .knopf{flex:0 0 auto;padding:14px 22px}
.hinweis{margin:10px 0 0}
.antwort{margin-top:18px}
#ergebnis{background:#F8F1E6;color:var(--accent-ink);border-left:6px solid var(--accent);border-radius:6px;padding:18px 22px 16px}
#ergebnis a{color:var(--accent-ink);text-decoration-color:#8A6A2F}
#ergebnis .klein{color:#5a504c}
.arbeitet{display:flex;align-items:center;gap:10px;color:var(--accent-hell);font-weight:600;margin:0}
.arbeitet .punkt{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:puls 1.2s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.einstufung{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.marke{display:inline-block;font:700 14px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:6px 10px;background:var(--accent-ink);color:var(--accent-hell)}
.marke.ja{background:#2f6b3a;color:#fff}
.marke.nein{background:#8a2e2e;color:#fff}
.marke.teils,.marke.geplant{background:#8A6A2F;color:#fff}
.marke.fremd,.marke.unsinn{background:#6b6462;color:#fff}
.frage-echo{color:#5a504c;font-style:italic}
.antwort-text{font-size:21px;line-height:1.5;font-weight:500;max-width:80ch;margin:0 0 14px;padding-left:0;border-left:0}
.merken{margin:12px 0 14px;padding:12px 14px;background:#fff;border:1px solid #E6D3B3;border-radius:4px}
.merken label{display:block;font:600 13px/1.4 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#8A6A2F;margin-bottom:6px}
.merken .fragezeile input{font-size:16px;padding:10px 12px;flex-basis:260px;background:#fff;color:var(--accent-ink);border-color:#E6D3B3}
.merken .knopf.zweit{color:var(--accent-ink);border-color:#8A6A2F}
.merken .knopf{padding:12px 16px;font-size:15px}
.naechste{margin:0}
.meldung.sichtbar{display:block}
.meldung[hidden]{display:none}
.faq{counter-reset:faq}
.faq h2{margin-bottom:6px}
.faq .eintrag{border-top:1px solid var(--line);padding:14px 0 14px;counter-increment:faq}
.faq .eintrag:last-of-type{border-bottom:1px solid var(--line)}
.faq .q{display:flex;align-items:baseline;gap:12px;margin:0;font:700 15px/1.4 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-hell)}
.faq .q::before{content:counter(faq) ".";flex:0 0 30px;color:var(--accent);font-size:15px}
.faq .a{margin:8px 0 0 42px;max-width:85ch;font-size:17px;color:var(--fg)}
.faq .a p{margin:0 0 8px}
.faq .a p:last-child{margin-bottom:0}
.faq .eintrag.markiert{background:var(--panel);box-shadow:inset 4px 0 0 var(--accent);padding-left:14px;margin-left:-14px;border-radius:4px}
@media (max-width:640px){.faq .a{margin-left:0}.antwort-text{font-size:17px}}
.faq-link{display:inline-block;margin:-6px 0 14px 0;font-size:15px;color:#5a504c}
.faq .tag{display:inline-block;font:700 11px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:4px 7px;margin-right:10px;vertical-align:2px;background:var(--line);color:var(--fg)}
.faq .tag.ja{background:#2f6b3a;color:#fff}
.faq .tag.nein{background:#8a2e2e;color:#fff}
.faq .tag.teils,.faq .tag.geplant{background:#8A6A2F;color:#fff}
.faq .eintrag.neu{animation:neu 1.6s ease-out}
@keyframes neu{0%{background:#4a3f33}100%{background:transparent}}