/* Ergänzungen für Wiederholung 2; Grundlayout und Rückmeldungen stammen aus Wiederholung 1. */
.force-grid-host {
  margin: 18px 0;
  overflow-x: auto;
}

.force-arrow-grid {
  max-width: 720px;
  margin-inline: auto;
}

.force-arrow-grid svg {
  background: linear-gradient(180deg, #f8fbff, #ffffff 72%);
}

.force-arrow-grid .result-vector {
  stroke-width: 5;
}

/* Pfeilfarbe und Farbe der Pfeilspitze müssen übereinstimmen. */
.force-arrow-grid .force-arrow-1 {
  stroke: #2563eb;
}

.force-arrow-grid .force-arrow-2 {
  stroke: #7c3aed;
}

.force-arrow-grid .force-illustration {
  color: #334155;
}

.force-arrow-grid .scene-outline,
.force-arrow-grid .scene-line {
  fill: none;
  stroke: #475569;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.force-arrow-grid .scene-fill {
  fill: #dbeafe;
  stroke: #475569;
  stroke-width: 3;
  stroke-linejoin: round;
}

.force-arrow-grid .scene-accent {
  fill: #c4b5fd;
  stroke: #475569;
  stroke-width: 3;
}

/* Bruchlinien am Auto zeigen den Schaden beim Aufprall auf die Wand. */
.force-arrow-grid .scene-damage {
  fill: none;
  stroke: #ea580c;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.force-arrow-grid .force-origin-marker {
  fill: #111827;
  stroke: #ffffff;
  stroke-width: 2;
}

.force-situation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}

.force-situation {
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 12px;
  background: #f8fafc;
}

.force-situation svg {
  display: block;
  width: 100%;
  height: auto;
}

.force-situation figcaption {
  margin-top: 8px;
  color: #334155;
  font-weight: 800;
  text-align: center;
}

.scene-table {
  fill: #cbd5e1;
  stroke: #475569;
  stroke-width: 3;
}

.scene-block,
.scene-car {
  fill: #dbeafe;
  stroke: #475569;
  stroke-width: 3;
  stroke-linejoin: round;
}

.scene-wheel {
  fill: #ffffff;
  stroke: #475569;
  stroke-width: 5;
}

.scene-force-guide {
  stroke: #94a3b8;
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.law-term-matching {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.law-term-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.law-term-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.law-term-card h4 {
  margin: 0;
  font-size: 1.35rem;
}

.law-term-card .physics-feedback {
  margin: 0;
}

/* Ablagefeld einer Zuordnungskarte: gleiche Optik wie eine Lücke im
   Lückentext, aber als eigene Zeile in der Karte. */
.law-term-slot {
  display: block;
  width: 100%;
  min-height: 46px;
  text-align: center;
}

/* Prüfbutton mittig unter dem Ablagefeld statt am linken Kartenrand. */
.law-term-card .direct-check-button {
  justify-self: center;
}

.law-term-slot.is-correct {
  border-color: #059669;
  background: #ecfdf5;
}

.law-term-slot.is-wrong {
  border-color: #dc2626;
  background: #fef2f2;
}

.formula-display {
  margin: 12px 0;
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  text-align: center;
}

.vector-symbol {
  position: relative;
  display: inline-block;
  min-width: 0.72em;
  padding-top: 0.12em;
  line-height: 1;
  text-align: center;
}

.vector-symbol::before {
  position: absolute;
  top: -0.72em;
  left: 50%;
  content: "→";
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  transform: translateX(-50%);
}

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

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

.cloze-token {
  min-height: 44px;
  border: 1px solid #93c5fd;
  border-radius: 9px;
  padding: 8px 12px;
  color: #1e3a8a;
  background: #eff6ff;
  font: inherit;
  font-weight: 750;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* Diese Datei wird auch von den Lernmodulen Aufgabe 3 bis 6 geladen; dort sind benutzte
   Karten ausgegraut und die Lücken teils noch Auswahlfelder. */
.cloze-token:disabled {
  opacity: 0.45;
  cursor: default;
}

.cloze-sentence select {
  min-height: 42px;
  max-width: 100%;
  margin: 0 4px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  padding: 6px 8px;
  color: #0f172a;
  background: #ffffff;
  font: inherit;
}

.cloze-token.is-picked,
.cloze-gap.is-picked {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

.cloze-token.is-dragging,
.cloze-gap.is-dragging {
  opacity: 0.45;
}

/* Mitgezogene Karte am Mauszeiger beziehungsweise am Finger. */
.cloze-drag-ghost {
  position: fixed;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgba(30, 58, 138, 0.25);
  pointer-events: none;
}

.cloze-sentence {
  margin: 0;
}

/* Zeilenabstand größer als das Ablagefeld (46 px), damit sich die Felder
   benachbarter Zeilen nicht berühren. Die Auswahl muss spezifischer sein als
   die allgemeine Absatzregel .physics-task-card p. */
.physics-cloze .cloze-sentence,
#law-cloze .cloze-sentence {
  line-height: 3.6;
}

/* Fließtext-Lückentext mit Drag-and-Drop-Lücken (Wiederholung 2, Aufgabe 2). */
#law-cloze .cloze-sentence {
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 14px 16px;
  background: #ffffff;
  line-height: 3.4;
  text-align: left;
}

/* Lücke im Fließtext: Ablagefeld in der Größe von .formula-slot
   (Aufgabe 3, Reiter 4), damit die Trefferfläche auf dem Tablet ausreicht.
   Leeres und belegtes Feld sind gleich groß, damit der Umbruch stehen bleibt. */
.cloze-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 46px;
  margin: 0 0.2em;
  border: 2px dashed #93c5fd;
  border-radius: 9px;
  padding: 4px 10px;
  color: #0f172a;
  background: #eff6ff;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  vertical-align: middle;
  cursor: pointer;
  touch-action: none;
}

.cloze-gap.is-filled {
  border-style: solid;
  border-color: #2563eb;
  background: #ffffff;
  cursor: grab;
}

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

.cloze-gap.is-drop-target {
  border-color: #1e3a8a;
  background: #dbeafe;
}

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

.cloze-actions .secondary-button {
  color: #1e3a8a;
  background: #ffffff;
  border: 1px solid #93c5fd;
}

.sortable-help {
  margin-top: 18px;
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.sortable-help > summary {
  cursor: pointer;
  font-weight: 800;
}

.sortable-steps {
  display: grid;
  gap: 9px;
  margin: 14px 0;
}

.sortable-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px 8px 14px;
  background: #f8fafc;
  cursor: grab;
}

.sortable-step:focus-visible,
.sortable-step.is-drop-target {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  border-color: #2563eb;
}

.sortable-step-controls {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
}

.sort-step-button {
  min-width: 42px;
  min-height: 38px;
  border: 1px solid #94a3b8;
  border-radius: 7px;
  color: #1e293b;
  background: #ffffff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

/* Merksatz in der Rückmeldung zu Aufgabe 5: Er steht nicht im
   Erwartungshorizont, soll aber in jeder Rückmeldung auffallen. */
.physics-semantic-feedback .physics-semantic-note {
  margin: 10px 0 0;
  border-top: 1px solid currentColor;
  padding-top: 8px;
}

/* Weiter-Button am Ende jedes Reiterinhalts (außer im letzten Reiter). */
.physics-step-next {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.physics-step-next .physics-primary-button {
  margin-top: 0;
}

@media (max-width: 520px) {
  .cloze-sentence select {
    width: 100%;
    margin: 4px 0;
  }

  .cloze-gap {
    min-width: 5.5em;
  }

  .physics-step-next .physics-primary-button {
    width: 100%;
  }

  .sortable-step {
    align-items: stretch;
    flex-direction: column;
  }

  .sortable-step-controls {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .force-situation-grid,
  .law-term-grid {
    grid-template-columns: 1fr;
  }
}