/* Aufgabe 7 – Übungen zur Zentripetalkraft. Grundgestaltung, Karten, Buttons,
   Farben und Kraftraster kommen aus den vorhandenen Kreisbewegungs-
   Stylesheets (insbesondere kettenkarussell.css); hier nur lokale
   Ergänzungen für neue Abbildungen, Layouts und die Rechenschritt-Zuordnung. */

/* ---- Kompaktregeln 1:1 wie .carousel-page in kettenkarussell.css (Zeile 5–11) ---- */

.exercise-page .physics-revision-hero { margin: 10px auto 14px; }
.exercise-page .physics-revision-hero h1 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); line-height: 1.15; }
.exercise-page .physics-step-tabs { margin-bottom: 12px; }
.exercise-page .physics-card-heading { padding: 12px 16px; }
.exercise-page .physics-card-heading > p:last-child { margin-top: 4px; }
.exercise-page .physics-help-stack { gap: 6px; margin-top: 12px; }
.exercise-page .physics-help-stack details { padding: 6px 10px; }

/* ---- Kopf mit Bild (Reiter 1) ---- */

.hammer-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.hammer-heading > div { flex: 1 1 260px; min-width: 0; }
.hammer-heading img { display: block; width: 100%; max-width: 240px; border-radius: 10px; }

@media (max-width: 699px) {
  .hammer-heading { flex-direction: column; }
  .hammer-heading img { max-width: 100%; order: 2; }
}

/* ---- Rechenschritt-Zuordnung: Werte wie .derivation-bank / .derivation-cell /
   .derivation-step-number / .derivation-sort .formula-slot in
   haftreibung-zentripetalkraft.css (Zeile 46–54), aber nur eine Gruppe. ---- */

.step-order { display: grid; gap: 10px; margin: 10px 0 12px; }
.step-order-bank { gap: 6px; min-height: 46px; align-content: flex-start; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; }
.step-order-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.step-order-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.step-order-number { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #1e3a8a; font-weight: 800; }
.step-order .formula-slot { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 46px; padding: 6px 12px; text-align: left; font-weight: 750; line-height: 1.3; }
.step-order .formula-slot:not(.is-filled) { color: #64748b; font-weight: 600; }
.step-order .formula-slot.is-picked { outline: 3px solid #2563eb; outline-offset: 2px; }

.exercise-page .drag-help { margin: 4px 0 10px; color: #64748b; font-size: 0.88rem; }

/* ---- Figuren-Grid (Aufgabe 2 und 3b): Szenenklassen wie kettenkarussell.css
   Zeile 44–67 (.parallelogram-figure), hier für .exercise-figure. ---- */

.exercise-figure { display: grid; gap: 16px; margin: 14px 0; }
.exercise-figure > div { min-width: 0; }
.exercise-figure svg { display: block; width: 100%; height: auto; }
.exercise-figure > div > p { margin: 8px 0 0; color: #334155; font-weight: 700; text-align: center; }

.exercise-figure .scene-line { fill: none; stroke: #475569; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.exercise-figure .scene-fill { fill: #dbeafe; stroke: #475569; stroke-width: 3; stroke-linejoin: round; }
.exercise-figure .scene-accent { fill: #c4b5fd; stroke: #475569; stroke-width: 3; }
.exercise-figure .force-origin-marker { fill: #111827; stroke: #ffffff; stroke-width: 2; }

.force-n { stroke: #2563eb; }
text.force-n { fill: #2563eb; }

.side-name { fill: #64748b; font-size: 13px; font-weight: 400; }

/* Musterlösung 1c: einzelne Skizze ohne Dreieck/Definitionen daneben. */
.exercise-figure--single { grid-template-columns: 1fr !important; max-width: 480px; margin: 14px auto; }
.exercise-figure--single figcaption { margin-top: 8px; color: #334155; font-weight: 700; text-align: center; }

.trig-definitions { margin: 0; border-left: 5px solid #2563eb; border-radius: 10px; padding: 15px 17px; color: #1e3a8a; background: #eff6ff; font-weight: 750; }
.trig-definitions h4 { margin: 0 0 8px; }
.trig-definitions .formula-display { margin: 6px 0; font-size: 1.05rem; }

@media (min-width: 1000px) {
  .exercise-figure { grid-template-columns: 1.2fr 1fr 0.8fr; align-items: start; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .exercise-figure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exercise-figure .trig-definitions { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .exercise-figure { grid-template-columns: 1fr; }
  .exercise-figure svg { max-width: 380px; margin: 0 auto; }
}

/* ---- Ergebnisübersicht (Reiter 4) ---- */

#summary-pending { font-weight: 700; }

.exercise-summary p { margin: 8px 0; }
.exercise-summary p:nth-of-type(2),
.exercise-summary p:nth-of-type(3) {
  color: #1e3a8a;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.8;
  text-align: center;
}

.table-scroll { max-width: 620px; margin: 14px auto; overflow-x: auto; }

@media (max-width: 390px) {
  .hammer-heading img { max-width: 100%; }
}