*{box-sizing:border-box} :root{color-scheme:light dark;--bg:#f5f5f7;--surface:#fff;--surface2:#f0f1f3;--text:#1d1d1f;--muted:#74767c;--border:rgba(0,0,0,.08);--blue:#527fa8;--bluebg:#edf3f8;--green:#157347;--greenbg:#d7f4e4;--red:#b42336;--redbg:#fbe1e4;--shadow:0 14px 42px rgba(10,20,30,.065)}@media(prefers-color-scheme:dark){:root{--bg:#101113;--surface:#1c1d20;--surface2:#27282c;--text:#f5f5f7;--muted:#9d9fa6;--border:rgba(255,255,255,.08);--blue:#83add4;--bluebg:#223443;--green:#8be8b0;--greenbg:#204637;--red:#ff9ca6;--redbg:#51252f;--shadow:0 14px 45px rgba(0,0,0,.2)}}html{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.app{width:min(100%,620px);padding:clamp(18px,4vw,28px) max(15px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));margin:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 30px}.header h1{font-size:clamp(2rem,7vw,2.7rem);letter-spacing:-.055em;line-height:1;margin:0}.header p{font-size:.9rem;color:var(--muted);margin:7px 0 0}.direction{min-height:46px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:6px 14px;color:var(--text)}.direction span:nth-child(2){color:var(--muted)}.panel,.quiz-card{border:1px solid var(--border);background:var(--surface);border-radius:30px;box-shadow:var(--shadow)}.panel{padding:clamp(22px,5vw,40px)}.setup{margin-top:clamp(32px,11vh,110px)}.eyebrow{font-size:.76rem;letter-spacing:.065em;font-weight:650;color:var(--muted)}h2{font-size:clamp(1.4rem,5vw,2rem);line-height:1.17;letter-spacing:-.035em}.setup h2{margin:24px 0}.counts{display:grid;grid-template-columns:repeat(5,1fr);padding:5px;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:18px}.counts button{border:0;border-radius:13px;background:transparent;color:var(--muted);height:47px;font-weight:600;min-width:0}.counts button.active{background:var(--surface);color:var(--text);box-shadow:0 2px 7px rgba(0,0,0,.09)}.primary,.secondary{width:100%;border-radius:17px;padding:16px 12px;min-height:53px;font-weight:650}.primary{background:var(--bluebg);color:var(--blue);border:1px solid var(--border);margin-top:25px}.secondary{background:transparent;color:var(--text);border:1px solid var(--border);margin-top:10px}.subnote{font-size:.78rem;color:var(--muted);text-align:center;margin:16px 0 0}.progress{display:flex;align-items:center;gap:15px;margin:0 0 16px}.track{flex:1;height:5px;background:var(--surface2);border-radius:6px;overflow:hidden}.track div{height:100%;background:var(--blue);width:0;transition:width .2s}.progress span{white-space:nowrap;font-size:.84rem;color:var(--muted);font-weight:600}.quiz-card{overflow:hidden;padding-bottom:20px}.picture{height:clamp(210px,37dvh,330px);position:relative;overflow:hidden;background:var(--surface2)}.picture img{height:100%;width:100%;object-fit:cover;display:block}.picture span{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:var(--surface2)}.question{padding:19px 22px 15px}.question h2{font-size:clamp(1.45rem,5vw,2.2rem);margin:8px 0 0}.answers{padding:0 18px;display:grid;gap:10px}.answer{width:100%;text-align:left;display:flex;align-items:center;gap:16px;background:var(--surface2);color:var(--text);border:1.5px solid var(--border);border-radius:16px;min-height:58px;padding:13px 16px;font-size:1.03rem;font-weight:580;transition:background .13s,border-color .13s}.answer .letter{min-width:20px;font-size:.77rem;color:var(--muted);font-weight:700}.answer.correct{background:var(--greenbg);border-color:var(--green);color:var(--green)}.answer.wrong{background:var(--redbg);border-color:var(--red);color:var(--red)}.answer:disabled{cursor:default;opacity:1;-webkit-text-fill-color:currentColor}.answer:disabled:not(.correct):not(.wrong){color:var(--text)}.result{margin-top:55px;text-align:center}.result h2{font-size:2.4rem}.score{font-size:clamp(3rem,15vw,5rem);font-weight:750;letter-spacing:-.06em}.muted{color:var(--muted)}[hidden]{display:none!important}@media(max-height:700px){.header{margin-bottom:16px}.picture{height:clamp(150px,28dvh,235px)}.answer{min-height:48px}.quiz-card{padding-bottom:12px}.answers{gap:7px}.question{padding:12px 18px}.setup{margin-top:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}


/* Multiple Choice – kompakte Größen wie im Vokabelquiz */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-height: 0; }
.vocab-app.app {
  width: min(100%, 720px);
  max-width: 720px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  gap: clamp(8px, 1.8dvh, 18px);
}
.app-header.header { margin: 0; flex: 0 0 auto; }
.app-title h1 { font-size: clamp(1.8rem, 4.6vw, 2.65rem); line-height: 1.02; }
.app-title p { margin: 5px 0 0; font-size: clamp(.78rem, 1.4vw, .94rem); }
.brand-link { color: inherit; text-decoration: none; }
.brand-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.brand-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.screen--setup {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  scrollbar-width: none;
}
.screen--setup::-webkit-scrollbar { display: none; }
.screen--setup .setup-card {
  width: 100%;
  max-width: 580px;
  margin: clamp(10px, 5dvh, 52px) auto 0;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 27px;
}
.direction-section {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: clamp(14px, 2.5dvh, 23px);
  border-bottom: 1px solid var(--border);
}
.direction-label { font-size: .94rem; font-weight: 650; }
.direction-button.direction {
  min-width: 118px; min-height: 43px; justify-content: center;
  padding: 6px 12px; gap: 10px; font-size: .98rem;
}
.direction-flag { font-size: 1.1rem; }
.direction-arrow { color: var(--muted); }
.section { margin: clamp(14px, 2.5dvh, 23px) 0 0; }
.section-title { font-size: clamp(1rem, 2.8vw, 1.18rem); margin: 0 0 12px; }
.count-options.counts { padding: 4px; border-radius: 16px; }
.count-options.counts button { height: clamp(37px, 5dvh, 45px); font-size: .92rem; border-radius: 12px; }
.start-button.primary {
  min-height: clamp(43px, 5.8dvh, 50px);
  padding: 10px 12px; border-radius: 14px;
  margin-top: clamp(15px, 3dvh, 23px); font-size: .95rem;
}
.primary:disabled { opacity: .55; cursor: wait; }
.subnote { margin: 9px 0 0; font-size: .7rem; }

/* Quiz: gesamter Inhalt bleibt innerhalb des Viewports */
.screen--test {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1dvh, 10px);
}
.test-topbar { display: flex; justify-content: flex-end; flex: 0 0 auto; }
.test-direction-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: .9rem;
}
.test-direction-pill #play-arrow { color: var(--muted); }
.progress { flex: 0 0 auto; margin: 0; }
.test-stage { flex: 1 1 auto; min-height: 0; display: flex; }
.quiz-card.test-card {
  width: 100%; min-height: 0; flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding-bottom: clamp(9px, 1.5dvh, 14px);
  overflow: hidden;
  border-radius: 23px;
}
.picture {
  flex: 1 1 auto;
  min-height: 68px;
  max-height: min(39dvh, 290px);
  height: auto;
  overflow: hidden;
}
.picture img { width: 100%; height: 100%; object-fit: cover; }
.question { flex: 0 0 auto; padding: clamp(8px, 1.4dvh, 14px) 16px clamp(7px, 1.1dvh, 11px); }
.question h2 { font-size: clamp(1.15rem, 3.8vw, 1.65rem); margin-top: 5px; }
.eyebrow { font-size: .66rem; }
.answers { flex: 0 0 auto; padding: 0 12px; gap: clamp(5px, .9dvh, 8px); }
.answer {
  min-height: clamp(36px, 5.6dvh, 49px);
  padding: 6px 12px; font-size: clamp(.82rem, 2.7vw, .99rem);
  border-radius: 12px; gap: 10px;
}
.screen--result { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.screen--result .result { width: 100%; margin: 0; }
@media (max-width: 600px) {
  .vocab-app.app { padding-left: max(11px, env(safe-area-inset-left)); padding-right: max(11px, env(safe-area-inset-right)); }
  .app-title h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .screen--setup .setup-card { margin-top: clamp(9px, 3dvh, 24px); padding: 18px; }
  .picture { max-height: 35dvh; }
}
@media (max-height: 670px) {
  .vocab-app.app { gap: 6px; padding-top: 7px; padding-bottom: 7px; }
  .app-title h1 { font-size: 1.65rem; }
  .screen--setup .setup-card { margin-top: 6px; padding: 14px 18px; }
  .direction-section { padding-bottom: 11px; }
  .section { margin-top: 12px; }
  .section-title { margin-bottom: 7px; }
  .count-options.counts button { height: 35px; }
  .start-button.primary { margin-top: 12px; min-height: 40px; }
  .subnote { margin-top: 6px; }
  .test-direction-pill { padding: 4px 9px; }
  .answer { min-height: 33px; }
  .picture { min-height: 56px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .screen--test .quiz-card { display: grid; grid-template-columns: 42% 58%; grid-template-rows: auto minmax(0, 1fr); }
  .screen--test .picture { grid-row: 1 / 3; height: 100%; max-height: none; }
  .screen--test .question { grid-column: 2; padding: 8px 12px; }
  .screen--test .answers { grid-column: 2; min-height: 0; gap: 4px; }
  .answer { min-height: 28px; padding: 3px 9px; }
}
button { touch-action: manipulation; }

/* Cookie-Banner: Stil analog zur existierenden Karteikarten-Einbindung; Sichtbarkeit steuert cookies.js */
#cookie-banner{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:9999;width:min(calc(100% - 24px),560px);transform:translateX(-50%);padding:16px;border:1px solid rgba(0,0,0,.08);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 14px 40px rgba(20,25,35,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;display:none}
#cookie-banner p{margin:0;color:#6e6e73;font-size:.82rem;line-height:1.5}#cookie-banner a{color:inherit!important;text-decoration:underline;text-underline-offset:2px}.cookie-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}.cookie-buttons button{min-height:38px;padding:7px 14px;border-radius:12px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}#decline-cookies{border:1px solid #d6d6da;background:#fff;color:#1d1d1f}#accept-cookies{border:1px solid #527fa8;background:#527fa8;color:#fff}
/* Doppel-Tipp-Zoom auf Touchgeräten verhindern, Pinch-Zoom bleibt möglich. */
html, body { touch-action: manipulation; }

/* Feinschliff: keine nach unten gestreckte Quizkarte */
.screen--test .test-stage {
  flex: 0 1 auto;
  min-height: 0;
  display: block;
}
.screen--test .quiz-card.test-card {
  flex: none;
  height: auto;
  max-height: 100%;
  min-height: 0;
  align-self: start;
}
.screen--test .picture {
  flex: none;
  height: clamp(135px, 29dvh, 275px);
  max-height: 29dvh;
  min-height: 0;
}
/* Etwas mehr Weißraum im Startdialog, ohne seine Breite zu erhöhen */
.screen--setup .setup-card {
  padding: clamp(23px, 3.6vw, 36px);
}
.screen--setup .direction-section {
  padding-bottom: clamp(17px, 2.8dvh, 26px);
}
.screen--setup .section {
  margin-top: clamp(17px, 2.8dvh, 26px);
}
.screen--setup .start-button.primary {
  margin-top: clamp(19px, 3.2dvh, 29px);
}
@media (max-height: 670px) {
  .screen--setup .setup-card { padding: 18px 20px; }
  .screen--setup .direction-section { padding-bottom: 12px; }
  .screen--setup .section { margin-top: 13px; }
  .screen--setup .start-button.primary { margin-top: 13px; }
  .screen--test .picture { height: clamp(105px, 24dvh, 190px); max-height: 24dvh; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .screen--test .picture { height: 100%; max-height: none; }
}

/* Feinschliff: mehr Innenabstand in der Quizkarte, ohne zusätzliche Kartenhöhe */
.screen--test .quiz-card.test-card {
  padding-bottom: clamp(15px, 2dvh, 21px);
}
.screen--test .question {
  padding: clamp(12px, 1.8dvh, 19px) clamp(20px, 3vw, 27px) clamp(11px, 1.6dvh, 16px);
}
.screen--test .answers {
  padding-inline: clamp(19px, 3vw, 27px);
  gap: clamp(7px, 1.1dvh, 11px);
}
.screen--test .answer {
  padding-inline: clamp(13px, 2.3vw, 19px);
}
@media (max-height: 670px) {
  .screen--test .quiz-card.test-card { padding-bottom: 11px; }
  .screen--test .question { padding: 9px 15px 8px; }
  .screen--test .answers { padding-inline: 14px; gap: 5px; }
  .screen--test .answer { padding-inline: 11px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .screen--test .question { padding: 7px 12px 5px; }
  .screen--test .answers { padding-inline: 12px; gap: 4px; }
}


/* Ersatzdarstellung, falls die Bilddatei nicht geladen werden kann.
   Dezent wie bei den Karteikarten, automatisch hell/dunkel. */
.picture #visual-fallback:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(5px, 1dvh, 10px);
  padding: 20px 28px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #1d1d1f;
  background: radial-gradient(ellipse at 28% 24%, #e7f1fa 0%, #c8ddef 58%, #bdd5e9 100%);
}
.picture #visual-fallback:not([hidden])::before,
.picture #visual-fallback:not([hidden])::after {
  content: "";
  position: absolute;
  width: min(52%, 280px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.picture #visual-fallback:not([hidden])::before {
  top: -55%; left: -19%;
}
.picture #visual-fallback:not([hidden])::after {
  right: -18%; bottom: -75%;
}
.picture .mc-fallback-label {
  font-size: clamp(.64rem, 1.5vw, .8rem);
  font-weight: 750;
  letter-spacing: .16em;
  color: #52677a;
}
.picture .mc-fallback-word {
  font-size: clamp(1.65rem, 5vw, 2.8rem);
  line-height: 1.07;
  font-weight: 750;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
  max-width: 100%;
}
@media (prefers-color-scheme: dark) {
  .picture #visual-fallback:not([hidden]) {
    color: #f5f5f7;
    background: radial-gradient(ellipse at 28% 25%, #334c61 0%, #213547 60%, #1b2a39 100%);
  }
  .picture .mc-fallback-label { color: #b3c5d4; }
  .picture #visual-fallback:not([hidden])::before,
  .picture #visual-fallback:not([hidden])::after {
    border-color: rgba(255,255,255,.16);
  }
}
/* Alte generische .picture span-Regel für die beiden Textzeilen neutralisieren. */
.picture #visual-fallback .mc-fallback-label,
.picture #visual-fallback .mc-fallback-word {
  position: static;
  inset: auto;
  display: block;
  background: transparent;
  width: auto;
}

/* =========================================================
   MOBILE FINAL: Auswahlkarte zentrieren, größere Touch-Ziele
   ========================================================= */
@media (max-width: 600px) and (orientation: portrait) {
  /* Vertikale Zentrierung innerhalb des Platzes unter dem Header. */
  .vocab-app.app {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .screen--setup {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
  }
  .screen--setup .setup-card {
    flex-shrink: 0;
    margin: auto 0;
    padding: clamp(20px, 3.4dvh, 28px);
  }
  /* Breite, angenehme Antippflächen wie bei nativen iOS-Controls. */
  .screen--test .answer {
    min-height: 54px;
    padding: 11px 15px;
    font-size: 1rem;
    line-height: 1.3;
    border-radius: 14px;
    touch-action: manipulation;
  }
  .screen--test .answers {
    gap: 9px;
    padding-inline: clamp(16px, 4vw, 22px);
  }
  .screen--test .question {
    padding: 13px clamp(17px, 4vw, 24px) 12px;
  }
  .screen--test .quiz-card.test-card { padding-bottom: 16px; }
  /* Bild gibt Platz frei, bevor Buttons unkomfortabel klein werden. */
  .screen--test .picture { height: clamp(125px, 25dvh, 260px); max-height: 25dvh; min-height: 100px; }
}
@media (max-width: 600px) and (max-height: 740px) and (orientation: portrait) {
  .screen--test .answer { min-height: 48px; padding-block: 8px; }
  .screen--test .answers { gap: 6px; }
  .screen--test .question { padding-block: 8px; }
  .screen--test .picture { height: 20dvh; max-height: 20dvh; min-height: 80px; }
  .screen--setup .setup-card { padding: 18px; }
}
@media (max-width: 600px) and (max-height: 580px) and (orientation: portrait) {
  .screen--test .answer { min-height: 44px; padding-block: 6px; }
  .screen--test .answers { gap: 4px; }
  .screen--test .picture { height: 15dvh; max-height: 15dvh; min-height: 55px; }
}

/* Feinabstimmung der Quizkarte auf Smartphones: mehr Bild und mehr Luft.
   Die zentrale JS-Logik und das Desktoplayout bleiben unverändert. */
@media (max-width: 600px) and (orientation: portrait) and (min-height: 741px) {
  .screen--test .picture {
    height: clamp(155px, 28dvh, 285px);
    max-height: 28dvh;
  }
  .screen--test .question {
    padding-top: clamp(16px, 2.15dvh, 22px);
    padding-bottom: clamp(18px, 2.25dvh, 24px);
  }
  .screen--test .question h2 {
    margin-top: 10px;
  }
  .screen--test .quiz-card.test-card {
    padding-bottom: clamp(17px, 2.2dvh, 23px);
  }
}
@media (max-width: 600px) and (orientation: portrait) and (min-height: 581px) and (max-height: 740px) {
  .screen--test .picture { height: 22dvh; max-height: 22dvh; }
  .screen--test .question { padding-top: 11px; padding-bottom: 12px; }
  .screen--test .question h2 { margin-top: 7px; }
}

/* =========================================================
   STARTBILDSCHIRM – Position wie Vokabelquiz-Master
   Nicht in der gesamten Resthoehe zentrieren.
   ========================================================= */
@media (max-width: 600px) and (orientation: portrait) {
  .vocab-app.app .screen--setup.is-active {
    justify-content: flex-start;
    align-items: stretch;
    padding-top: clamp(26px, 5dvh, 55px);
    overflow-y: auto;
  }
  .vocab-app.app .screen--setup.is-active .setup-card {
    flex: 0 0 auto;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 600px) and (max-height: 700px) and (orientation: portrait) {
  .vocab-app.app .screen--setup.is-active {
    padding-top: clamp(8px, 2dvh, 18px);
  }
}

/* =========================================================
   HOTFIX: Setup-Card darf NIE die Höhe der Quiz-Card erben.
   Nur im aktiven Startbildschirm: Höhe strikt am Inhalt.
   ========================================================= */
.vocab-app.app .screen--setup.is-active .setup-card.panel.setup {
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
  flex: 0 0 auto !important;
  align-self: auto;
  display: block;
  margin-bottom: 0;
}
@media (max-width: 600px) and (orientation: portrait) {
  .vocab-app.app .screen--setup.is-active {
    flex: 1 1 auto;
    justify-content: flex-start !important;
    align-items: stretch;
    padding-top: clamp(26px, 5dvh, 55px);
  }
  .vocab-app.app .screen--setup.is-active .setup-card.panel.setup {
    width: 100%;
    margin: 0 auto !important;
    padding: clamp(20px, 3.4dvh, 28px);
    height: max-content !important;
  }
}
@media (max-width: 600px) and (max-height: 700px) and (orientation: portrait) {
  .vocab-app.app .screen--setup.is-active { padding-top: 12px; }
}

/* Fehlermeldung und Dateipfad im Bild-Fallback ausblenden */
.picture #visual-fallback:not([hidden]) {
  font-size: 0;
}

.picture #visual-fallback .mc-fallback-label,
.picture #visual-fallback .mc-fallback-word {
  display: none !important;
}