/* Lernmodul Kreisbewegung: Basislayout und Aufgabenmuster werden wiederverwendet. */
.circular-motion-page .physics-revision-hero h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); overflow-wrap: anywhere; }
.circular-motion-page .physics-revision-shell { width: min(1120px, calc(100% - 20px)); }
.circular-motion-page .physics-revision-hero,
.circular-motion-page .physics-step-tabs,
.circular-motion-page .physics-revision-panels { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.circular-motion-page .physics-step-tabs { flex-wrap: wrap; overflow-x: visible; }
.circular-motion-page .physics-step-tabs [role="tab"] { flex: 1 1 150px; }
.circle-simulation { display: grid; gap: 16px; margin-top: 16px; }
.circle-simulation svg, .centripetal-figure svg, .frequency-animation svg { display: block; width: min(100%, 600px); height: auto; margin-inline: auto; border: 1px solid #dbe4f0; border-radius: 12px; background: linear-gradient(180deg, #f8fbff, #fff); }
.orbit { fill: none; stroke: #64748b; stroke-width: 3; stroke-dasharray: 8 6; }
.radius-line { stroke: #64748b; stroke-width: 3; }
.angle-arc { fill: rgba(37, 99, 235, .18); stroke: #2563eb; stroke-width: 3; }
.center-point { fill: #0f172a; }
.moving-body { fill: #7c3aed; stroke: #4c1d95; stroke-width: 3; }
.speed-vector { color: #2563eb; stroke: #2563eb; stroke-width: 5; stroke-linecap: round; }
.force-vector { color: #dc2626; stroke: #dc2626; stroke-width: 5; stroke-linecap: round; }
.time-line { color: #475569; stroke: #475569; stroke-width: 3; }
.svg-label { fill: #334155; font-size: 16px; font-weight: 800; }
.vector-force-label { fill: #b91c1c; }
.vector-speed-label { fill: #1d4ed8; }
.vector-label-badge { pointer-events: none; }
.vector-label-badge rect { fill: rgba(255, 255, 255, .96); stroke: #93c5fd; stroke-width: 1.5; }
.simulation-readout { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.simulation-readout strong { flex: 1 1 150px; border-left: 4px solid #2563eb; padding: 9px 11px; color: #1e3a8a; background: #eff6ff; text-align: center; }
.circle-simulation--compact { gap: 10px; margin-top: 10px; }
.circle-simulation--compact svg { width: min(100%, 360px); }
.circle-simulation--compact .simulation-readout strong { padding: 6px 10px; }
.circle-simulation--compact .simulation-controls { gap: 12px; }

/* Aufgabe 3 (Bahngeschwindigkeit): wie die Hammerwurf-Simulation in
   zentripetalkraft.css – Regler, Buttons, Anzeigewerte und Status stehen in
   EINER Spalte neben der Animation, damit alles ohne Scrollen sichtbar ist.
   Die Grafik bleibt groß; gespart wird an Reglern und Buttons. */
.circle-simulation--compact[data-circle-simulation="speed"] svg { width: min(100%, 420px); }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-panel { display: grid; align-content: start; gap: 8px; }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-controls { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-controls label { gap: 2px; font-size: .9rem; }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-controls input[type="range"] { min-height: 44px; }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-actions { gap: 8px; }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-actions .physics-primary-button,
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-actions .secondary-action { min-height: 44px; margin-top: 0; padding: 8px 14px; font-size: .92rem; }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-readout strong { padding: 5px 8px; font-size: .86rem; }
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-status,
.circle-simulation--compact[data-circle-simulation="speed"] .simulation-note { font-size: .88rem; text-align: left; }
.simulation-scale-details { margin: 0; }
.simulation-scale-details > summary { display: flex; align-items: center; min-height: 36px; color: #1e3a8a; font-size: .88rem; font-weight: 750; cursor: pointer; }
.simulation-scale-details .simulation-note { margin-top: 4px; }
@media (min-width: 701px) {
  .circle-simulation--compact[data-circle-simulation="speed"] { grid-template-columns: minmax(240px, 420px) minmax(220px, 1fr); column-gap: 24px; align-items: start; }
}
.simulation-status, .simulation-note { margin: 0; color: #475569; text-align: center; }
.simulation-status { font-weight: 750; }
.simulation-note { font-size: .9rem; }
.simulation-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.simulation-controls label { display: grid; gap: 7px; color: #334155; font-weight: 800; }
.simulation-controls input, .simulation-controls select { width: 100%; accent-color: #2563eb; }
.simulation-controls select { min-height: 44px; border: 1px solid #93c5fd; border-radius: 9px; padding: 8px 10px; color: #1e3a8a; background: #fff; font: inherit; font-weight: 750; }
.simulation-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.secondary-action { min-height: 44px; border: 1px solid #93c5fd; border-radius: 9px; padding: 9px 16px; color: #1e3a8a; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.circular-motion-page .cloze-token { min-width: 44px; min-height: 44px; }
.circular-motion-page .cloze-sentence select { min-height: 44px; }
.formula-builder { display: grid; gap: 14px; margin-top: 16px; }
.formula-token-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.formula-line { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; font-size: clamp(1.25rem, 4vw, 1.8rem); font-weight: 800; }
.formula-slot { min-width: 76px; min-height: 48px; border: 2px dashed #93c5fd; border-radius: 9px; padding: 6px 10px; color: #1e3a8a; background: #eff6ff; font: inherit; font-weight: 850; cursor: pointer; }
.formula-fraction { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.formula-fraction__bar { height: 3px; border-radius: 2px; background: #1e3a8a; }
.formula-slot.is-selected, .formula-slot:focus-visible { outline: 3px solid rgba(37, 99, 235, .22); border-color: #2563eb; }
/* Belegte Felder lassen sich wieder herausziehen (Tablet: kein Scrollen beim Ziehen). */
.formula-slot { touch-action: none; user-select: none; }
.formula-slot.is-filled { border-style: solid; background: #ffffff; cursor: grab; }
.formula-slot.is-drop-target { border-color: #1e3a8a; background: #dbeafe; }
.formula-slot.is-dragging { opacity: .45; }
.blue-remember { margin: 0; border-left: 5px solid #2563eb; border-radius: 10px; padding: 15px 17px; color: #1e3a8a; background: #eff6ff; font-weight: 750; }
.frequency-layout { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1fr); align-items: center; gap: 24px; margin-top: 18px; }
.frequency-animation, .frequency-controls { display: grid; gap: 14px; }
.frequency-animation svg { width: min(100%, 280px); }
.frequency-layout label { display: grid; gap: 8px; color: #334155; font-weight: 800; }
.frequency-layout input { width: 100%; accent-color: #7c3aed; }
.frequency-value, .frequency-elapsed { margin: 0; border-left: 4px solid #7c3aed; padding: 10px 12px; background: #f5f3ff; }
.frequency-elapsed { border-left-color: #2563eb; background: #eff6ff; }
.centripetal-figure { margin: 16px 0 0; }
.centripetal-figure figcaption { margin-top: 8px; color: #475569; font-weight: 700; text-align: center; }
.circular-motion-page .physics-help-stack summary { display: flex; align-items: center; min-height: 44px; }
.physics-help-stack ul { margin: 10px 0 0; padding-left: 22px; color: #475569; }
.notebook-reminder { margin: 0 0 16px; font-weight: 850; }
@media (max-width: 620px) { .simulation-controls, .frequency-layout { grid-template-columns: 1fr; } .simulation-actions > * { flex: 1 1 100%; } }
@media (max-width: 430px) { .formula-line { gap: 4px; font-size: 1.1rem; } .formula-slot { min-width: 58px; padding-inline: 6px; } .formula-fraction { gap: 4px; } }