/* Player layout is bounded by available height, not by a growing SVG aspect ratio.
   animation-layout.js adjusts --figure-height after measuring text and controls. */
.spectrum-demo,.sensor-demo { --figure-height:210px; max-width:1120px; margin-inline:auto; scroll-margin-top:0; overflow:visible; }
.spectrum-demo { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.spectrum-demo > .application-selector,.spectrum-demo > .application-explanation,.spectrum-demo > .animation-controls { grid-column:1/-1; }
.application-selector button { padding:11px 16px; gap:2px 8px; min-height:52px; }
.application-selector strong { font-size:15px; min-height:0; }
.application-selector small { font-size:10px; }
.spectrum-demo .application-stage { display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:16px; border-bottom:0; border-right:1px solid #43606e; }
.application-stage .application-story { order:0; width:100%; max-width:none; }
.application-stage .application-scene { order:1; width:100%; max-width:none; margin:0; }
.application-story > .small-label { font-size:9px; }
.question-stack h3 { font-size:22px; line-height:1.25; margin:5px 0 10px; }
.application-steps { margin:0; }
.application-steps span { font-size:10px; min-height:0; padding:6px; }
#application-plot { height:var(--figure-height); max-height:none; width:100%; }
.application-scene > p { margin:0; font-size:9px; }
.spectrum-demo .spectrum-body { display:flex; flex-direction:column; min-width:0; min-height:0; contain:size; padding:14px 16px; }
.spectrum-demo .spectrum-chart { display:flex; flex-direction:column; flex:1; height:0; min-height:0; padding:0; align-self:stretch; }
.chart-heading { margin:0 0 8px; min-height:0; font-size:10px; }
#spectrum-plot { width:100%; height:100%; min-height:0; flex:1; aspect-ratio:auto; overflow:visible; }
.plot-labels,.peak-label { font-size:17px; }
.plot-key { margin:7px 0 0; font-size:9px; gap:6px; }
.plot-key > span:last-child { display:none; }
.spectrum-demo .spectrum-reading { border:0; border-top:1px solid #43606e; margin-top:10px; padding:8px 0 0; background:none; }
.spectrum-demo .spectrum-reading > .small-label { display:none; }
.spectrum-demo .pressure-trend { display:grid; grid-template-columns:90px minmax(0,1fr); align-items:center; gap:4px 10px; border:0; padding:0; margin:0; }
.pressure-trend > div { display:block; font-size:10px; }
.pressure-trend > div span { display:block; }
.spectrum-demo .pressure-trend svg { height:34px; width:100%; margin:0; }
.pressure-trend p { grid-column:1/-1; font-size:11px; line-height:1.5; min-height:33px; }
.application-explanation { padding:13px 18px; background:#193d4d; border-top:1px solid #43606e; }
.application-explanation h4 { font-size:16px; line-height:1.35; margin-bottom:5px; }
.application-explanation p { font-size:13px; line-height:1.55; color:#c2d5db; }
.sensor-top { padding:10px 16px; }
.sensor-top > p { font-size:13px; }
.sensor-phase-selector button { min-height:44px; padding:9px; font-size:12px; gap:8px; flex-direction:row; }
.sensor-illustration { padding:9px 12px 0; }
#sensor-plot { height:var(--figure-height); max-width:1000px; margin-inline:auto; }
.sensor-svg-label { font-size:17px; }
.sensor-svg-secondary,.sensor-svg-mass { font-size:15px; }
.sensor-legend { padding:5px 16px 10px; gap:8px 18px; font-size:10px; }
.sensor-explanation { display:block; padding:12px 16px; }
.sensor-step-label { display:none; }
.sensor-explanation h3 { font-size:18px; line-height:1.35; margin-bottom:5px; }
.sensor-explanation p { font-size:13px; line-height:1.55; max-width:none; }
.animation-controls { display:grid; grid-template-columns:106px 40px minmax(0,1fr) 40px auto; gap:10px; padding:10px 16px; }
.animation-controls > button { height:40px; }
.animation-controls > .progress-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.animation-controls > input { grid-column:3; grid-row:1; }
.animation-controls > output { grid-column:4; grid-row:1; }
.animation-controls > .repeat-control { grid-column:5; grid-row:1; margin:0; }
#spectrum-play { min-width:0; }
.sensor-speed { padding:0 16px 10px; gap:10px; }
.sensor-speed button { padding:5px 10px; }
#spektrum-section,#technologie-section { padding-top:36px; }
#spektrum-section .section-heading,#technologie-section .section-heading { margin-block:22px 24px; }
@media(max-width:650px) {
  #spektrum-section > .wrap,#technologie-section > .wrap { padding-inline:16px; }
  .spectrum-demo { display:block; }
  .application-selector button { display:block; text-align:center; padding:9px 3px; min-height:46px; }
  .application-selector strong { font-size:12px; }
  .application-selector button > span,.application-selector small { display:none; }
  .spectrum-demo .application-stage { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); padding:10px; gap:10px; align-items:center; border:0; }
  .application-stage .application-scene { order:0; }
  .application-stage .application-story { order:1; }
  #application-plot { height:calc(var(--figure-height) * .55); min-height:60px; }
  .application-scene > p { display:none; }
  .application-scene .scene-context,.application-scene .app-label { display:none; }
  .application-story > .small-label { font-size:8px; line-height:1.4; letter-spacing:.5px; display:block; }
  .question-stack h3 { font-size:17px; line-height:1.25; margin:6px 0; letter-spacing:-.2px; }
  .application-steps span { font-size:10px; min-height:0; padding:4px 0; }
  .application-steps span:not([aria-current="step"]) { display:none; }
  .application-steps span[aria-current="step"] { background:none; }
  .spectrum-demo .spectrum-body { padding:8px 12px; border-top:1px solid #43606e; contain:none; }
  .spectrum-demo .spectrum-chart { height:var(--figure-height); flex:none; }
  .chart-heading { margin:0 0 3px; min-height:28px; gap:9px; font-size:9px; line-height:1.4; }
  .plot-labels,.peak-label { font-size:24px; }
  .plot-key { display:none; }
  .spectrum-demo .spectrum-reading { margin-top:4px; padding-top:4px; }
  .spectrum-demo .pressure-trend { grid-template-columns:83px minmax(0,1fr); gap:0 9px; }
  .pressure-trend > div { font-size:9px; }
  .pressure-trend > div span { display:inline; margin-right:4px; }
  .spectrum-demo .pressure-trend svg { height:25px; }
  .pressure-trend p { display:none; }
  .application-explanation { padding:10px 12px; }
  .application-explanation h4 { font-size:14px; }
  .application-explanation p { font-size:12px; line-height:1.5; }
  .sensor-top { padding:9px 12px; align-items:center; gap:10px; }
  .sensor-top .small-label { font-size:8px; max-width:125px; }
  .sensor-phase-selector button { font-size:11px; padding:7px 3px; gap:4px; flex-direction:column; }
  .sensor-phase-selector button > span { font-size:8px; }
  .sensor-svg-label { font-size:15px; }
  .sensor-svg-secondary,.sensor-svg-mass { font-size:14px; }
  .sensor-legend { padding:4px 12px 8px; gap:7px 12px; font-size:9px; justify-content:space-between; }
  .sensor-legend > span:first-child { display:none; }
  .sensor-explanation { padding:10px 12px; }
  .sensor-explanation h3 { font-size:16px; }
  .sensor-explanation p { font-size:12px; line-height:1.5; }
  .animation-controls { grid-template-columns:100px 36px minmax(0,1fr) 36px; gap:5px 9px; padding:8px 12px; }
  .animation-controls > button { height:36px; }
  .animation-controls > input { grid-column:1/4; grid-row:2; height:24px; }
  .animation-controls > output { grid-column:4; grid-row:2; }
  .animation-controls > .repeat-control { grid-column:3/5; grid-row:1; font-size:9px; }
  .sensor-speed { padding:0 12px 8px; gap:5px; }
  .sensor-speed > span { font-size:9px; }
  .sensor-speed button { font-size:10px; padding:4px 9px; }
}
@media(max-height:500px) and (min-width:651px) {
  .application-selector button { min-height:40px; padding:7px 12px; }
  .application-selector small { display:none; }
  .spectrum-demo .application-stage,.spectrum-demo .spectrum-body { padding:10px 14px; }
  .question-stack h3 { font-size:18px; margin-block:3px 6px; }
  .application-steps span { font-size:9px; padding:4px; }
  .application-explanation { padding:8px 14px; }
  .application-explanation h4 { font-size:14px; }
  .application-explanation p { font-size:12px; }
  .sensor-top { padding-block:6px; }
  .sensor-explanation { padding-block:8px; }
  .sensor-explanation h3 { font-size:16px; }
  .sensor-explanation p { font-size:12px; }
  .sensor-legend { padding-block:2px 5px; }
  .animation-controls { padding-block:6px; }
  .sensor-speed { padding-bottom:6px; }
  .sensor-demo { display:grid; grid-template-columns:1.1fr 1fr; }
  .sensor-top,.sensor-phase-selector,.sensor-controls,.sensor-speed { grid-column:1/-1; }
  .sensor-illustration { grid-column:1; grid-row:3; padding:8px 10px 0; }
  .sensor-legend { grid-column:1; grid-row:4; font-size:9px; padding-inline:10px; gap:7px; }
  .sensor-legend > span:first-child { display:none; }
  .sensor-explanation { grid-column:2; grid-row:3/5; display:grid; align-content:center; border-left:1px solid #cbd8d5; border-bottom:0; }
  .sensor-controls { border-top:1px solid #cbd8d5; }
}