:root{
  --grund:#0f1117; --flaeche:#171a23; --flaeche2:#1f2330; --rand:#2a2f3e;
  --tinte:#e8e9f0; --tinte2:#a9adbd; --akzent:#9d8cff; --akzent2:#c5b8ff;
  --radius:14px; --breite:1040px;
}
@media (prefers-color-scheme: light){
  :root{ --grund:#f7f7fb; --flaeche:#ffffff; --flaeche2:#eeeef6; --rand:#dddfe8; --tinte:#15171f; --tinte2:#565b6b; --akzent:#5b46e0; --akzent2:#3d2fb0; }
}
*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;background:var(--grund);color:var(--tinte);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--akzent2);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.92em}
code{background:var(--flaeche2);padding:.1em .4em;border-radius:6px}
pre{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:16px 18px;overflow:auto;line-height:1.5}
pre code{background:none;padding:0}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Kopf (wie im Arcade): klebt oben unterhalb von Statusleiste und Dynamic Island, reicht über die ganze Breite, der Inhalt
   fluchtet mit der Spalte (--breite); matter Hintergrund, gleiche Höhe auf allen Seiten. */
.kopf{position:sticky;top:0;z-index:40;min-height:calc(64px + env(safe-area-inset-top));padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px;padding-left:max(16px,env(safe-area-inset-left),calc((100% - var(--breite)) / 2 + 16px));padding-right:max(16px,env(safe-area-inset-right),calc((100% - var(--breite)) / 2 + 16px));background:color-mix(in srgb,var(--grund) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--rand) 60%,transparent)}
.marke{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--tinte);font-size:1.1em;white-space:nowrap;min-width:0}
.marke img{border-radius:9px}
.kopf nav{display:flex;gap:4px}
.kopf nav a{padding:8px 12px;border-radius:999px;color:var(--tinte2)}
.kopf nav a:hover{background:var(--flaeche2);text-decoration:none;color:var(--tinte)}
.kopf nav a.aktiv{background:var(--flaeche2);color:var(--tinte)}
main{max-width:var(--breite);margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
.buehne{padding:56px 0 24px}
.vorzeile{color:var(--akzent2);font-weight:600;letter-spacing:.02em;margin:0 0 8px;font-size:.95em}
h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.1;margin:0 0 18px;letter-spacing:-.01em}
h2{font-size:1.55rem;margin:0 0 12px}
h3{font-size:1.1rem;margin:0 0 6px}
.lead{font-size:1.2em;max-width:52ch;margin:0 0 12px}
.en{color:var(--tinte2);font-style:italic;max-width:60ch;margin:0 0 18px}
.taten{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.knopf{display:inline-block;background:var(--akzent);color:#fff;padding:10px 18px;border-radius:999px;font-weight:600}
.knopf:hover{text-decoration:none;filter:brightness(1.08)}
.knopf.leise{background:var(--flaeche2);color:var(--tinte)}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.karte{display:block;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:20px 22px;color:var(--tinte)}
a.karte:hover{text-decoration:none;border-color:var(--akzent)}
.karte h2{font-size:1.25rem;margin-bottom:8px}
.karte p{margin:0 0 8px;color:var(--tinte2)}
.abschnitt{padding:28px 0;border-top:1px solid var(--rand)}
.abschnitt:first-child{border-top:0}
.spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.spalten p{margin:0;color:var(--tinte2)}
figure{margin:0}
figure img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--rand);display:block}
figcaption{color:var(--tinte2);font-size:.95em;margin-top:8px}
.tabelle{width:100%;border-collapse:collapse;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden}
.tabelle th,.tabelle td{text-align:left;padding:10px 12px;vertical-align:top;border-top:1px solid var(--rand)}
.tabelle th{background:var(--flaeche2);border-top:0}
.schritte li{margin:8px 0}
.klein{color:var(--tinte2);font-size:.9em}
.fuss{max-width:var(--breite);margin:0 auto;padding:24px max(16px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--rand);color:var(--tinte2)}
.fuss p{margin:6px 0}
@media (max-width:600px){ body{font-size:16px} .buehne{padding:28px 0 16px} .lead{font-size:1.1em} }

/* (Das Seitenmenü ist seit 30.09. weg: eine Seite, ein Kopf.) */
.menue{display:none;position:relative}
.menue summary{list-style:none;white-space:nowrap;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--flaeche2);border:1px solid var(--rand);color:var(--tinte);font-weight:600;cursor:pointer;user-select:none;-webkit-user-select:none}
.menue summary::-webkit-details-marker{display:none}
.menue .striche{width:16px;height:12px;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat;border-radius:1px}
.menue[open] .striche{background:linear-gradient(45deg,transparent 45%,currentColor 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,currentColor 45% 55%,transparent 55%)}
.menue nav{position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:2px;min-width:200px;padding:8px;border-radius:16px;background:var(--flaeche);border:1px solid var(--rand);box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.menue nav a{padding:10px 14px;border-radius:10px}
@media (max-width:760px){ .kopf nav.breit{display:none} .menue{display:block} .marke{font-size:1.02em} }

/* ---- Matrix Forms: Kopf, Karten, Formulare, Editor, Umfrage, Auswertung ---- */
[hidden]{display:none !important}   /* das hidden-Attribut schlägt jede display-Regel (die Karte hatte display:block) */
.kopfrechts{display:flex;align-items:center;gap:8px;flex:none}
.marke{flex:1 1 auto;overflow:hidden} .marke .wort{overflow:hidden;text-overflow:ellipsis}
.kopflink{padding:8px 14px;border-radius:999px;color:var(--tinte2);font-weight:600} .kopflink:hover{background:var(--flaeche2);text-decoration:none;color:var(--tinte)}
@media (max-width:600px){ .kopflink{display:none} }
.kontoknopf{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:.95em;padding:7px 14px 7px 8px;border-radius:999px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer}
.kontoknopf:not(.angemeldet){padding-left:14px;background:var(--akzent);border-color:var(--akzent);color:#fff} .kontoknopf.angemeldet{border-color:var(--akzent)}
.kreis{--h:250;flex:none;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(145deg,hsl(var(--h) 60% 58%),hsl(var(--h) 55% 42%))} .kreis[hidden]{display:none}
.buehne{padding:40px 0 12px}
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:22px}
.karte h2{font-size:1.25rem;margin:0 0 10px}
.zweispaltig{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start;margin:20px 0 32px}
.feld{display:block;margin-bottom:12px} .feld > span{display:block;font-size:.88em;color:var(--tinte2);margin-bottom:4px}
input[type=text],input[type=password],input[type=number],textarea,select{width:100%;font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
textarea{resize:vertical;min-height:80px}
.taten{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0;align-items:center}
button.knopf{font:inherit;font-weight:600;border:0;cursor:pointer} .knopf:disabled{opacity:.5;cursor:default}
.knopf.klein{padding:7px 12px;font-size:.88em} .knopf.gefaehrlich{background:#e5453a}
.textknopf{background:none;border:0;font:inherit;font-weight:600;color:var(--tinte2);cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px} .textknopf:hover{color:var(--tinte)}
.fehler{color:#ff7a7a;margin:10px 0 0;font-weight:600} .fehler[hidden]{display:none}
.hinweis{padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--akzent) 12%,var(--flaeche2));font-weight:600}
.honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}
/* Liste meiner Umfragen. */
.liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--flaeche);border:1px solid var(--rand)}
.liste .titel{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .liste .meta{color:var(--tinte2);font-size:.9em}
.liste .taten{margin:0;grid-column:1/-1} .liste .zu{color:var(--tinte2);font-weight:600;font-size:.85em;padding:2px 8px;border-radius:999px;background:var(--flaeche2)} .liste .zu.offen{color:#3aa655}
/* Editor. */
.frage{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:16px 18px;display:grid;gap:10px;margin-bottom:12px}
.frage .kopf2{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .frage .nr{font-weight:800;color:var(--akzent);min-width:1.6em}
.frage .kopf2 select{width:auto;flex:none;padding:7px 10px} .frage .kopf2 .schieben{margin-left:auto;display:flex;gap:4px}
.frage .optionen{display:grid;gap:6px} .frage .option{display:flex;gap:6px;align-items:center} .frage .option input{flex:1}
.knopfklein{font:inherit;font-weight:700;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);border-radius:10px;padding:6px 10px;cursor:pointer;line-height:1} .knopfklein:hover{border-color:var(--akzent)}
.schalter{display:inline-flex;align-items:center;gap:8px;font-size:.92em;color:var(--tinte2);cursor:pointer} .schalter input{width:auto;accent-color:var(--akzent)}
.frage .zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .frage .zeile label{display:flex;align-items:center;gap:6px;font-size:.9em;color:var(--tinte2)} .frage .zeile input[type=number],.frage .zeile input[type=text]{width:6em;padding:7px 10px} .frage .zeile input.breit{width:10em}
.typen{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.typen button{font:inherit;font-weight:600;font-size:.92em;padding:9px 14px;border-radius:999px;border:1px solid var(--rand);background:var(--flaeche);color:var(--tinte);cursor:pointer} .typen button:hover{border-color:var(--akzent)}
.leiste{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--grund) 85%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--rand)}
.leiste .stand{color:var(--tinte2);font-size:.9em;margin-left:auto}
.teilen{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:var(--flaeche2)} .teilen code{display:block;padding:8px 10px;border-radius:10px;background:var(--flaeche);word-break:break-all;font-size:.95em}
/* Ausfüllen. */
.umfrage .frage{gap:8px} .umfrage .ftext{font-weight:700;font-size:1.05rem;margin:0} .umfrage .ftext .pflicht{color:#e5453a} .umfrage .hilfe{margin:-4px 0 0;color:var(--tinte2);font-size:.92em}
.wahlen{display:grid;gap:6px} .wahl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--flaeche2);cursor:pointer;border:1px solid transparent} .wahl:has(input:checked){border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 12%,var(--flaeche2))} .wahl input{width:auto;accent-color:var(--akzent);margin:0}
.wahl .eigene{flex:1;padding:6px 10px}
.skala{display:flex;gap:6px;flex-wrap:wrap} .skala label{flex:1 1 0;min-width:40px;text-align:center;padding:10px 4px;border-radius:12px;background:var(--flaeche2);cursor:pointer;font-weight:700;border:1px solid transparent} .skala label:has(input:checked){border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 18%,var(--flaeche2))} .skala input{display:none}
.skalaenden{display:flex;justify-content:space-between;color:var(--tinte2);font-size:.85em}
.dank{text-align:center;padding:30px 20px} .dank h2{font-size:1.6rem;margin:0 0 8px}
/* Auswertung. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.kachel{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:14px 10px;text-align:center;display:grid;gap:2px} .kachel b{font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums} .kachel small{color:var(--tinte2);font-size:.85em}
.aw{display:grid;gap:14px} .aw .frage{gap:10px} .aw .frage p{margin:0} .aw .ftext{font-weight:700;font-size:1.05rem}   /* Fragetitel fett, kein Luftloch unter dem Titel (Gipfeli-Probe 30.09.) */
.balken{display:grid;gap:6px} .balken .b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font-size:.95em} .balken .b .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .balken .b .spur{grid-column:1/-1;height:10px;border-radius:5px;background:var(--flaeche2);overflow:hidden} .balken .b .spur i{display:block;height:100%;border-radius:5px;background:var(--akzent)} .balken .b .n{color:var(--tinte2);font-variant-numeric:tabular-nums;white-space:nowrap}
.donutzeile{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .donut{width:120px;height:120px;flex:none} .legende{display:grid;gap:4px;font-size:.95em} .legende span{display:flex;align-items:center;gap:8px} .legende i{width:12px;height:12px;border-radius:3px;flex:none}
.saeulen{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:18px} .saeulen div{flex:1 1 0;display:grid;grid-template-rows:1fr auto;align-items:end;justify-items:center;gap:4px;height:100%;position:relative} .saeulen i{display:block;width:100%;background:var(--akzent);border-radius:6px 6px 0 0;min-height:2px} .saeulen small{color:var(--tinte2);font-size:.8em} .saeulen b{position:absolute;top:-16px;font-size:.78em;color:var(--tinte2);font-weight:600}
.texte{list-style:none;margin:0;padding:0;display:grid;gap:6px} .texte li{padding:8px 12px;border-radius:12px;background:var(--flaeche2)}
.leer{color:var(--tinte2)}
@media (max-width:600px){ body{font-size:16px} .buehne{padding:24px 0 8px} .karte{padding:16px} .frage{padding:14px} }

/* Nachtrag 30.09. (Notizen aus der Gipfeli-Probe): Abschnitte, Handy-Editor, fehlende Pflichtfrage, Zusammenfassung, Legende. */
.abschnittkopf{padding:22px 4px 6px} .abschnittkopf h2{font-size:1.35rem;margin:0 0 4px} .abschnittkopf p{margin:0;color:var(--tinte2)}
.frage.abschnitt{border-left:4px solid var(--akzent)}
.frage .kopf2{flex-wrap:nowrap} .frage .kopf2 select{flex:1 1 0;width:0;min-width:0} .frage .kopf2 .schieben{margin-left:0;flex:none} .frage .kopf2 .knopfklein{padding:6px 7px;font-size:.85em}   /* Typ links schrumpfbar (width:0, sonst hält es seine Eigenbreite und die Seite wird 39 px zu breit), Knöpfe rechts in einer Zeile */
@media (max-width:420px){ .knopfklein{padding:6px 7px} .frage .kopf2{gap:5px} }
.leiste{margin-top:16px} #editor{padding-bottom:20px}
.zeile2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.frage.fehlt{border-color:#e5453a;box-shadow:0 0 0 3px color-mix(in srgb,#e5453a 25%,transparent)}
.zusammenfassung{text-align:left;margin-top:22px} .zusammenfassung h3{font-size:1rem;color:var(--tinte2);margin:0 0 8px} .zusammenfassung b{display:block;font-size:.88em;color:var(--tinte2)}
@media (min-width:600px){ .legende{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px} }

/* ---- Lebenslauf: Editor ---- */
.listentitel{font-size:1.1rem;color:var(--tinte2);margin:22px 0 8px}
.station{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--flaeche2);margin-bottom:8px} .stationszeile{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .stationszeile input,.stationszeile select{flex:1 1 160px;min-width:0;padding:8px 10px;background:var(--flaeche)} .stationszeile .kurz{flex:0 1 110px} .station textarea{background:var(--flaeche);min-height:60px}
.stationstaten{display:flex;gap:4px;margin-left:auto} .karte h3{margin:0 0 10px;font-size:1.1rem}
.stufen{display:flex;gap:4px} .stufe{width:22px;height:22px;border-radius:50%;border:2px solid var(--akzent);background:transparent;cursor:pointer;padding:0} .stufe.voll{background:var(--akzent)}
.fotozeile{display:flex;gap:14px;align-items:center;margin-top:6px} .fotovorschau{width:84px;height:84px;border-radius:14px;background:var(--flaeche2);display:grid;place-items:center;overflow:hidden;flex:none} .fotovorschau img{width:100%;height:100%;object-fit:cover} .fotozeile .klein{margin:6px 0 0}
label.knopf{display:inline-block;cursor:pointer}
.chips2{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .chip2{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:var(--flaeche2);font-size:.92em} .chip2 button{border:0;background:none;color:var(--tinte2);cursor:pointer;font:inherit;padding:0 2px}
.suchzeile{display:flex;gap:6px} .suchzeile input{flex:1;min-width:0}
/* ---- Lebenslauf: Ansicht (Blatt) ---- */
body[data-akzent=violett]{--cv:#5b46e0} body[data-akzent=blau]{--cv:#1f6fd6} body[data-akzent=gruen]{--cv:#2f8f4e} body[data-akzent=grau]{--cv:#4b5062} body[data-akzent=rot]{--cv:#c9463d}
.cvmain{max-width:900px}
.blatt{display:grid;grid-template-columns:230px minmax(0,1fr);background:#fff;color:#1a1c24;border-radius:6px;box-shadow:0 20px 60px -30px rgba(0,0,0,.5);overflow:hidden;margin:16px 0 40px}
.seitenleiste{background:color-mix(in srgb,var(--cv) 8%,#fff);padding:28px 22px;display:grid;gap:22px;align-content:start;border-right:4px solid var(--cv)}
.seitenleiste .foto{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.seitenleiste h3,.hauptteil h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cv);margin:0 0 8px} .seitenleiste .block p{margin:0 0 4px;font-size:.92em;word-break:break-word} .seitenleiste a{color:inherit}
.faehigkeit,.sprache{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.92em;margin:0 0 5px} .punkte{display:flex;gap:3px} .punkte i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--cv) 25%,#fff)} .punkte i.voll{background:var(--cv)} .niveau{color:var(--cv);font-weight:700;font-size:.85em}
.chips3{display:flex;flex-wrap:wrap;gap:5px} .chips3 span{padding:3px 9px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--cv) 35%,#fff);font-size:.85em}
.hauptteil{padding:32px 34px;display:grid;gap:22px;align-content:start} .cvkopf h1{font-size:2rem;margin:0;line-height:1.1;letter-spacing:-.01em} .cvkopf .beruf{margin:6px 0 0;color:var(--cv);font-weight:700;font-size:1.05rem}
.profiltext{margin:0;line-height:1.55}
.station2{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px;margin:0 0 12px} .station2 .zeit{color:#6b6f80;font-size:.9em;padding-top:2px} .station2 .inhalt b{display:block} .station2 .unter{color:#6b6f80;font-size:.92em} .station2 p{margin:4px 0 0;font-size:.95em;line-height:1.5}
@media (max-width:640px){ .blatt{grid-template-columns:1fr} .seitenleiste{border-right:0;border-top:4px solid var(--cv);order:2} .hauptteil{padding:24px 20px} .station2{grid-template-columns:1fr} }
@media (prefers-color-scheme: dark){ .cvseite{background:#0f1117} }
@media print{ .kopf,.fuss,#taten{display:none !important} body,.cvseite{background:#fff !important;font-size:12.5px} .cvmain{max-width:none;padding:0;margin:0} .blatt{box-shadow:none;border-radius:0;margin:0;grid-template-columns:200px 1fr} .hauptteil,.seitenleiste{padding:22px 24px} @page{size:A4;margin:12mm} .station2,.block{break-inside:avoid} }
.cvtaten{margin:14px 0 0}   /* die Knöpfe der Ansicht unter dem Kopf, nicht darin: auf dem Handy verdrängten sie die Marke */

/* ---- Familie Frage (aus der Arcade übernommen, 30.09.) ---- */
@keyframes dialogAuf{from{opacity:0;transform:translateY(10px) scale(.97)}} @keyframes dialogZu{to{opacity:0;transform:translateY(8px) scale(.97)}} @keyframes vorhangZu{to{opacity:0}}
/* Familie Frage (frage.js): das Rückfrage-Blatt statt confirm/prompt/alert; gleiche Bewegung wie der Profildialog. */
.fragedialog{border:0;border-radius:20px;padding:0;background:var(--flaeche);color:var(--tinte);width:min(92vw,400px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fragedialog::backdrop{background:rgba(10,12,20,.55);backdrop-filter:blur(3px)}
.fragedialog[open]{animation:dialogAuf .22s cubic-bezier(.2,.8,.3,1.1)} .fragedialog.zu{animation:dialogZu .18s ease forwards} .fragedialog.zu::backdrop{animation:vorhangZu .18s ease forwards}
.fragekarte{padding:20px 20px 18px;display:grid;gap:12px} .fragetitel{margin:0;font-weight:800;font-size:1.15rem} .fragetitel[hidden]{display:none} .fragetext{margin:0;font-weight:600;line-height:1.4}
.fragefeld:empty{display:none} .fragefeld input{width:100%;font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte)}
.fragetaten{display:flex;gap:8px;margin-top:2px} .fragetaten .knopf{flex:1 1 0;min-width:0;padding-inline:12px;white-space:normal;line-height:1.15} .fragetaten .knopf.gefaehrlich{background:#e5453a}
@media (prefers-reduced-motion: reduce){ .fragedialog[open],.fragedialog.zu{animation:none} }
.fragetaten .knopf.leise{background:var(--flaeche2);color:var(--tinte)}

/* Familie Seiten (Umfrage mit Abschnitten): Fortschritt oben, eine Seite auf einmal. */
.fortschritt{display:grid;gap:6px;margin:0 0 14px} .fortschritt[hidden]{display:none} .fortschrittbalken{height:8px;border-radius:4px;background:var(--flaeche2);overflow:hidden} .fortschrittbalken i{display:block;height:100%;background:var(--akzent);border-radius:4px;transition:width .25s} .fortschritt .klein{margin:0}
.seite[hidden]{display:none} .umfrage .taten .knopf[hidden]{display:none}