/* Aufgabe 5 – Haftreibungskraft als Zentripetalkraft. Die Grundgestaltung
   kommt aus den vorhandenen Kreisbewegungs-Stylesheets. */

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

.force-match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.force-match-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; min-width: 0; padding: 11px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; }
.force-match-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; border-radius: 8px; background: #dbeafe; }
.force-match-card select { width: 100%; min-height: 42px; }
.force-match-card strong, .force-match-card small { display: block; }
.force-match-card small { color: #475569; margin-top: 2px; }

.curve-introduction { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: center; margin: 12px 0; }
.curve-introduction img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.curve-introduction p:first-child { margin-top: 0; }
.curve-introduction p:last-child { margin-bottom: 0; }

.table-scroll { max-width: 620px; margin: 14px auto; overflow-x: auto; }
.friction-value-table { width: 100%; border-collapse: collapse; background: #fff; }
.friction-value-table th, .friction-value-table td { padding: 10px 12px; border: 1px solid #cbd5e1; text-align: left; }
.friction-value-table th { color: #1e3a8a; background: #dbeafe; }
.friction-value-table td:last-child, .friction-value-table th:last-child { text-align: center; font-weight: 700; }

/* Aufgabe 4: Rechenschritte links untereinander, Beschreibungen rechts
   daneben. Kompakt gehalten, damit Speicher und alle Zeilen beim Ziehen auf
   einem Laptop-Bildschirm gleichzeitig sichtbar sind. */
.derivation-sort { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 7px 14px; margin: 10px 0 12px; }
.derivation-banks { display: contents; }
.derivation-column-head { display: none; margin: 0; color: #1e3a8a; font-size: .92rem; font-weight: 800; }
@media (min-width: 1000px) {
  .derivation-sort { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr) minmax(0, 1.2fr); align-items: center; }
  .derivation-sort .cloze-token { padding-inline: 7px; }
  .derivation-banks { display: grid; grid-column: 3; grid-row: 1 / span 6; align-self: start; gap: 8px; }
  .derivation-column-head { display: block; grid-row: 1; align-self: end; }
  .derivation-cell { grid-row: var(--derivation-row); }
  .derivation-cell-formula { grid-column: 1; }
  .derivation-cell-description { grid-column: 2; }
  .derivation-bank-block { margin-bottom: 0; }
}
.derivation-bank-block { display: grid; align-content: start; gap: 4px; margin-bottom: 4px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; }
.derivation-bank-block h4 { margin: 0; color: #1e3a8a; font-size: .92rem; line-height: 1.2; }
.derivation-bank { gap: 6px; min-height: 46px; align-content: flex-start; }
.derivation-sort .cloze-token { min-height: 40px; padding: 2px 9px; line-height: 1.25; }
.derivation-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.derivation-step-number { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #1e3a8a; font-weight: 800; }
.derivation-sort .formula-slot { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 46px; padding: 2px 10px; font-weight: 750; line-height: 1.25; }
.derivation-sort .formula-slot:not(.is-filled) { color: #64748b; font-weight: 600; }
.derivation-sort .formula-slot.is-picked { outline: 3px solid #2563eb; outline-offset: 2px; }
.derivation-cell-description .formula-slot { text-align: left; }
/* Hilfen nebeneinander, damit die Aufgabe samt Hilfen in die Laptop-Höhe passt. */
#panel-limit .physics-help-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

.speed-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.speed-entry { min-width: 0; padding: 14px; border: 1px solid #bfdbfe; border-radius: 10px; background: #f8fbff; }
.speed-entry h4 { margin: 0 0 10px; color: #1e3a8a; }
.speed-entry > label { display: block; margin-bottom: 4px; font-weight: 700; }
.speed-entry .physics-number-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 10px; }
.speed-entry .physics-number-controls input { min-width: 0; }
.speed-entry .physics-number-controls select { width: auto; min-width: 84px; }
.compact-summary p { margin: 8px 0; }
.compact-summary p:nth-of-type(2), .compact-summary p:nth-of-type(3), .compact-summary p:nth-of-type(4) { color: #1e3a8a; font-size: 1.08rem; font-weight: 800; line-height: 1.8; }

.friction-page .physics-multiple-choice { gap: 10px; margin-top: 10px; }
.friction-page .physics-quiz-question { padding: 10px; }
.friction-page .physics-quiz-question .quiz-options { gap: 6px; margin-top: 7px; }
.friction-page .physics-quiz-question .quiz-option { padding: 7px 9px; }
.friction-page .physics-step-next { margin-top: 16px; }
.friction-page .download-button[hidden] { display: none; }

@media (max-width: 700px) {
  .curve-introduction, .speed-task-grid { grid-template-columns: 1fr; }
  /* Einspaltig: Die Beschreibung steht eingerückt unter ihrem Rechenschritt. */
  .derivation-sort, #panel-limit .physics-help-stack { grid-template-columns: 1fr; }
  .derivation-cell-description { padding-left: 36px; margin-bottom: 6px; }
}

@media (max-width: 620px) {
  .force-match-grid { grid-template-columns: 1fr; }
  .friction-page .physics-step-tabs [role="tab"] { flex-basis: 135px; }
  .force-match-card img { object-position: center; }
  .speed-entry { padding: 11px; }
}

@media (max-width: 390px) {
  .speed-entry .physics-number-controls { gap: 5px; }
  .speed-entry .physics-number-controls select { min-width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .friction-page * { scroll-behavior: auto !important; }
}