/* Kommissar Smiths Abenteuer – Stylesheet für Rahmen und Geschichte (ersetzt iaf.css + iaf_outer.css) */
@import url('/bl-themes/moran-master/css/normalize.css');

@font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400;
  src: local(''), url('/fonts_IAF/bangers-v20-latin-regular.woff2') format('woff2'), url('/fonts_IAF/bangers-v20-latin-regular.woff') format('woff'); }
@font-face { font-family: 'Reenie Beanie'; font-style: normal; font-weight: 400;
  src: local(''), url('/fonts_IAF/reenie-beanie-v16-latin-regular.woff2') format('woff2'), url('/fonts_IAF/reenie-beanie-v16-latin-regular.woff') format('woff'); }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400;
  src: local(''), url('/fonts_IAF/patrick-hand-v19-latin-regular.woff2') format('woff2'), url('/fonts_IAF/patrick-hand-v19-latin-regular.woff') format('woff'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 300;
  src: local(''), url('/fonts_IAF/roboto-mono-v22-latin-300.woff2') format('woff2'), url('/fonts_IAF/roboto-mono-v22-latin-300.woff') format('woff'); }

/* ---------- Rahmen (aus iaf_outer.css) ---------- */
body { margin: 0; background-color: #eae6d5; }
.text-center { text-align: center !important; width: 480px; max-width: 100%; margin: auto; }
#kopf { font-family: 'Bangers'; font-weight: normal; font-size: 0.8em; color: #333; border-bottom: 1px solid #aaa; padding: 0.4em 0; }
#kopf h1 { font-size: 20px; margin: 0; font-weight: normal; }
#kopf h1 a, #kopf h1 a:visited { color: #666; text-decoration: none; }
#kopf h1 a:hover { color: #07c; }
#kopf h2 { font-size: 30px; margin: 0; padding: 0; color: #ffcc00; font-weight: normal;
  text-shadow: rgb(64,64,64) 1px 0 0, rgb(64,64,64) .54px .84px 0, rgb(64,64,64) -.42px .91px 0, rgb(64,64,64) -.99px .14px 0, rgb(64,64,64) -.65px -.76px 0, rgb(64,64,64) .28px -.96px 0, rgb(64,64,64) .96px -.28px 0; }
#kopf nav { font-family: Arial, sans-serif; margin-top: 0.66em; font-size: 11px; }
#kopf nav a { padding: 0 6px; text-decoration: none; color: #039; }
#kopf nav a:hover { text-decoration: underline; }
#logobild { float: left; width: 75px; height: 75px; margin-left: 15%; background: url('/_images_site/logo-hq-web-200x200.gif') center center / 75px no-repeat; }
@media (max-width: 500px) { #logobild { display: none; } }

/* ---------- Geschichte (aus iaf.css, tw-* ersetzt) ---------- */
#story { border: 1px solid #d0d0d0; background-color: #eae6d5; color: #404040;
  font-family: 'Patrick Hand', cursive; font-size: 25px; line-height: 1.7;
  padding: 10px calc(100% / 7); box-shadow: inset -2px 2px 21px -1px rgba(0,0,0,.75); min-height: 60vh; }
@media (max-width: 700px) { #story { padding: 10px 16px; font-size: 22px; } }
#story select { background-color: white !important; font-family: inherit; font-size: 0.8em; }
.passage { margin-top: 25px; }
.passage h1 { margin-top: 0; }
h1, h2, h3 { font-family: 'Bangers', cursive; }
#story a { font-weight: normal; color: #404040; text-decoration: underline; }
#story a:hover { text-decoration: none; color: #000 !important; }
.startlink { font-size: 14px; text-align: right; }
.startlink a, .startlink a:hover { color: blue !important; text-decoration: none; }
.startlink a:hover { text-decoration: underline; }

/* SMS / Mail */
.sms { font-family: 'Roboto Mono', monospace; font-size: 22px; }

/* Auswahlblock */
.auswahl { margin-top: 15px; padding: 15px; border: 1px dashed #101110; border-radius: 8px; box-shadow: inset 0 0 30px 6px rgba(0,0,0,.59); background-color: white; }
.auswahl:before { color: #808080; content: "Was willst du tun?"; }
.auswahl p { margin: 0.4em 0; }
.auswahl ul { margin: 0.4em 0; padding-left: 1.2em; }

/* Videos */
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; margin: 1em 0; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; border: 3px solid #333; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: hsla(67,95%,95%,1); box-sizing: border-box; }
/* Zwei-Klick-Platzhalter (DSGVO): gleiche Form wie der iframe, erst nach Klick wird YouTube geladen */
.video--warten { border: 3px solid #333; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: hsla(67,95%,95%,1); box-sizing: border-box; }
.video__start { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; text-decoration: none !important; color: #333 !important; }
.video__play { display: block; width: 0; height: 0; border-style: solid; border-width: 28px 0 28px 48px; border-color: transparent transparent transparent #c8102e; filter: drop-shadow(2px 2px 0 #333); transition: transform .15s; }
.video__start:hover .video__play { transform: scale(1.1); }
.video__label { font-family: 'Bangers', cursive; font-size: 1.1em; letter-spacing: 2px; }
.video__hinweis { position: absolute; left: 0; right: 0; bottom: 0; padding: .3em 1.4em .5em; font-size: .55em; line-height: 1.3; color: #555; text-align: center; pointer-events: none; }
.video__hinweis a { pointer-events: auto; color: #555 !important; }
@media (max-width: 600px) { .video__hinweis { font-size: .5em; padding: .2em 1em .4em; } .video__play { border-width: 20px 0 20px 34px; } }

/* Bilder: Bilder auf eigener Zeile (<p class="img">) fließen rechts neben dem Text, Text läuft links daran vorbei.
   ![small](…) → kleinere Variante. Unter 700 px Breite kein Float, Bild volle Breite. */
#story img { width: 50%; max-width: 640px; padding: 1.2rem 1.6rem; display: inline-block; box-sizing: border-box;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: hsla(67,95%,95%,1); border: 3px solid #333; }
#story img.small { width: 32%; max-width: 400px; padding: 0.8rem 1rem; }
p.img { float: right; clear: right; width: 42%; max-width: 520px; margin: 0.2em 0 0.6em 1.5em; text-align: center; }
p.img:has(img.small) { width: 28%; max-width: 340px; }
#story p.img img { width: 100%; max-width: none; padding: 1rem 1.2rem; }  /* Bildbreite kommt vom p.img */
.passage::after { content: ""; display: block; clear: both; }  /* Float endet mit der Passage */
@media (max-width: 700px) {
  p.img { float: none; width: 100%; max-width: none; margin: 0.6em 0; }
  p.img:has(img.small) { width: 60%; margin: 0.6em auto; }
  #story img { width: 100%; } #story img.small { width: 60%; } }

/* Transkript */
details.transcript { font-size: 0.7em; margin: -0.5em 0 1em; }
details.transcript summary { cursor: pointer; color: #404040; text-decoration: underline; list-style: none; }
details.transcript summary::-webkit-details-marker { display: none; }
details.transcript summary .hide, details.transcript[open] summary .show { display: none; }
details.transcript[open] summary .hide { display: inline; }

/* Sprecher (Text-Stroke) */
.speaker-s { text-shadow: rgb(204,148,63) 1px 0 0, rgb(204,148,63) .54px .84px 0, rgb(204,148,63) -.42px .91px 0, rgb(204,148,63) -.99px .14px 0, rgb(204,148,63) -.65px -.76px 0, rgb(204,148,63) .28px -.96px 0, rgb(204,148,63) .96px -.28px 0; }
.speaker-k { text-shadow: rgb(13,212,33) 1px 0 0, rgb(13,212,33) .54px .84px 0, rgb(13,212,33) -.42px .91px 0, rgb(13,212,33) -.99px .14px 0, rgb(13,212,33) -.65px -.76px 0, rgb(13,212,33) .28px -.96px 0, rgb(13,212,33) .96px -.28px 0; }
.speaker-t { text-shadow: rgb(255,189,244) 1px 0 0, rgb(255,189,244) .54px .84px 0, rgb(255,189,244) -.42px .91px 0, rgb(255,189,244) -.99px .14px 0, rgb(255,189,244) -.65px -.76px 0, rgb(255,189,244) .28px -.96px 0, rgb(255,189,244) .96px -.28px 0; }
.speaker-_, .speaker-oe { text-shadow: rgb(16,81,179) 1px 0 0, rgb(16,81,179) .54px .84px 0, rgb(16,81,179) -.42px .91px 0, rgb(16,81,179) -.99px .14px 0, rgb(16,81,179) -.65px -.76px 0, rgb(16,81,179) .28px -.96px 0, rgb(16,81,179) .96px -.28px 0; }
.speaker-r { text-shadow: rgb(50,191,191) 1px 0 0, rgb(50,191,191) .54px .84px 0, rgb(50,191,191) -.42px .91px 0, rgb(50,191,191) -.99px .14px 0, rgb(50,191,191) -.65px -.76px 0, rgb(50,191,191) .28px -.96px 0, rgb(50,191,191) .96px -.28px 0; }
.speaker-b { text-shadow: rgb(181,183,247) 1px 0 0, rgb(181,183,247) .54px .84px 0, rgb(181,183,247) -.42px .91px 0, rgb(181,183,247) -.99px .14px 0, rgb(181,183,247) -.65px -.76px 0, rgb(181,183,247) .28px -.96px 0, rgb(181,183,247) .96px -.28px 0; }

/* Post-its */
.notes { padding: 0; }
.notes li { position: relative; width: 350px; max-width: 90%; min-height: 100px; margin: 15px auto; padding: 20px 15px 15px; box-shadow: 0 1px 2px #000; transform: rotate(-.5deg); list-style-type: none; background-color: #fdfd86; }
.notes li:nth-child(even) { transform: rotate(.5deg); }
.notes li p { text-align: center; font: normal 26px/31px 'Reenie Beanie', Helvetica, Arial, sans-serif; color: #000; text-shadow: white 1px 1px 0; overflow: hidden; margin: 0; }
.notes li::before { content: ' '; display: block; position: absolute; left: 115px; top: -15px; width: 75px; height: 25px; z-index: 2; background-color: rgba(243,245,228,.5); border: 2px solid rgba(255,255,255,.5); box-shadow: 2px 2px 2px #000; transform: rotate(-6deg); }
.notes li:nth-child(even)::before { transform: rotate(6deg); }

/* Fragen und Lücken */
.question ol.answers { list-style: none; padding-left: 0; }
.question .feedback.right p:last-child { color: #1a7a1a; }
.question .feedback.wrong p:last-child { color: #a11; }
.cloze-correct p { color: #1a7a1a; }
.cloze-wrong p { color: #a11; }
mark { background: #ffe97a; padding: 0 .15em; }
.geruecht { color: #1a3d7c; background: hsla(215, 45%, 88%, .55); padding: .05em .3em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }   /* ++Gerücht++ */
.resume { background: white; border: 1px dashed #101110; border-radius: 8px; padding: 15px; margin-top: 25px; }
.countdown { font-style: italic; }

/* Vorspann (z.B. Verdauung) */
.before p { font-style: italic; color: #6b5a3a; }

/* Dienstgrad (Kapitelende) */
.rank { margin: 1.4em 0; padding: 1em 1.2em 1em; background: #fffdf3; border: 3px solid #1a3d7c; border-radius: 12px; color: #1a2b4c;
  box-shadow: 4px 4px 0 rgba(26,61,124,.25); position: relative; }
.rank-title { font-family: 'Bangers', cursive; font-size: 1.1em; letter-spacing: 2px; color: #1a3d7c; text-transform: uppercase;
  border-bottom: 2px dashed #1a3d7c; padding-bottom: .2em; margin-bottom: .5em; }
.rank p { margin: .35em 0; }
.rank h1 { font-size: 1.6em; letter-spacing: 1px; color: #c8102e; margin: .2em 0 .3em; }
.rank em { font-style: normal; font-size: .8em; color: #555; }
.rank-body:empty { display: none; }
.rank ul { font-size: .8em; margin: .3em 0 .6em; padding-left: 1.2em; line-height: 1.5; }
.rank mark { background: #1a3d7c; color: #fff; padding: 0 .3em; border-radius: 3px; }

/* Lückentext-Tipps (Eintrag im Auswahlfeld, Rückfrage daneben) */
.hint-wrap { font-size: .6em; margin-left: .3em; }
.hint-wrap:empty { display: none; }
.hint-ask { display: inline-block; white-space: normal; background: #fff3cd; border: 1px solid #c9a227; border-radius: 6px; padding: .2em .6em; margin: .2em 0; color: #5a4300; font-size: 1.35em; line-height: 1.4; }
.hint-ask a { color: #8a0000 !important; font-weight: bold; }
.hint-used { font-size: 1.3em; }
#story select.gap.hinted { background-color: #fff3cd !important; color: #5a4300; }
#story select.gap option.hint-option { color: #8a5a00; font-style: italic; }

/* Fragen: schon probierte Antworten */
.question li.tried { text-decoration: line-through; opacity: .45; }
.question .retry a { font-weight: bold; }

/* Game over */
.gameover { margin: 1.2em 0; padding: 1em 1.2em; background: #fff3f3; border: 4px solid #c8102e; border-radius: 12px; color: #8a0000;
  box-shadow: 0 0 0 6px rgba(200,16,46,.15), 0 0 40px rgba(200,16,46,.35); animation: gameover-blink 1.2s ease-in-out infinite alternate; }
.gameover-title { font-family: 'Bangers', cursive; font-size: 2.2em; letter-spacing: 2px; text-align: center; color: #c8102e; margin-bottom: .3em; }
.gameover p { margin: .4em 0; }
.gameover a { color: #8a0000 !important; font-weight: bold; }
@keyframes gameover-blink { from { box-shadow: 0 0 0 6px rgba(200,16,46,.15), 0 0 30px rgba(30,80,220,.25); } to { box-shadow: 0 0 0 6px rgba(200,16,46,.35), 0 0 60px rgba(200,16,46,.6); } }