/* Use the visible viewport, including Safari's expanded browser controls.
   Long imported content is allowed to grow rather than being clipped. */
@media (min-width:700px) {
  body:has(main:not([hidden])) header{width:100%;max-width:1180px;padding:8px 24px}
  body:has(main:not([hidden])) main{width:100%;max-width:1180px;margin:0 auto;padding:0 24px 8px;gap:8px}
  body:has(main:not([hidden])) footer{display:none}
  .intro{gap:12px;padding:0 4px}.intro .mascot{width:44px;height:44px;font-size:29px;border-radius:14px}.intro h1{font-size:23px}.intro p{font-size:14px}
  .workspace{padding:14px 22px;min-height:min(80svh,calc(100svh - 180px),800px);display:flex;flex-direction:column;box-shadow:0 4px 0 #e7e3f4}
  .quiz-top{min-height:40px}.quiz-top .text-button{min-height:40px;padding:8px}
  .review-bar{padding-bottom:4px;margin-bottom:3px;gap:8px}.review-bar .text-button{min-height:36px;padding:6px 8px}
  .progress-label{margin-top:0}progress{flex-shrink:0;margin-top:6px;height:8px}
  #question{font-size:25px;margin:14px 0 7px;line-height:1.25}.hint{margin-bottom:10px}
  .answers{gap:10px}.answer,.answer.selected,.answer.correct{min-height:66px;padding:10px 12px;font-size:17px;line-height:1.35}
  .letter{width:30px;height:30px;font-size:15px;flex-shrink:0}
  .feedback{margin-top:10px;padding:10px 13px}.feedback p{font-size:16px;line-height:1.4}.feedback h3{font-size:16px}
  .encouragement{padding:8px 12px;margin-top:10px}.encouragement p{font-size:15px;line-height:1.35}
  .workspace nav{margin-top:auto;padding-top:12px;flex-shrink:0}.workspace nav .primary,.workspace nav .secondary{min-height:44px;padding:10px 18px}
  #question-view,#result{padding-bottom:12px}#result{padding-top:20px}
  .parent-settings{font-size:14px}.parent-settings>summary{min-height:40px}
  main:has(.parent-settings[open]) .workspace,main:has(.parent-settings[open]) .intro{display:none}
  .parent-settings[open]{align-self:stretch;width:100%;padding:0 20px 18px;background:#fff}
  .parent-settings[open]>summary{min-height:48px}
  .parent-settings[open]>summary::after{content:' · Zum Quiz zurück: hier schließen';margin-left:auto;font-size:13px;font-weight:400}
  .parent-settings .source{padding-top:10px}.parent-settings details{margin-top:12px}
  #test-access{width:min(620px,calc(100% - 48px));margin:10px auto;padding:22px 28px}
  #test-access .mascot{width:50px;height:50px;font-size:32px;margin-bottom:12px}
  #test-access form{margin:16px 0}#test-access h1{font-size:26px}
}
/* On landscape iPads, use the available width for the explanation. */
@media (min-width:900px) and (max-height:850px) {
  body:has(main:not([hidden])) main{gap:6px}
  .intro{display:none}
  .workspace{min-height:calc(100svh - 120px);padding:10px 20px}
  #question-view{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:18px;align-items:start;padding-bottom:10px}
  #question{grid-column:1/-1;font-size:24px;margin:10px 0 12px}
  #question-view .hint{display:none}
  #answers{grid-column:1;grid-row:2/4;grid-template-columns:1fr 1fr;align-self:start}
  .answer,.answer.selected,.answer.correct{min-height:85px;padding:10px;font-size:16px;gap:9px;align-items:flex-start}
  #feedback{grid-column:2;grid-row:2;margin:0;padding:10px 13px}
  #encouragement{grid-column:2;grid-row:3;margin-top:10px}
  #question-view:not(:has(#feedback:not([hidden]))) #answers{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .review-bar{border:0;padding:0;margin:0}.quiz-top{min-height:36px}
  #result{padding:10px 0}#result h2{font-size:24px;margin:12px 0}#result p{font-size:16px;margin:8px 0}.finish-icon{width:48px;height:48px;font-size:28px}
}

body.answer-right{background:#e5f4e8}body.answer-wrong{background:#fce9e9}
body.answer-right .workspace{background:#f4fcf5;border-color:#a3cfaa}
body.answer-wrong .workspace{background:#fff6f6;border-color:#e6b3b3}
body.answer-wrong .answer.wrong{background:#fce3e3;border-color:#bb5b5b;color:#733333}
.save-line{display:flex;align-items:center;gap:8px;font-size:12px;color:#596a62;min-height:20px;margin-top:4px}.save-line .text-button{font-size:12px;min-height:32px;padding:4px}