/* Aufgabe 4 – Zentripetalkraft: nur Regeln, die es in den bestehenden
   Kreisbewegungs-Stilen (bewegung-koerpern.css, kraefte-bewegung.css,
   winkelgeschwindigkeit-kreisbewegung.css, physics-notation.css) noch nicht
   gibt. */

/* Zeilen der Proportionszuordnung (Aufgabe 3, Aufgabe 4b): eine Zeile pro
   Größe statt einer nebeneinander laufenden Optionsliste. */
#proportion-rows,
#radius-mapping-rows {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

/* Weniger Leerraum in Hilfen und Quiz auf dieser Seite (Klickflächen
   bleiben bei 44px, nur Innenabstand und Zeilenabstand sind kleiner). */
.circular-motion-page .physics-help-stack {
  gap: 6px;
  margin-top: 10px;
}

.circular-motion-page .physics-help-stack details {
  padding: 6px 10px;
}

.circular-motion-page .physics-multiple-choice {
  gap: 10px;
  margin-top: 10px;
}

.circular-motion-page .physics-quiz-question {
  padding: 10px;
}

.circular-motion-page .physics-quiz-question .quiz-options {
  gap: 5px;
  margin-top: 6px;
}

.circular-motion-page .physics-quiz-question .quiz-option {
  padding: 6px 9px;
}

/* Optionen einer Zeile bleiben nebeneinander (Vorgabe der Lehrkraft: kurze
   Auswahlreihen sparen Höhe). Die Basis liefert bereits .unit-choice
   (display:flex, flex-wrap:wrap) aus physics-notation.css; hier nur die
   Legende hervorgehoben. */
#proportion-rows .unit-choice > legend,
#radius-mapping-rows .unit-choice > legend {
  margin-bottom: 2px;
  color: #1e3a8a;
  font-weight: 800;
}

/* Formelbaukasten mit zwei Feldern im Zähler (Aufgabe 7): Der Zähler ist
   eine Flex-Zeile [Feld] · [Feld] statt eines einzelnen Feldes. */
.formula-fraction__numerator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.formula-fraction__denominator {
  display: flex;
  justify-content: center;
}

/* Größen der statischen SVGs: Die Skizzen zu Aufgabe 1 und 4c sind
   breiter angelegt als die bisherigen Kreisbewegungs-Grafiken. */
.circular-motion-page .centripetal-figure svg {
  width: min(100%, 700px);
}

/* Aufgabe 6 (Herleitung, Skizze 1 + Skizze 2): kompakter als die übrigen
   Skizzen, damit die Karte ohne unnötiges Scrollen bleibt. */
.centripetal-figure--derivation svg {
  width: min(100%, 560px);
}

/* Verbindliches Pfeilmuster für alle statischen Vektor-Skizzen (Aufgabe 4c,
   Aufgabe 6): schlankere Linie, damit die neue, größere Pfeilspitze nicht
   verdeckt wird (Befund: Pfeilspitzen waren bei stroke-width 5 unsichtbar). */
.centripetal-figure--vectors .speed-vector,
.centripetal-figure--vectors .force-vector {
  stroke-width: 3;
  stroke-linecap: butt;
}

/* Aufgabe 4c: zwei getrennte Kreisbahnen, jede in einem eigenen Feld. Die
   Bahn ist vollständig gestrichelt, der zurückgelegte Bogen Δx hervorgehoben. */
.reason-panel {
  fill: #f8fafc;
  stroke: #cbd5e1;
  stroke-width: 1.5;
}

.reason-radius {
  stroke: #64748b;
  stroke-width: 2;
}

.centripetal-figure--reason .orbit {
  stroke-width: 2.5;
}

.centripetal-figure--reason .angle-arc {
  stroke-width: 2;
}

.reason-arc-label {
  fill: #b45309;
}

.reason-angle-label {
  fill: #1d4ed8;
}

.reason-small-label {
  font-size: 13px;
  font-weight: 700;
}

/* Aufgabe 6, Skizze 1: Radiuspfeile, Sehne Δs, Winkelbogen und die
   nummerierten Badges an den vier markierten Stellen. */
.derivation-arc {
  fill: none;
  stroke: #d97706;
  stroke-width: 5;
}

.radius-vector {
  stroke: #475569;
  stroke-width: 3;
}

.chord-vector {
  stroke: #0f172a;
  stroke-width: 2.5;
}

.angle-arc-line {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2;
}

.derivation-badge circle {
  fill: #fff;
  stroke: #1e3a8a;
  stroke-width: 2;
}

.derivation-badge text {
  font-size: 13px;
  font-weight: 800;
  fill: #1e3a8a;
}

/* Aufgabe 11–13: Einheiten-Select steht neben der Zahleneingabe statt
   darunter, auch bei schmalen Bildschirmen (Vorgabe: dieselbe Zeile bei
   390px). Ersetzt die frühere Radio-Auswahl (unit-choice) in diesem Panel. */
#panel-apply .physics-number-controls {
  grid-template-columns: minmax(0, 1fr) auto;
}

#panel-apply .physics-number-controls select {
  width: auto;
  min-width: 84px;
}

/* Platz für die Animation kommt nicht nur aus kompakteren Reglern, sondern
   auch aus weniger Leerraum über der Karte: Seitenkopf, Reiterleiste und
   Kartenkopf sind gestrafft. Nur auf dieser Seite wirksam (eigenes
   Stylesheet, aufgabe1–3.html binden es nicht ein). */
.circular-motion-page .physics-revision-hero {
  margin: 10px auto 14px;
}

.circular-motion-page .physics-revision-hero h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
}

.circular-motion-page .physics-revision-hero > p:last-child {
  margin-top: 6px;
}

.circular-motion-page .physics-step-tabs {
  margin: 0 0 12px;
}

.circular-motion-page .physics-card-heading {
  padding: 12px 16px;
}

.circular-motion-page .physics-card-heading h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.circular-motion-page .physics-card-heading > p:last-child {
  margin-top: 4px;
}

.circular-motion-page .physics-revision-panel {
  gap: 12px;
}

.circular-motion-page .physics-task-card {
  padding: 14px 16px;
}

.circular-motion-page .physics-task-card > h3 {
  font-size: 1.05rem;
}

.circular-motion-page .physics-task-card > h3 + p,
.circular-motion-page .physics-task-card > p:first-of-type {
  margin-top: 6px;
}

/* Aufgabe 2a und 4a: Die Animation bleibt die Hauptsache. Der Platzgewinn
   kommt aus kompakteren Reglern/Buttons, nicht aus einer kleineren Grafik –
   deshalb hier ein größerer SVG-Rahmen als die sonst übliche Kompakt-Grenze
   (360px aus winkelgeschwindigkeit-kreisbewegung.css). */
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation="explore"] svg,
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation="radius"] svg {
  width: min(100%, 420px);
}

/* Aufgabe 2a und 4a: Anleitung, Regler, Buttons, Anzeigewerte und Status
   stehen in EINER Spalte neben der Animation (.simulation-panel) statt in
   zwei Gruppen mit einer eigenen vollbreiten Zeile darunter. Das nutzt die
   Höhe neben der (jetzt größeren) Animation aus, statt zusätzliche Höhe zu
   verbrauchen – Vorgabe: Anzeigewerte stehen neben statt unter den Reglern. */
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation="explore"] .simulation-panel,
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation="radius"] .simulation-panel {
  display: grid;
  align-content: start;
  gap: 8px;
}

.circular-motion-page .simulation-instruction {
  margin: 0;
}

/* Anzeigewerte zweispaltig statt in einer breiten Zeile pro Wert – spart
   deutlich Höhe, da die Werte ohnehin kurz sind. */
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation="explore"] .simulation-readout,
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation="radius"] .simulation-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.circular-motion-page .circle-simulation--compact[data-centripetal-simulation="explore"] .simulation-readout strong,
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation="radius"] .simulation-readout strong {
  flex: unset;
  padding: 5px 8px;
  font-size: 0.86rem;
}

/* Maßstab-Hinweis (Aufgabe 2a) hinter <details>, damit die feste Erklärung
   nicht dauerhaft Platz beansprucht. Weiterhin 44px Klickfläche. */
.circular-motion-page .simulation-scale-details {
  margin: 0;
}

.circular-motion-page .simulation-scale-details > summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: #1e3a8a;
  font-weight: 750;
  font-size: 0.88rem;
  cursor: pointer;
}

.circular-motion-page .simulation-scale-details .simulation-note {
  margin-top: 4px;
}

.circular-motion-page .circle-simulation--compact[data-centripetal-simulation] .simulation-note,
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation] .simulation-status {
  margin: 0;
  font-size: 0.88rem;
}

/* Aufgabe 2a und die Mini-Simulation (Aufgabe 3): "Welche Größe veränderst
   du?" steht direkt bei den Reglern – eine Zeile pro Größe statt einer
   getrennten Auswahlliste und getrennten Reglerliste. Kompakt, aber mit
   44px Klickfläche für Radio-Label und Schieberegler. */
.circular-motion-page .cf-variable-fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.circular-motion-page .cf-variable-fieldset > legend {
  margin-bottom: 2px;
  padding: 0;
  color: #1e3a8a;
  font-weight: 800;
}

.circular-motion-page .cf-variable-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.circular-motion-page .cf-variable-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  flex: 0 0 auto;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 750;
}

.circular-motion-page .cf-variable-slider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  flex: 1 1 130px;
  min-width: 0;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
}

.circular-motion-page .cf-variable-slider input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  accent-color: #2563eb;
}

/* Kompakte Buttons in den Zentripetalkraft-Simulationen: weiterhin 44px
   Klickfläche, aber weniger Innenabstand als der Seitenstandard. */
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation] .simulation-actions {
  gap: 8px;
}

.circular-motion-page .circle-simulation--compact[data-centripetal-simulation] .simulation-actions .physics-primary-button,
.circular-motion-page .circle-simulation--compact[data-centripetal-simulation] .simulation-actions .secondary-action {
  min-height: 44px;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 0.92rem;
}

/* Ab ca. 700px: Anleitung/Regler/Buttons/Anzeigewerte/Status stehen als EINE
   Spalte neben statt unter der Animation. Die Spalte nutzt die Höhe der
   (jetzt größeren) Animation aus, ohne eine eigene vollbreite Zeile zu
   brauchen. Darunter bleibt die vorhandene Ein-Spalten-Regel aus
   winkelgeschwindigkeit-kreisbewegung.css (Panel unter der Animation). */
@media (min-width: 701px) {
  .circular-motion-page .circle-simulation--compact[data-centripetal-simulation="explore"],
  .circular-motion-page .circle-simulation--compact[data-centripetal-simulation="radius"] {
    grid-template-columns: minmax(240px, 420px) minmax(220px, 1fr);
    grid-template-areas: "visual panel";
    column-gap: 24px;
    align-items: start;
  }

  .circular-motion-page .circle-simulation--compact[data-centripetal-simulation="explore"] > svg,
  .circular-motion-page .circle-simulation--compact[data-centripetal-simulation="radius"] > svg {
    grid-area: visual;
  }

  .circular-motion-page .circle-simulation--compact[data-centripetal-simulation="explore"] > .simulation-panel,
  .circular-motion-page .circle-simulation--compact[data-centripetal-simulation="radius"] > .simulation-panel {
    grid-area: panel;
  }
}

/* Aufgabe 3: kleine Simulation zum Ausprobieren neben der Zuordnungsaufgabe
   (schmal: oberhalb, per CSS-Reihenfolge, ohne Markup zu verdoppeln). */
.task-with-mini-simulation {
  display: grid;
  gap: 10px;
}

.task-with-mini-simulation__aside {
  order: -1;
  margin-top: 0;
}

/* Die Mini-Simulation ist zum Ausprobieren gedacht, nicht die Hauptaufgabe:
   deutlich kleinere Grafik und ein kompakter Aufbau ohne den erklärenden
   Maßstabshinweis aus Aufgabe 2a, damit Aufgabe 3 zusammen mit der
   Simulation ohne Scrollen sichtbar bleibt. */
.circular-motion-page .circle-simulation--mini {
  gap: 5px;
}

.circular-motion-page .circle-simulation--mini svg {
  width: min(100%, 150px);
}

.circular-motion-page .circle-simulation--mini .cf-variable-fieldset {
  gap: 4px;
}

.circular-motion-page .circle-simulation--mini .cf-variable-fieldset > legend {
  font-size: 0.78rem;
}

.circular-motion-page .circle-simulation--mini .cf-variable-row {
  gap: 4px 8px;
}

.circular-motion-page .circle-simulation--mini .cf-variable-radio {
  flex-basis: auto;
  gap: 4px;
  font-size: 0.68rem;
}

.circular-motion-page .circle-simulation--mini .cf-variable-slider {
  flex: 1 1 70px;
  gap: 4px;
  font-size: 0.68rem;
}

.circular-motion-page .circle-simulation--mini .simulation-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.circular-motion-page .circle-simulation--mini .simulation-readout strong {
  flex: unset;
  padding: 4px 6px;
  font-size: 0.78rem;
}

.circular-motion-page .circle-simulation--mini .simulation-note,
.circular-motion-page .circle-simulation--mini .simulation-status {
  font-size: 0.82rem;
}

@media (min-width: 701px) {
  .task-with-mini-simulation {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
  }

  .task-with-mini-simulation__main {
    grid-column: 1;
    grid-row: 1;
  }

  .task-with-mini-simulation__aside {
    grid-column: 2;
    grid-row: 1;
    order: 0;
  }
}

/* Aufgabe 2b: Freitext-Lückentext ohne Wortvorgaben. */
.je-desto-cloze {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.je-desto-sentence {
  padding-top: 14px;
  border-top: 1px solid #dbe4f0;
}

.je-desto-sentence:first-child {
  padding-top: 0;
  border-top: 0;
}

.je-desto-sentence .cloze-sentence {
  margin: 0;
}

/* Aufgabe 9: Merksatz mit einer Lücke ohne Wortvorgabe. */
.definition-gap {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 12px;
}

.definition-gap .cloze-sentence {
  margin: 0;
}

.cloze-text-input {
  min-height: 44px;
  width: 8em;
  max-width: 100%;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 9px;
  color: #1e293b;
  background: #ffffff;
  font: inherit;
  text-align: center;
}

/* 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: 620px) {
  #proportion-rows .unit-choice__option,
  #radius-mapping-rows .unit-choice__option {
    width: 100%;
  }

  .formula-fraction__numerator {
    gap: 4px;
  }

  .cloze-text-input {
    width: 6.5em;
  }

  .circular-motion-page .cf-variable-radio,
  .circular-motion-page .cf-variable-slider {
    flex: 1 1 100%;
  }

  .physics-step-next {
    justify-content: stretch;
  }

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