@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --ink:#101828; --muted:#667085; --line:#e5e7eb; --paper:#fff; --wash:#f5f7fb; --blue:#173a67; --mint:#25b99a; --danger:#d54b4b; --shadow:0 22px 65px rgba(16,24,40,.10); }
* { box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body { min-height:100vh;margin:0;display:flex;flex-direction:column;color:var(--ink);background:var(--wash);font-family:'DM Sans',system-ui,sans-serif;line-height:1.55; }
a { color:inherit; }
button,input,textarea { font:inherit; }
.site-header { min-height:64px; padding:7px clamp(20px,5vw,72px); display:flex; align-items:center; gap:30px; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; backdrop-filter:blur(16px); }
.brand,.footer-brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img { width:40px;height:40px;filter:drop-shadow(0 8px 18px rgba(23,58,103,.18)); }
.brand span { display:flex; flex-direction:column; line-height:1; }
.brand strong { font:800 1.45rem/1 'Manrope',sans-serif; letter-spacing:-.06em; }
.brand small { margin-top:4px; color:var(--muted); font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.account-link { font-weight:700; text-decoration:none; font-size:.9rem; }
.account-link:hover { color:var(--blue); }
.account-user { max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.account-nav { display:flex; align-items:center; gap:8px;margin-left:auto; }
.account-nav form { margin:0; }
.nav-action { min-height:36px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border-radius:10px;color:var(--muted);font-size:.86rem;font-weight:700;text-decoration:none;transition:color .18s ease,background .18s ease; }
.nav-action svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.nav-action:hover { color:var(--ink);background:#f2f4f7; }
.nav-register { color:var(--blue);background:#eef4fa; }
.nav-register:hover { color:#102a4c;background:#e3edf7; }
.page-frame { width:min(1240px,calc(100% - 40px));margin:0 auto;flex:1 0 auto; }
.button { min-height:50px; border:0; border-radius:14px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:16px; font-weight:800; text-decoration:none; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; background:linear-gradient(135deg,var(--quiz-accent,var(--blue)),#102a4c); box-shadow:0 12px 25px rgba(23,58,103,.22); }
.button-secondary { color:var(--ink); background:white; border:1px solid var(--line); }
.button-quiet { min-height:40px; background:transparent; color:var(--muted); padding:0; }
.button-small { min-height:42px; padding:0 17px; border-radius:12px; font-size:.9rem; }
.eyebrow { color:var(--quiz-accent,var(--blue)); font-weight:800; text-transform:uppercase; letter-spacing:.13em; font-size:.75rem; }
h1,h2,h3 { font-family:'Manrope',sans-serif; letter-spacing:-.04em; line-height:1.12; margin-top:0; }
.platform-hero { margin:clamp(22px,4vh,38px) 0; padding:clamp(38px,5vw,64px); border-radius:36px; background:radial-gradient(circle at 85% 20%,rgba(37,194,160,.24),transparent 30%),linear-gradient(145deg,#101828,#20264d); color:white; overflow:hidden; }
.platform-hero h1 { font-size:clamp(3.3rem,6vw,5.25rem); margin:12px 0 16px; }
.platform-hero h1 span { color:#8ab7df; }
.platform-hero p { max-width:680px; color:#d0d5dd; font-size:1.1rem; margin:0 0 24px; }
.seo-intro { width:min(920px,100%);margin:0 auto 76px;padding:0 22px;text-align:center; }
.seo-intro h2 { margin:8px 0 16px;font-size:clamp(2rem,4.5vw,3.2rem); }
.seo-intro p { margin:9px auto;max-width:780px;color:var(--muted);font-size:1.02rem; }
.seo-intro a { color:var(--blue);font-weight:700; }
.quiz-hero { margin:20px 0; min-height:0; padding:36px 44px 40px; border-radius:26px; display:grid; grid-template-columns:minmax(0,1fr) 210px; align-items:center; gap:34px; background:radial-gradient(circle at 80% 18%,color-mix(in srgb,var(--quiz-accent) 42%,transparent),transparent 28%),linear-gradient(145deg,#101828,#20263d); color:white; box-shadow:var(--shadow); }
.quiz-overview-page .page-frame { width:min(1400px,calc(100% - 40px));display:flex;align-items:center; }
.quiz-overview-page .page-frame>main { width:100%; }
.quiz-overview-page .quiz-hero { width:100%;margin:20px 0; }
.quiz-hero h1 { font-size:clamp(2.6rem,4.3vw,3.8rem); margin:7px 0 9px; max-width:780px; line-height:1.02; }
.quiz-hero p { color:#d0d5dd; font-size:.98rem; max-width:680px; margin:0; }
.hero-facts { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px; color:#98a2b3; font-size:.82rem; }
.hero-facts strong { color:white; }
.hero-source { width:min(680px,100%);margin-top:14px;padding:9px 12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px 10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:white;text-decoration:none;transition:background .18s ease,border-color .18s ease; }
.hero-source:hover { background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28); }
.hero-source>span { grid-row:1 / span 2;color:color-mix(in srgb,var(--quiz-accent) 78%,white);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }
.hero-source strong { font-size:.78rem;line-height:1.25; }
.hero-source small { color:#c7ccd5;font-size:.72rem;white-space:nowrap; }
.hero-score-orbit { width:160px; height:160px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; box-shadow:inset 0 0 0 22px rgba(255,255,255,.03); }
.hero-score-orbit:before { content:''; position:absolute; inset:22px; border:1px dashed color-mix(in srgb,var(--quiz-accent) 75%,white); border-radius:50%; }
.hero-score-orbit span { font:800 2.65rem 'Manrope'; z-index:1; }.hero-score-orbit small { color:#d0d5dd;font-size:.8rem; z-index:1; }
.hero-actions { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; }
.hero-training-button { min-width:160px;min-height:46px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid rgba(255,255,255,.32);background:#fff;color:var(--ink);font-weight:800;text-decoration:none;box-shadow:0 12px 28px rgba(0,0,0,.18);transition:transform .18s ease,background .18s ease; }
.hero-training-button:hover { transform:translateY(-2px);background:#f3f6fa; }
.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); background:white; border:1px solid var(--line); border-radius:22px; box-shadow:0 10px 30px rgba(16,24,40,.05); }
.stats-strip div { display:flex; flex-direction:column; padding:22px 28px; border-right:1px solid var(--line); }.stats-strip div:last-child { border:0; }
.stats-strip strong { font:800 1.7rem 'Manrope'; }.stats-strip span { color:var(--muted); font-size:.82rem; }
.hero-stats { width:min(650px,100%);margin-top:10px;border:1px solid rgba(255,255,255,.14);border-radius:0;background:rgba(255,255,255,.08);box-shadow:none; }
.hero-stats div { min-width:0;padding:7px 11px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.035); }
.hero-stats strong { color:#fff;font-size:1.08rem;line-height:1.05; }
.hero-stats span { color:#c7ccd5;font-size:.68rem;line-height:1.1; }
.quiz-hero .hero-stats { width:min(680px,100%);margin:16px 0 2px;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:0;background:#eef1f5;box-shadow:none; }
.quiz-hero .hero-stats div { min-height:54px;padding:8px 14px;justify-content:center;border-right:1px solid #d5dbe4;background:transparent;color:var(--ink); }
.quiz-hero .hero-stats div:last-child { border-right:0; }
.quiz-hero .hero-stats strong { display:block;color:var(--ink)!important;font-size:1.08rem;line-height:1.05; }
.quiz-hero .hero-stats span { display:block;margin-top:3px;color:#596579!important;font-size:.68rem;line-height:1.05; }
.section-heading { margin:28px 0 14px; display:flex; justify-content:space-between; align-items:end; gap:30px; }.section-heading h2 { font-size:clamp(1.75rem,3vw,2.4rem); margin:0; }.section-heading>p { color:var(--muted); max-width:440px; }
.training-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:22px; }
.training-page { padding:26px 0 10px; }
.training-page .training-grid { margin-bottom:22px; }
.mode-card,.topic-card { background:white; border:1px solid var(--line); border-radius:20px; padding:20px; position:relative; }
.mode-card { cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.mode-card:hover,.mode-card:focus-within { transform:translateY(-2px);box-shadow:var(--shadow);border-color:#b8c6d8; }
.mode-card-hit-area { position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer; }
.mode-card-hit-area:focus-visible { outline:3px solid #65b9c3;outline-offset:3px; }
.mode-card-featured { color:white; background:linear-gradient(150deg,#20264d,#101828); border:0; box-shadow:var(--shadow); }.mode-card-featured p { color:#c7ccd5; }
.mode-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#eaf1f8;color:var(--blue);font-size:1.35rem; }.mode-card-featured .mode-icon { background:rgba(255,255,255,.1); color:#8ab7df; }
.badge { position:absolute; right:18px; top:18px; padding:5px 10px; border-radius:99px; background:#d9fbf1; color:#177e68; font-size:.68rem; font-weight:800; }.mode-card h3 { font-size:1.42rem; margin:14px 0 6px; }.mode-card p { min-height:0; margin:0 0 16px;font-size:.92rem; }
.topic-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:48px; }.topic-card { min-height:138px; display:flex; flex-direction:column;padding:16px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }.topic-card:not(.topic-card-empty):hover { border-color:#a9bfd8;box-shadow:0 10px 24px rgba(29,57,94,.1);transform:translateY(-2px); }.topic-card-empty { opacity:.65; }.topic-card-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.74rem; }.topic-number { width:30px;height:30px;display:grid;place-items:center;background:#eaf1f8;color:var(--blue);border-radius:9px;font-size:.82rem;font-weight:800; }.topic-card h3 { font-size:1rem; margin:9px 0 3px; }.topic-card p { color:var(--muted); flex:1;margin:0;font-size:.79rem;line-height:1.28; }.text-button { border:0;background:transparent;padding:6px 0 0;color:var(--blue);font-weight:800;cursor:pointer; }.coming-soon { color:var(--muted);font-size:.78rem;font-weight:700; }.progress-track { height:6px;border-radius:99px;background:#e9edf3;overflow:hidden;margin:7px 0; }.progress-track span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--mint)); }
.topic-icon { width:38px;height:38px;display:grid;place-items:center;background:#eaf1f8;color:var(--blue); }
.topic-icon svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.topic-card-action { position:absolute;inset:0;z-index:2;margin:0; }
.topic-card-hit-area { width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer; }
.topic-card:focus-within { outline:3px solid rgba(35,65,111,.24);outline-offset:2px; }
.source-note { display:none!important; }
.legal-grid>section { margin:0;padding-top:30px;border-top:1px solid var(--line); }
.legal-prose .legal-grid>section {
  margin-top:0!important;
  align-self:start;
}
.ad-container { min-height:110px;margin:32px 0;padding:14px;border:1px dashed #cdd3dc;border-radius:18px;color:#98a2b3;font-size:.68rem;text-align:center; }
.play-shell,.result-shell { width:min(1060px,100%); margin:20px auto 34px; }.play-progress { margin-bottom:10px; }.play-progress>div:first-child { display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;font-weight:700; }.play-page .page-frame { flex:1 1 auto;min-height:0;display:flex; }.play-page .page-frame>main { width:100%;min-height:0;display:flex; }.play-page .play-shell { flex:1;min-height:0;margin:0 auto;padding:10px 0;display:flex;flex-direction:column;justify-content:center; }.play-page .play-progress { flex:0 0 auto;margin-bottom:6px; }.play-page .question-card,.play-page .feedback-card { flex:0 1 auto;max-width:100%;transform-origin:top left; }.play-page .question-card { padding:22px 28px; }.play-page .question-card h1 { font-size:clamp(1.45rem,2.5vw,1.95rem);margin:6px 0 3px; }.play-page .answer-list { margin:12px 0;gap:6px; }.play-page .answer-option { min-height:44px;padding:7px 12px; }.play-page .free-answer { margin:11px 0;gap:4px; }.play-page .free-answer textarea { min-height:0;height:clamp(70px,14vh,120px);padding:11px; }.play-page .question-submit { min-height:42px; }.play-page .feedback-card { padding:14px 26px; }.play-page .play-density-compact { padding-block:16px; }.play-page .play-density-compact h1 { font-size:1.55rem; }.play-page .play-density-compact .answer-option { font-size:.86rem;line-height:1.25;padding-block:6px; }.play-page .play-density-compact .free-answer textarea { height:74px; }.play-page .play-density-tight { padding:14px 20px; }.play-page .play-density-tight h1 { font-size:1.32rem;line-height:1.16; }.play-page .play-density-tight .answer-list { margin:8px 0;gap:4px; }.play-page .play-density-tight .answer-option { min-height:38px;padding:5px 9px;font-size:.76rem;line-height:1.18; }.play-page .play-density-tight .answer-visual { width:70px;height:52px;flex-basis:70px;padding:3px; }.play-page .play-density-tight .answer-image { max-height:44px; }.play-page .play-density-tight .free-answer { margin:7px 0; }.play-page .play-density-tight .free-answer textarea { height:62px; }.play-page .play-density-tight .question-submit { min-height:38px; }
.question-card,.feedback-card,.result-card { background:white;border:1px solid var(--line);border-radius:22px;padding:26px 34px;box-shadow:var(--shadow); }.question-number { color:var(--blue);font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em; }.question-card h1 { font-size:clamp(1.55rem,3vw,2.15rem);margin:8px 0 4px; }.selection-hint { color:var(--muted); }.answer-list { border:0;padding:0;margin:18px 0;display:grid;gap:8px; }.answer-option { min-height:50px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.18s; }.answer-option:has(.answer-visual) { min-height:92px; }.answer-option:hover { border-color:#7ea6cc;background:#f7fafc; }.answer-option input { position:absolute;opacity:0; }.answer-marker { width:20px;height:20px;border:2px solid #b6bdc9;border-radius:5px;flex:0 0 auto;position:relative; }.answer-option:has(input:checked) { border-color:var(--blue);background:#eef4fa; }.answer-option input:checked + .answer-marker { border-color:var(--blue);background:var(--blue); }.answer-option input:checked + .answer-marker:after { content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:.76rem;font-weight:900;line-height:1; }.answer-visual { width:96px;height:72px;flex:0 0 96px;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;border:1px solid #e1e7ef;border-radius:11px;background:rgba(255,255,255,.9);overflow:hidden; }.answer-visual:empty { visibility:hidden; }.answer-visual-standalone { margin:8px 0 10px; }.answer-content { min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;line-height:1.35; }.answer-image { display:block;width:auto;max-width:100%;height:auto;max-height:60px;object-fit:contain;object-position:center; }.free-answer { display:grid;gap:7px;margin:16px 0; font-weight:700; }.free-answer small { color:var(--muted);font-size:.78rem;font-weight:600; }.free-answer textarea { width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:13px;padding:14px;outline:none; }.free-answer textarea:focus { border-color:var(--blue);box-shadow:0 0 0 4px #dce8f4; }.question-submit { width:100%;min-height:44px; }.validation-summary { color:var(--danger); }
.feedback-card { padding:16px 30px;text-align:center; }.feedback-symbol { width:44px;height:44px;display:grid;place-items:center;margin:0 auto 6px;border-radius:50%;font-size:1.4rem;font-weight:800; }.feedback-correct .feedback-symbol { background:#d9fbf1;color:#147762; }.feedback-wrong .feedback-symbol { background:#fff0ee;color:#c13e35; }.feedback-card h1 { font-size:1.75rem;margin:4px 0 10px; }.feedback-question { text-align:left;padding:10px 14px;border-left:3px solid var(--blue);background:#f7fafc;border-radius:0 12px 12px 0; }.feedback-question h2 { margin:3px 0 0;font:700 1.05rem/1.3 'DM Sans',sans-serif;letter-spacing:0; }.answer-reveal { text-align:left;background:#f6f7fa;border-radius:14px;padding:12px 14px;margin:8px 0 10px; }.answer-reveal small { color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em; }.answer-reveal p { margin:6px 0 0;font-weight:600; }.answer-review { margin:8px 0 0; }.answer-review .answer-option { cursor:default;background:white; }.answer-review .answer-option:hover { border-color:var(--line);background:white; }.review-marker { width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border:2px solid #d0d5dd;border-radius:50%;color:white;font-size:.9rem;font-weight:900;line-height:1; }.answer-review .answer-option-correct { border-color:#8ed9c9;background:#f2fcf9; }.answer-review .answer-option-correct:hover { border-color:#8ed9c9;background:#f2fcf9; }.answer-option-correct .review-marker { border-color:#1c9b80;background:#1c9b80;box-shadow:0 4px 10px rgba(28,155,128,.18); }.answer-review .answer-option-wrong { border-color:#efb0aa;background:#fff8f7; }.answer-option-wrong .review-marker { border-color:#d65b51;background:#d65b51; }.explanation { color:var(--muted); }
.result-card { text-align:center; }.result-ring { width:190px;height:190px;margin:22px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(closest-side,white 78%,transparent 80%),conic-gradient(var(--blue) calc(var(--result)*1%),#e8eaf0 0); }.result-ring strong { font:800 2.8rem 'Manrope'; }.result-ring span { color:var(--muted); }.result-card h1 { font-size:2.8rem;margin-bottom:8px; }.result-details { display:grid;grid-template-columns:repeat(3,1fr);margin:32px 0;border-block:1px solid var(--line); }.result-details div { padding:20px 10px;display:flex;flex-direction:column; }.result-details strong { font-size:1.35rem; }.result-details span { color:var(--muted);font-size:.8rem; }.result-actions { display:flex;justify-content:center;gap:12px;flex-wrap:wrap; }

/* Die Auswertung bleibt vollständig innerhalb des sichtbaren Browserfensters. */
body.result-page { height:100dvh;min-height:0;overflow:hidden; }
.result-page .site-header,.result-page .site-footer { flex:0 0 auto; }
.result-page .page-frame { flex:1 1 auto;min-height:0;display:flex;overflow:hidden; }
.result-page .page-frame>main { width:100%;min-height:0;display:flex; }
.result-page .result-shell { flex:1;min-height:0;margin:0 auto;padding:10px 0;display:flex;align-items:center; }
.result-page .result-card { width:100%;max-height:100%;padding:18px 30px;overflow:hidden; }
.result-page .result-ring { width:142px;height:142px;margin:8px auto; }
.result-page .result-ring strong { font-size:2.35rem; }
.result-page .result-card h1 { font-size:2.15rem;margin:4px 0; }
.result-page .result-card>p { margin:4px 0 8px; }
.result-page .result-details { margin:14px 0; }
.result-page .result-details div { padding:10px 8px; }
.result-page .result-actions .button { min-height:44px; }

@media (max-height:700px) {
  .result-page .result-card { padding-block:12px; }
  .result-page .result-ring { width:112px;height:112px;margin:5px auto; }
  .result-page .result-ring strong { font-size:2rem; }
  .result-page .result-card h1 { font-size:1.8rem; }
  .result-page .result-details { margin:9px 0; }
  .result-page .result-details div { padding:6px; }
  .result-page .result-actions .button { min-height:40px; }
}
.legal-shell,.admin-shell { margin:60px auto 90px;width:min(960px,100%); }.legal-shell>header { margin-bottom:28px; }.legal-shell h1,.admin-shell h1 { font-size:clamp(2.7rem,6vw,4.5rem);margin:8px 0; }.legal-shell>header p { color:var(--muted); }.legal-card { background:white;border:1px solid var(--line);border-radius:26px;padding:clamp(26px,6vw,58px); }.legal-prose>section+section { margin-top:38px;padding-top:30px;border-top:1px solid var(--line); }.legal-prose h2 { font-size:1.35rem; }.legal-prose p,.legal-prose address { color:#475467;font-style:normal; }.legal-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px; }.admin-table-wrap { overflow:auto;background:white;border-radius:20px;border:1px solid var(--line); }.admin-table { width:100%;border-collapse:collapse; }.admin-table th,.admin-table td { padding:16px 20px;text-align:left;border-bottom:1px solid var(--line); }.admin-table th { color:var(--muted);font-size:.78rem;text-transform:uppercase; }
.site-footer { margin-top:auto;padding:5px clamp(20px,5vw,72px);display:flex;align-items:center;gap:12px;color:var(--muted);border-top:1px solid var(--line);background:white;font-size:.78rem;line-height:1.2; }.site-footer nav { display:flex;gap:12px;margin-left:auto; }.site-footer a { text-decoration:none; }.footer-brand { gap:7px; }.footer-brand img { width:20px;height:20px; }.footer-brand strong { color:var(--ink);font-family:'Manrope'; }.site-footer small { white-space:nowrap; }.cookie-settings-form { margin:0; }.cookie-settings-form button { padding:0;border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer; }.cookie-settings-form button:hover { color:var(--blue);text-decoration:underline; }.visually-hidden { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.auth-page .page-frame { flex:1 1 auto;min-height:0;display:flex; }.auth-page .page-frame>main { width:100%;min-height:0;display:flex; }.auth-shell { flex:1;margin:0 auto;padding:clamp(16px,3vh,32px) 0;width:min(1050px,100%);display:grid;grid-template-columns:1fr 480px;gap:70px;align-items:center; }.auth-intro h1 { font-size:clamp(2.8rem,6vw,4.7rem);margin:12px 0 20px; }.auth-intro p { color:var(--muted);font-size:1.12rem; }.auth-intro ul { list-style:none;padding:0;margin:28px 0;display:grid;gap:12px; }.auth-intro li:before { content:'✓';display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;border-radius:50%;background:#d9fbf1;color:#147762;font-weight:800; }.auth-card,.account-card { background:white;border:1px solid var(--line);border-radius:26px;padding:clamp(26px,5vw,44px);box-shadow:var(--shadow); }.auth-card h2 { font-size:2rem;margin:0 0 4px; }.auth-card>p { color:var(--muted);margin:0; }.auth-card label:not(.check-line) { display:grid;gap:7px;margin-top:18px;font-weight:700; }.auth-card input[type=email],.auth-card input[type=password] { width:100%;height:54px;border:1px solid #d0d5dd;border-radius:13px;padding:0 15px;outline:none;background:#fbfcfe; }.auth-card input:focus { border-color:var(--blue);box-shadow:0 0 0 4px #dce8f4; }.auth-card>span { color:var(--danger);font-size:.8rem; }.auth-card .button { width:100%;margin-top:24px; }.check-line { display:flex;gap:10px;align-items:flex-start;margin-top:20px;color:var(--muted);font-size:.87rem; }.check-line input { margin-top:4px; }.account-shell { width:min(760px,100%);margin:60px auto 100px; }.account-shell h1 { font-size:clamp(2.7rem,6vw,4.3rem);margin:10px 0 25px; }.account-card h2 { font-size:1.5rem; }.account-card p { color:var(--muted); }.account-help { margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:.85rem; }
.account-page { background:#fff; }
.account-page .page-frame { display:flex;align-items:flex-start;justify-content:center; }
.account-page .page-frame>main { width:100%; }
.account-page .account-shell { width:min(620px,100%);margin:28px auto 40px;text-align:center; }
.account-page .account-shell h1 { font-size:2.2rem;margin:5px 0 14px; }
.account-page .account-card { border-radius:0;box-shadow:none;padding:26px 30px;text-align:left; }
.account-page .account-card .button { width:100%;border-radius:0;margin-top:8px; }
.account-management { width:min(780px,100%)!important; }
.account-management .account-card { padding:24px 30px!important; }
.account-identity { text-align:center;padding-bottom:16px; }
.account-identity h2 { margin:0;overflow-wrap:anywhere; }
.account-identity p { margin:3px 0 0!important; }
.account-status { margin:0 0 16px!important;padding:10px 12px;border:1px solid #8ed9c9;background:#f2fcf9;color:#147762!important;font-weight:700; }
.account-menu { display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line); }
.account-menu a { padding:12px 8px;text-align:center;color:var(--blue);font-weight:800;text-decoration:none;border-right:1px solid var(--line); }
.account-menu a:last-child { border-right:0; }
.account-section { padding:22px 0;text-align:left; }
.account-section+.account-section { border-top:1px solid var(--line); }
.account-section h3 { margin:0 0 12px;font-size:1.25rem; }
.account-form { display:grid;gap:6px; }
.account-form label { display:grid;gap:4px;font-weight:700; }
.account-form input { width:100%;height:44px;padding:0 11px;border:1px solid #cfd6e2;background:#fbfcfe; }
.account-form input:focus { outline:0;border-color:var(--blue);box-shadow:0 0 0 3px #dce8f4; }
.account-form>span { color:var(--danger);font-size:.78rem; }
.password-field { position:relative;display:block;width:100%; }
.password-field>input { padding-right:46px!important; }
.password-toggle { position:absolute;right:5px;top:50%;translate:0 -50%;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:transparent;color:#667085;cursor:pointer; }
.password-toggle:hover,.password-toggle:focus-visible,.password-toggle.is-visible { color:var(--blue); }
.password-toggle:focus-visible { outline:2px solid var(--blue);outline-offset:1px; }
.password-toggle svg { width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.account-statistics { display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:12px;border:1px solid var(--line); }
.account-statistics div { padding:13px;text-align:center;border-right:1px solid var(--line); }
.account-statistics div:last-child { border-right:0; }
.account-statistics strong,.account-statistics span { display:block; }
.account-statistics strong { font:800 1.35rem 'Manrope'; }
.account-statistics span { color:var(--muted);font-size:.75rem; }
.account-danger { color:#7a271a; }
.account-danger p { color:#9a341f!important; }
.account-delete-button { color:#fff;background:#b42318; }
.admin-section-heading { margin:38px 0 14px;display:flex;align-items:end;justify-content:space-between;gap:24px; }.admin-section-heading h2 { margin:3px 0 0;font-size:1.65rem; }.admin-section-heading p { margin:0;color:var(--muted); }.admin-status { padding:11px 14px;border:1px solid #8ed9c9;background:#f2fcf9;color:#147762;font-weight:700; }.admin-user-list { display:grid;gap:10px; }.admin-user-row { padding:14px 16px;display:grid;grid-template-columns:minmax(190px,1fr) minmax(220px,1.25fr) 150px auto;align-items:end;gap:14px;background:white;border:1px solid var(--line); }.admin-user-row label,.admin-user-name { min-width:0;display:grid;gap:5px; }.admin-user-row label>span,.admin-user-name small { color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em; }.admin-user-name strong { overflow-wrap:anywhere; }.admin-user-row input,.admin-user-row select { width:100%;height:42px;padding:0 11px;border:1px solid #cfd6e2;background:#fbfcfe;color:var(--ink);font:inherit; }.admin-user-row input:focus,.admin-user-row select:focus { outline:0;border-color:var(--blue);box-shadow:0 0 0 3px #dce8f4; }

.consent-layer { position:fixed;z-index:99;inset:0;background:rgba(16,24,40,.28);backdrop-filter:blur(2px); }.consent-banner { position:absolute;left:20px;right:20px;bottom:20px;max-width:1080px;margin:auto;padding:22px 25px;display:flex;align-items:center;gap:30px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 80px rgba(16,24,40,.28); }.consent-banner h2 { margin:4px 0;font-size:1.25rem; }.consent-banner p { margin:0;color:var(--muted);font-size:.85rem; }.consent-banner .consent-category { margin:9px 0 4px;color:var(--ink);font-size:.76rem; }.consent-banner a { font-size:.78rem; }.consent-actions { display:flex;gap:10px;margin-left:auto;flex:0 0 auto; }.consent-actions form { margin:0; }

/* Im Frage-/Antwortmodus bildet alles eine ruhige, feste, weiße Arbeitsfläche. */
body.play-page { height:100dvh;min-height:0;overflow:hidden;background:#fff; }
.play-page .site-header,.play-page .site-footer { flex:0 0 auto; }
.play-page .page-frame { overflow:hidden;background:#fff; }
.play-page .play-shell { display:grid;grid-template-rows:36px minmax(0,1fr);align-content:stretch;justify-content:stretch;gap:8px;padding:clamp(8px,2vh,18px) 0 10px; }
.play-page .question-card,.play-page .feedback-card { border:0;border-radius:0;box-shadow:none;background:#fff; }
.play-page .question-card,.play-page .feedback-card { grid-row:2;width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 42px;row-gap:8px;overflow:hidden; }
.play-page .question-card,.play-page .question-card.play-density-compact,.play-page .question-card.play-density-tight { padding:22px 28px; }
.play-page .feedback-card,.play-page .feedback-card.play-density-compact,.play-page .feedback-card.play-density-tight { padding:22px 28px; }
.play-page .play-card-body { grid-row:1;align-self:start;min-width:0;transform-origin:top left; }
.play-page .question-submit,.play-page .feedback-submit,.play-page .play-density-tight .question-submit { grid-row:2;width:100%;height:42px;min-height:42px;margin:0;align-self:end; }
.play-page .feedback-question,.play-page .answer-reveal { border-radius:0;background:#fff; }
.play-page .play-progress { margin-inline:28px; }

@media (max-width:900px) { .quiz-hero { grid-template-columns:1fr; }.hero-score-orbit { display:none; }.topic-grid { grid-template-columns:1fr 1fr; }.training-grid { grid-template-columns:1fr; }.stats-strip { grid-template-columns:1fr 1fr; }.stats-strip div:nth-child(2) { border-right:0; }.stats-strip div:nth-child(-n+2) { border-bottom:1px solid var(--line); }.auth-shell { grid-template-columns:1fr;gap:12px;padding:12px 0; }.auth-intro { text-align:center; }.auth-intro h1 { font-size:clamp(2rem,8vw,3.2rem);margin:5px 0 7px; }.auth-intro p { margin:0 auto;max-width:620px;font-size:.95rem; }.auth-intro ul { display:none; }.auth-card { width:min(480px,100%);margin:auto;padding:22px 26px; }.auth-card h2 { font-size:1.65rem; }.auth-card label:not(.check-line) { gap:4px;margin-top:10px; }.auth-card input[type=email],.auth-card input[type=password] { height:46px; }.auth-card .button { min-height:44px;margin-top:14px; }.check-line { margin-top:12px; } }
@media (max-height:850px) and (min-width:901px) { .auth-shell { gap:48px;padding:14px 0; }.auth-intro h1 { font-size:clamp(2.5rem,5vw,3.7rem);margin:8px 0 12px; }.auth-intro ul { margin:16px 0;gap:7px; }.auth-card { padding:24px 30px; }.auth-card h2 { font-size:1.7rem; }.auth-card label:not(.check-line) { gap:4px;margin-top:10px; }.auth-card input[type=email],.auth-card input[type=password] { height:46px; }.auth-card .button { min-height:44px;margin-top:14px; }.check-line { margin-top:12px; } }
@media (max-height:850px) and (min-width:601px) { .platform-root-page .platform-hero { margin:20px 0;padding:36px 48px; }.platform-root-page .platform-hero h1 { font-size:clamp(3.1rem,5.5vw,4.6rem);margin:9px 0 12px; }.platform-root-page .platform-hero p { margin-bottom:20px;font-size:1.02rem; }.platform-root-page .platform-hero .button { min-height:46px; } }
@media (max-height:650px) and (max-width:900px) { .auth-shell { padding:7px 0;gap:7px; }.auth-intro { display:none; }.auth-card { padding:14px 18px;border-radius:18px; }.auth-card h2 { font-size:1.4rem;line-height:1.1; }.auth-card>p { font-size:.78rem;line-height:1.25; }.auth-card label:not(.check-line) { gap:2px;margin-top:6px;font-size:.78rem; }.auth-card input[type=email],.auth-card input[type=password] { height:40px;border-radius:10px; }.auth-card .button { min-height:40px;margin-top:8px; }.check-line { margin-top:7px;font-size:.72rem;line-height:1.25; } }
@media (max-width:600px) { .site-header { min-height:56px;padding:6px 12px;gap:8px; }.brand img { width:34px;height:34px; }.brand strong { font-size:1.3rem; }.brand small { display:none; }.account-nav { gap:2px; }.nav-action { min-height:34px;padding:0 7px;gap:4px;font-size:.76rem; }.nav-action svg { width:15px;height:15px; }.account-link { font-size:.78rem; }.button-small { min-height:36px;padding:0 11px;font-size:.78rem; }.page-frame { width:min(100% - 24px,1240px); }.quiz-hero { margin-top:20px;padding:28px 22px;min-height:340px;border-radius:24px;grid-template-columns:minmax(0,1fr);overflow:hidden; }.quiz-hero>div { min-width:0; }.quiz-hero h1 { font-size:2.35rem;overflow-wrap:anywhere; }.hero-facts { display:grid;gap:7px; }.stats-strip div { padding:17px; }.section-heading { margin-top:48px;display:block; }.topic-grid { grid-template-columns:1fr; }.mode-card,.topic-card { padding:18px; }.topic-card { min-height:140px; }.site-footer { flex-wrap:wrap;justify-content:center;padding:5px 10px;gap:5px 10px;text-align:center;font-size:.7rem; }.site-footer>span { display:none; }.site-footer nav { order:2;width:auto;justify-content:center;margin:0;gap:9px; }.site-footer small { order:3;width:100%;line-height:1.1; }.footer-brand img { width:18px;height:18px; }.legal-grid { grid-template-columns:1fr; }.result-details { grid-template-columns:1fr; }.result-details div+div { border-top:1px solid var(--line); }.play-shell { margin:14px auto 26px; }.question-card,.feedback-card,.result-card { border-radius:18px;padding:20px 16px; }.question-card h1 { font-size:1.6rem; }.answer-option { padding:10px 12px; }.answer-visual { width:64px;height:58px;flex-basis:64px;padding:4px;border-radius:9px; }.answer-image { max-height:48px; }.answer-content { display:grid; }.platform-hero { margin:24px 0;padding:40px 24px;border-radius:24px;overflow:hidden; }.platform-hero h1 { font-size:3rem;overflow-wrap:anywhere; }.consent-banner { left:10px;right:10px;bottom:10px;display:block;padding:18px; }.consent-actions { margin-top:15px; }.consent-actions .button { min-height:44px;padding:0 13px;font-size:.78rem; } }
@media (max-width:380px) { .site-header { padding:6px max(8px,env(safe-area-inset-left));gap:5px; }.brand { gap:7px; }.brand img { width:32px;height:32px; }.brand strong { font-size:1.15rem; }.account-nav { gap:0;min-width:0; }.nav-action { min-height:32px;padding:0 4px;gap:3px;font-size:.68rem;white-space:nowrap; }.nav-action svg { width:14px;height:14px; }.page-frame { width:min(100% - 16px,1240px); }.quiz-hero h1 { font-size:1.75rem;overflow-wrap:normal; }.platform-hero h1 { font-size:2.4rem; }.question-card,.feedback-card,.result-card { padding:18px 12px; }.question-card h1 { font-size:1.45rem; }.answer-option { min-width:0;padding:9px 10px;gap:9px; }.answer-marker { width:18px;height:18px; }.answer-content { min-width:0;overflow-wrap:anywhere; }.site-footer { padding-bottom:max(5px,env(safe-area-inset-bottom)); } }

@media (max-width:600px) { .play-page .play-progress { margin-inline:22px; } }
@media (max-width:380px) { .play-page .play-progress { margin-inline:18px; } }
@media (max-width:600px) { .topic-grid { margin-bottom:28px; } }
@media (max-width:600px) { .quiz-hero { margin-top:14px;padding:20px 18px;min-height:0;border-radius:20px; }.quiz-hero h1 { font-size:2rem; }.section-heading { margin-top:24px; } }
@media (max-width:600px) { .quiz-overview-page .page-frame { width:min(100% - 24px,1400px);align-items:flex-start; }.quiz-overview-page .quiz-hero { margin:14px 0; } }
@media (max-width:600px) { .hero-actions { align-items:stretch; }.hero-training-button { width:100%; }.training-page { padding-top:18px; } }
@media (max-width:600px) { .training-page .training-grid { margin-bottom:14px; } }
@media (max-width:600px) { .account-management .account-card { padding:18px 16px!important; }.account-menu { grid-template-columns:1fr; }.account-menu a { border-right:0;border-bottom:1px solid var(--line); }.account-menu a:last-child { border-bottom:0; }.account-statistics div { padding:10px 5px; } }
@media (max-width:380px) { .quiz-hero h1 { font-size:1.75rem; } }
@media (max-width:900px) { .admin-user-row { grid-template-columns:1fr 1fr; }.admin-user-row .button { width:100%; }.admin-section-heading { align-items:start;flex-direction:column;gap:4px; } }
@media (max-width:600px) { .admin-user-row { grid-template-columns:1fr; }.admin-shell { margin-top:30px; }.admin-table th,.admin-table td { padding:11px 12px; } }

/* Der Login ist ein ruhiger, alleinstehender Dialog auf weißem Grund. */
.auth-page:has(.auth-shell-simple),.auth-page:has(.auth-shell-login) { background:#fff; }
.auth-page:has(.auth-shell-simple) .page-frame>main,.auth-page:has(.auth-shell-login) .page-frame>main { justify-content:center;align-items:flex-start; }
.auth-shell-simple,.auth-shell-login { flex:0 1 500px;width:min(500px,100%);grid-template-columns:1fr;align-items:start;justify-content:center;padding:22px 0 16px; }
.auth-shell-simple .auth-card,.auth-shell-login .auth-card { width:100%;margin:0;border-radius:0;box-shadow:none;padding:32px 36px; }
.auth-shell-simple .auth-card input[type=text],.auth-shell-simple .auth-card input[type=email],.auth-shell-simple .auth-card input[type=password],.auth-shell-simple .button,.auth-shell-login .auth-card input[type=text],.auth-shell-login .auth-card input[type=email],.auth-shell-login .auth-card input[type=password],.auth-shell-login .button { border-radius:0; }
.auth-card input[type=text] { width:100%;height:54px;border:1px solid #d0d5dd;border-radius:13px;padding:0 15px;outline:none;background:#fbfcfe; }
.auth-links-row { margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:.87rem; }
.auth-links-row .check-line { margin:0; }
.auth-back-link { margin-top:16px!important;text-align:center;font-size:.86rem; }

/* Zentrale Absender-/SMTP-Konfiguration für Bestätigungs-E-Mails. */
.admin-email-form { padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:#fff;border:1px solid var(--line); }
.admin-email-form label:not(.admin-email-check) { display:grid;gap:5px;font-weight:700; }
.admin-email-form label>span { color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }
.admin-email-form input[type=text],.admin-email-form input[type=email],.admin-email-form input[type=password],.admin-email-form input[type=number] { width:100%;height:42px;padding:0 11px;border:1px solid #cfd6e2;background:#fbfcfe;color:var(--ink);font:inherit; }
.admin-email-form input:focus { outline:0;border-color:var(--blue);box-shadow:0 0 0 3px #dce8f4; }
.admin-email-check { display:flex;align-items:center;gap:8px;align-self:end;min-height:42px; }
.admin-password-state { margin:0;align-self:center;color:var(--muted);font-size:.82rem; }

@media (max-width:900px) {
  .auth-shell-simple,.auth-shell-login { padding-top:14px; }
  .auth-shell-simple .auth-card,.auth-shell-login .auth-card { border-radius:0;box-shadow:none; }
  .auth-card input[type=text] { height:46px; }
}
@media (max-height:650px) and (max-width:900px) {
  .auth-shell-simple .auth-card,.auth-shell-simple .auth-card input[type=text],.auth-shell-simple .auth-card input[type=email],.auth-shell-simple .auth-card input[type=password],.auth-shell-login .auth-card,.auth-shell-login .auth-card input[type=text],.auth-shell-login .auth-card input[type=email],.auth-shell-login .auth-card input[type=password] { border-radius:0; }
  .auth-card input[type=text] { height:40px; }
}
@media (max-width:600px) {
  .admin-email-form { grid-template-columns:1fr; }
  .auth-shell-simple .auth-card,.auth-shell-login .auth-card { padding:20px 18px; }
  .auth-links-row { margin-top:12px; }
}

/* Einheitliche Authentifizierungsansicht – greift auch bei einer noch laufenden älteren Razor-Kompilierung. */
.auth-page { background:#fff; }
.auth-page .page-frame>main { justify-content:center;align-items:flex-start; }
.auth-page .auth-intro { display:none; }
.auth-page .auth-shell { flex:0 1 500px;width:min(500px,100%);grid-template-columns:1fr;gap:0;align-items:start;padding:22px 0 16px; }
.auth-page .auth-card { width:100%;margin:0;border-radius:0;box-shadow:none;padding:20px 28px; }
.auth-page .auth-card input[type=text],.auth-page .auth-card input[type=email],.auth-page .auth-card input[type=password],.auth-page .auth-card .button { border-radius:0; }
.auth-page .auth-card h2 { font-size:1.65rem;line-height:1.1; }
.auth-page .auth-card>p { font-size:.9rem;line-height:1.25; }
.auth-page .auth-card label:not(.check-line) { gap:3px;margin-top:9px;font-size:.88rem; }
.auth-page .auth-card input[type=text],.auth-page .auth-card input[type=email],.auth-page .auth-card input[type=password] { height:36px;padding-inline:11px; }
.auth-page .auth-card .button { min-height:40px;margin-top:13px; }
.auth-page .check-line { margin-top:11px;font-size:.8rem; }
.auth-page .auth-links-row { margin-top:11px;font-size:.8rem; }
@media (max-width:600px) {
  .auth-page .auth-shell { padding-top:8px; }
  .auth-page .auth-card { padding:17px 14px; }
  .auth-page .auth-card input[type=text],.auth-page .auth-card input[type=email],.auth-page .auth-card input[type=password] { height:36px; }
}

@media (max-width:700px) {
  .hero-source { grid-template-columns:1fr;gap:3px;padding:12px; }
  .hero-source>span { grid-row:auto; }
  .hero-source small { white-space:normal; }
  .profile-shell { margin:26px auto 50px; }
  .profile-shell>header { padding:28px 0; }
  .profile-content { grid-template-columns:1fr;gap:18px;padding-top:28px; }
}