/* Aufgabe 0 "Was ist KI?" - nur neue Regeln: Bildraster, iframe-Einbettung, Lückentext.
   Basis-Layout, Reiter, Buttons, Feedback usw. kommen aus perzeptron/task5.css. */

.ki-intro-page .ki-rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.ki-intro-page .ki-rating-figure {
  margin: 0;
  padding: .85rem;
  border: 1px solid #b9d1df;
  border-radius: .85rem;
  background: #f9fcfe;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.ki-intro-page .ki-rating-figure img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: contain;
  background: #fff;
  border-radius: .5rem;
}

.ki-intro-page .ki-rating-figure figcaption {
  font-weight: 700;
  color: #12324a;
}

.ki-intro-page .ki-rating-figure figcaption .ki-rating-mark {
  display: block;
  font-weight: 700;
  margin-top: .2rem;
}

.ki-intro-page .ki-rating-figure figcaption .ki-rating-mark.is-correct { color: #1a6b45; }
.ki-intro-page .ki-rating-figure figcaption .ki-rating-mark.is-wrong { color: #af3f47; }

.ki-intro-page .ki-rating-figure label {
  font-weight: 700;
  display: block;
}

.ki-intro-page .ki-rating-figure select {
  margin-top: .3rem;
  min-height: 44px;
}

@media (max-width: 900px) {
  .ki-intro-page .ki-rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .ki-intro-page .ki-rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .ki-intro-page .ki-rating-figure img { height: 90px; }
}

/* -- iframe-Einbettung inf-schule (Reiter 3-5) -- */

/* Hervorgehobener Gesamtauftrag über der eingebetteten Seite (Farben wie .explanation-stepper in task5.css) */
.ki-intro-page .ki-embed-task {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-left: 5px solid #126e9c;
  border-radius: 0 .6rem .6rem 0;
  background: #edf6fb;
  color: #12324a;
  font-size: 1.08rem;
  text-align: left;
}

.ki-intro-page .ki-embed {
  margin: 1rem 0;
}

.ki-intro-page .ki-embed iframe {
  display: block;
  width: 100%;
  height: min(78vh, 760px);
  border: 1px solid #b9d1df;
  border-radius: .85rem;
  background: #fff;
}

@media (max-width: 700px) {
  .ki-intro-page .ki-embed iframe { height: 70vh; }
}

.ki-intro-page .ki-embed-fallback {
  margin: .5rem 0 0;
}

/* -- Lückentext (aus faecher/physik/klasse-11/1-Kreisbewegungen/kraefte-bewegung.css Z. 171-232) -- */

.ki-intro-page .physics-cloze {
  display: grid;
  gap: 16px;
  margin: 18px 0;
}

.ki-intro-page .cloze-term-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ki-intro-page .cloze-token {
  min-height: 44px;
  border: 1px solid #b9d1df;
  border-radius: 9px;
  padding: 8px 12px;
  color: #12324a;
  background: #f9fcfe;
  font: inherit;
  font-weight: 750;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.ki-intro-page .cloze-token.is-picked,
.ki-intro-page .cloze-gap.is-picked {
  outline: 3px solid #126e9c;
  outline-offset: 2px;
}

.ki-intro-page .cloze-token.is-dragging,
.ki-intro-page .cloze-gap.is-dragging {
  opacity: .45;
}

.cloze-drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #126e9c;
  border-radius: 9px;
  padding: 8px 12px;
  color: #12324a;
  background: #f9fcfe;
  font-weight: 750;
  box-shadow: 0 6px 18px rgba(18, 50, 74, .25);
}

/* Merksatz als normaler Fließtext; Lücken sitzen in der Zeile */
.ki-intro-page .cloze-sentence {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid #b9d1df;
  border-radius: .85rem;
  background: #fff;
  font-size: 1.08rem;
  /* Zeilenabstand größer als das Ablagefeld (46 px). */
  line-height: 3.4;
  text-align: left;
  color: #12324a;
}

/* Ablagefeld in der Größe von .formula-slot (Physik 11, Aufgabe 3, Reiter 4):
   volle Fläche als Treffer, leeres und belegtes Feld gleich groß. */
.ki-intro-page .cloze-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 46px;
  margin: 0 .15em;
  padding: 4px 10px;
  border: 2px dashed #126e9c;
  border-radius: 9px;
  background: #eef6fb;
  color: #12324a;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  vertical-align: middle;
  cursor: pointer;
  touch-action: none;
}

.ki-intro-page .cloze-gap.is-filled {
  border-style: solid;
  background: #f9fcfe;
  cursor: grab;
}

.ki-intro-page .cloze-gap.is-attached {
  margin-right: 0;
}

.ki-intro-page .cloze-gap.is-drop-target {
  background: #d7ebf6;
  border-color: #12324a;
}

.ki-intro-page .cloze-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ki-intro-page .notebook-reminder {
  margin-top: .6rem;
}