/* A stronger expression of the existing FreshBoxx product studio. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.yusef-edition .studio-intro { top: 26%; width: min(580px, 44%); }
.yusef-edition .studio-intro h1.studio-title { font-size: clamp(54px, 5.65vw, 88px); line-height: 1.02; font-variation-settings: 'wdth' 95, 'wght' 750; letter-spacing: -.035em; margin: 0; }
.hero-word { display: block; white-space: nowrap; }
.studio-title em { color: #aee3ee; font-style: normal; }
.yusef-edition .studio-description { margin-top: 28px; font-size: 19px; line-height: 1.5; max-width: 400px; }
.studio-actions .knopf { min-height: 52px; padding: 15px 22px; background: #aee3ee; }
.city-shade { background: linear-gradient(90deg, rgba(10,23,25,.88), rgba(10,23,25,.30) 48%, transparent 76%); }
.thermal-readings { background: #181c1de8; border: 0; border-radius: 0; padding: 18px 20px 12px; }
.thermal-readings strong { font-size: 48px; line-height: 1.1; font-variation-settings: 'wght' 550; }
.thermal-readings > div > span { font-size: 12px; line-height: 1.8; }
.thermal-readings .thermal-control { margin-top: 4px; }
.hell .section-heading h2 { font-size: clamp(42px, 4.45vw, 64px); line-height: 1.04; letter-spacing: -.03em; font-variation-settings: 'wght' 700; }
.section-heading { gap: 48px; margin-bottom: 48px; }
.section-heading > p { max-width: 36ch; padding-bottom: 4px; }
.cargo-toolbar { padding: 18px 0; border-top: 1px solid #bacbc4; border-bottom: 1px solid #bacbc4; }
.cargo-toolbar .segmented { padding: 0; gap: 8px; background: transparent; }
.cargo-toolbar .segmented button { padding: 14px 20px; border: 1px solid #bacbc4; border-radius: 3px; font-size: 16px; }
.cargo-toolbar .segmented button[aria-pressed="true"] { background: #192426; border-color: #192426; color: #aee3ee; }
.cargo-toolbar .segmented button:hover:not([aria-pressed="true"]) { background: #dbe4e0; }
.cargo-summary { padding-top: 30px; }
.applications { background: #181c1d; color: #f3f6f4; }
.hell .applications .section-heading > p, .hell .applications .source-note { color: #b2bdc0; }
.application-tabs { display: flex; gap: 32px; border-bottom: 1px solid #536368; margin: 0 0 28px; }
.application-tabs[hidden] { display: none; }
.application-tabs button { display: flex; gap: 38px; align-items: center; min-height: 58px; padding: 14px 0; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #b2bdc0; font: 550 18px Archivo, sans-serif; cursor: pointer; }
.application-tabs button[aria-selected="true"] { color: #aee3ee; border-bottom-color: #aee3ee; }
.application-tabs button:hover { color: #fff; }
.application-tabs img { width: 22px; height: 22px; filter: invert(1); opacity: 0; transform: translateX(-6px); transition: transform 180ms ease-out, opacity 180ms ease-out; }
.application-tabs button[aria-selected="true"] img { opacity: 1; transform: none; }
.application-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.application-grid figure { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.application-grid figure[hidden] { display: none; }
.application-grid > figure > img { aspect-ratio: 3 / 2; width: 100%; height: auto; }
.application-grid figcaption { padding: 0; }
.hell .application-grid h3 { font-size: clamp(28px, 2.75vw, 40px); line-height: 1.08; letter-spacing: -.025em; margin-bottom: 22px; }
.hell .application-grid p { color: #b2bdc0; font-size: 17px; line-height: 1.6; }
.application-grid .text-action { color: #aee3ee; margin-top: 28px; font-size: 14px; }
.application-grid .text-action img { filter: invert(1); }
.application-tabs button:focus-visible, .applications a:focus-visible { outline: 2px solid #aee3ee; outline-offset: 5px; }
.application-grid.is-interactive { display: grid; gap: 0; }
.application-grid.is-interactive > figure { grid-area: 1 / 1; min-height: 390px; }
/* Reserve both captions' natural height so changing the scene cannot shift the page. */
.application-grid.is-interactive > figure[hidden] { display: grid; visibility: hidden; pointer-events: none; }
.vehicle-options button { transition: color 180ms ease-out, background-color 180ms ease-out; }
.vehicle-options button[aria-pressed="true"] { background: #dbe7ea; color: #153f47; }
.vehicle-detail h3 { letter-spacing: -.02em; }
main.hell { padding-bottom: 0; }
.contact-section { background: #f6f7f6; color: #192426; border-top: 1px solid #c5d0d1; }
.contact-section .kontakt { padding: 88px 0 72px; }
.kontaktpaar { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 88px; margin-top: 0; }
.hell .kontakt h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -.03em; max-width: 13ch; font-variation-settings: 'wght' 650; }
.kontakt h2 em { font-style: normal; color: #195965; }
.hell .contact-intro > p { color: #465b60; font-size: 17px; line-height: 1.65; max-width: 35ch; margin-top: 24px; }
.kontakt .anschrift { color: #536368; border: 0; padding: 0; margin-top: 38px; font-size: 16px; line-height: 1.65; }
.kontakt .anschrift b { color: #192426; font-size: 17px; }
/* Mailadresse und Rufnummer sind auf dem Telefon die wichtigste Handlung der
   Seite und waren 24 px hoch. Padding vergroessert die Tastflaeche auf 44 px,
   die negative Marge laesst das Bild unveraendert. */
.kontakt .text-action { color: #195965; font-size: 16px; padding: 10px 0; margin: -10px 0; }
.contact-actions { margin-top: 20px; gap: 12px; }
.inquiry { margin: 0; min-width: 0; }
.inquiry[hidden], .inquiry [hidden] { display: none; }
.inquiry-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.inquiry-fields label { display: block; color: #304c53; font-size: 13px; line-height: 1.5; }
.inquiry-vehicle, .inquiry-size, .inquiry-goods { grid-column: 1 / -1; }
.inquiry input, .inquiry select { display: block; width: 100%; min-width: 0; height: 50px; padding: 12px; margin-top: 7px; border: 1px solid #a3b3b4; background: #fff; color: #192426; font: 450 16px Archivo, sans-serif; border-radius: 3px; caret-color: #195965; color-scheme: light; }
.inquiry input::placeholder { color: #5e7175; opacity: 1; }
.inquiry select { appearance: none; -webkit-appearance: none; padding-right: 30px; background: #fff url('marke/chevron-down.svg') right 10px center / 20px no-repeat; cursor: pointer; }
.inquiry select option { background: #fff; color: #192426; }
.inquiry input:focus-visible, .inquiry select:focus-visible { outline: 2px solid #195965; outline-offset: 3px; }
.inquiry [aria-invalid="true"] { border-color: #a43725; }
.field-error { display: block; color: #a43725; font-size: 12px; line-height: 1.5; margin-top: 5px; }
.field-error:empty { display: none; }
.inquiry-details { border-top: 1px solid #c5d0d1; border-bottom: 1px solid #c5d0d1; margin-top: 28px; }
.inquiry-details summary { padding: 18px 0; color: #192426; cursor: pointer; font-size: 15px; }
.inquiry-details summary span { color: #536368; font-size: 12px; margin-left: 8px; }
.inquiry-details .inquiry-fields { padding: 4px 0 24px; }
.kontakt .inquiry-submit { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 24px; min-height: 52px; padding: 15px 22px; background: #002452; color: #fff; font: 650 15px Archivo, sans-serif; border: 0; border-radius: 3px; cursor: pointer; text-transform: none; }
.inquiry-submit img { filter: invert(1); }
.kontakt .inquiry-submit:hover { background: #0a356f; }
.inquiry-submit:disabled { cursor: default; opacity: .7; }
.hell .inquiry-note { color: #536368; font-size: 12px; line-height: 1.65; margin-top: 18px; max-width: 48ch; }
.inquiry-note a { color: #195965; }
.hell .inquiry-status { padding: 16px 0 0; font-size: 15px; line-height: 1.5; color: #195965; }
.inquiry-status[data-state="error"] { color: #a43725; }
.inquiry-fallback { margin-top: 12px; }
.inquiry-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.kontakt a:focus-visible, .inquiry button:focus-visible, .inquiry summary:focus-visible { outline: 2px solid #195965; outline-offset: 5px; }
.fuss-seite { background: #f6f7f6; color: #192426; border-color: #c5d0d1; padding: 28px 0 32px; }
.fuss-seite > .bahn { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 40px; }
.fussnav { padding: 0; border: 0; gap: 24px; }
.fussnav a { color: #304c53; font-size: 13px; text-transform: none; }
.fussnav a:hover { border-color: #195965; }
.fussmarke { color: #536368; margin: 0; padding: 0; border: 0; font-size: 12px; }
@media (max-width: 1100px) {
  .yusef-edition .studio-intro { width: 46%; }
  .application-grid figure { gap: 30px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .application-grid.is-interactive > figure { min-height: 350px; }
  .kontaktpaar { gap: 44px; }
}
@media (max-width: 820px) {
  .yusef-edition .studio-intro { top: 116px; width: auto; }
  .yusef-edition .studio-intro h1.studio-title { font-size: clamp(34px, 10.7vw, 64px); line-height: 1.04; margin: 0; }
  .yusef-edition .studio-actions { margin-top: 22px; }
  .yusef-edition .studio-actions .knopf { min-height: 46px; }
  .city-shade { background: linear-gradient(180deg, rgba(10,23,25,.82), rgba(10,23,25,.2) 43%, rgba(10,23,25,.12)); }
  .thermal-readings strong { font-size: 27px; }
  .thermal-readings { padding: 12px 16px 10px; }
  .thermal-readings > div > span { font-size: 12px; line-height: 1.3; }
  .hell .section-heading h2 { font-size: clamp(32px, 9.2vw, 48px); line-height: 1.08; }
  .section-heading { gap: 22px; margin-bottom: 28px; }
  .cargo-toolbar { padding: 16px 0; gap: 16px; }
  .cargo-toolbar .segmented { width: 100%; gap: 6px; }
  .cargo-toolbar .segmented button { flex: 1; padding: 12px 8px; font-size: 13px; }
  .application-tabs { gap: 24px; margin-bottom: 22px; }
  .application-tabs button { font-size: 16px; gap: 20px; }
  .application-tabs img { width: 18px; height: 18px; }
  .application-grid figure { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .application-grid > figure > img { aspect-ratio: 6 / 5; object-position: center; }
  .application-grid.is-interactive > figure { min-height: 0; }
  .hell .application-grid h3 { font-size: 32px; max-width: 14ch; margin-bottom: 16px; }
  .hell .application-grid p { font-size: 16px; }
  .application-grid figcaption { min-height: 236px; }
  .application-grid .text-action { margin-top: 22px; }
  .contact-section .kontakt { padding: 64px 0; }
  .hell .kontakt h2 { font-size: clamp(32px, 8.8vw, 48px); }
  .kontaktpaar { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 30px; }
  .inquiry-fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .inquiry-submit { width: 100%; justify-content: space-between; padding: 15px 18px; }
  .kontaktpaar { margin-top: 0; }
  .contact-intro .anschrift { margin-top: 26px; }
  .fuss-seite > .bahn { align-items: flex-start; flex-direction: column; gap: 24px; }
}
@media (max-width: 820px) and (max-height: 680px) {
  .yusef-edition .studio-intro { top: 98px; }
  .yusef-edition .studio-intro h1.studio-title { font-size: 34px; }
  .yusef-edition .studio-actions { margin-top: 14px; }
}
@media (max-width: 380px) and (orientation: portrait), (max-width: 820px) and (max-height: 680px) and (orientation: portrait) {
  .thermal-readings { left: 16px; right: 16px; bottom: 16px; padding: 10px 12px 8px; gap: 4px 12px; }
  .thermal-readings > div { gap: 5px; }
  .thermal-readings > div > span { font-size: 10px; gap: 5px; flex-wrap: nowrap; white-space: nowrap; }
  .thermal-readings strong { font-size: 24px; }
  .thermal-readings strong small { font-size: 12px; }
  .thermal-readings img { width: 12px; height: 12px; }
  .thermal-readings .thermal-control { margin-top: 0; padding-top: 8px; }
}
@media (max-width: 1100px) and (max-height: 480px) and (orientation: landscape) {
  .yusef-edition .studio-intro { top: 80px; width: 43%; }
  .yusef-edition .studio-intro h1.studio-title { font-size: 30px; line-height: 1.04; }
  .yusef-edition .studio-actions { margin-top: 10px; }
  .yusef-edition .studio-actions .knopf { min-height: 40px; height: 40px; }
  .thermal-readings { padding: 8px 10px; }
  .thermal-readings strong { font-size: 18px; }
  .thermal-readings > div > span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .application-tabs img, .vehicle-options button { transition: none; }
}

/* Product comparison: one large model, its controls and its facts form one view. */
#groessen.product-sizes { height: auto; padding: 96px 0 84px; background: #edf1ef; }
.size-heading { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 56px; margin-bottom: 42px; }
.hell .size-heading h2 { font-size: clamp(38px, 4.2vw, 60px); font-variation-settings: 'wght' 650; letter-spacing: -.03em; line-height: 1.06; }
.hell .size-heading > p { font-size: 17px; line-height: 1.6; margin: 0 0 4px; }
.size-product { scroll-margin-top: 112px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); grid-template-areas: 'visual choices' 'visual facts'; gap: 0 64px; align-items: start; }
.size-choices { grid-area: choices; display: flex; gap: 0; border-bottom: 1px solid #a6b7b5; }
.size-specs[hidden] { display: none; }
/* Reiter und Knoepfe blendet das Skript erst ein, wenn die Szene steht. Sie
   behalten ihren Platz, sonst waechst der Abschnitt beim Laden um 53 px und
   schiebt alles darunter nach unten — das faengt verify-monitoring-transition. */
.size-choices[hidden], .size-view-controls[hidden] { visibility: hidden; }
.size-choices button { flex: 1; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; min-height: 78px; padding: 14px 4px 16px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; color: #536368; cursor: pointer; font: inherit; text-align: left; }
.size-choices button span { font-size: 22px; font-variation-settings: 'wght' 650; }
.size-choices button small { font-size: 13px; }
.size-choices button[aria-selected='true'] { color: #153f47; border-bottom-color: #153f47; }
.size-visual { grid-area: visual; min-width: 0; position: relative; }
#groessen.product-sizes #groessenBuehne { position: relative; inset: auto; width: 100%; height: 480px; background: transparent; overflow: hidden; touch-action: pan-y pinch-zoom; cursor: grab; }
#groessenBuehne:active { cursor: grabbing; }
#groessenBuehne canvas { position: absolute; inset: 0; opacity: 1; transition: opacity 120ms ease-out; }
#groessenBuehne.is-switching canvas { opacity: 0; }
#groessenBuehne .size-poster { display: block; width: 100%; height: 100%; object-fit: contain; }
#groessenBuehne.is-ready .size-poster { visibility: hidden; }
#groessenBuehne:not(.is-ready) canvas { visibility: hidden; }
.size-view-controls { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 0 20px; }
.size-view-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; min-width: 44px; border: 1px solid #a6b7b5; border-radius: 3px; background: transparent; color: #192426; padding: 10px; font: 500 13px Archivo, sans-serif; cursor: pointer; }
.size-view-controls #sizeDoor { min-width: 150px; }
.size-view-controls img { width: 18px; height: 18px; }
.size-view-controls button:hover { background: #dbe4e0; }
.size-choices button:focus-visible, .size-view-controls button:focus-visible, .size-afterword summary:focus-visible { outline: 2px solid #195965; outline-offset: 4px; }
.size-information { grid-area: facts; padding-top: 32px; }
.hell .size-specs h3 { font-size: 18px; margin: 0; }
.hell .size-specs .size-depth { font-size: 62px; font-variation-settings: 'wght' 550; letter-spacing: -.035em; line-height: 1; color: #192426; margin: 18px 0 26px; font-variant-numeric: tabular-nums; }
.size-depth span { font-size: 16px; font-variation-settings: 'wght' 450; letter-spacing: 0; }
.size-specs dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 22px 0; margin: 0; border-top: 1px solid #a6b7b5; border-bottom: 1px solid #a6b7b5; }
.size-specs dt { font-size: 12px; color: #536368; margin-bottom: 9px; }
.size-specs dd { margin: 0; color: #192426; font-size: 20px; font-variation-settings: 'wght' 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.size-specs dd small { font-size: 11px; font-variation-settings: 'wght' 450; }
/* Offene Angabe: das Volumen passt nicht zu den Innenmassen und bleibt bis zur
   Klaerung als Vorbehalt stehen, nicht als Zahl. */
.size-specs dd.offen { font-size: 15px; font-variation-settings: 'wght' 500; color: #536368; white-space: normal; }
.hell .size-note { font-size: 12px; line-height: 1.5; color: #536368; margin: 16px 0 24px; }
.size-note[hidden] { display: none; }
/* Individuell: dieselbe Dreierreihe wie die Masstafel, aber als echte weisse
   Eingabefelder wie im Kontaktformular — Sören, 24.09.: „mehr obvious, dass
   ich hier was veraendern kann“. */
.hell .size-inputs-lead { margin: 0; padding: 18px 0 14px; border-top: 1px solid #a6b7b5; font-size: 15px; line-height: 1.45; color: #192426; font-variation-settings: 'wght' 550; text-wrap: balance; }
.size-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 0 22px; border-bottom: 1px solid #a6b7b5; }
.size-inputs label { display: block; min-width: 0; cursor: text; }
.size-input-label { display: block; font-size: 12px; color: #536368; margin-bottom: 7px; }
.size-field { display: flex; align-items: center; gap: 4px; height: 50px; padding: 0 10px 0 12px; border: 1px solid #a3b3b4; border-radius: 3px; background: #fff; box-shadow: 0 1px 2px #1924260d; transition: border-color 120ms ease-out, box-shadow 120ms ease-out; }
.size-field:hover { border-color: #536368; }
.size-field:focus-within { border-color: #195965; box-shadow: 0 0 0 2px #19596533; }
.size-field input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: #192426; font: 600 20px Archivo, sans-serif; font-variation-settings: 'wght' 600; font-variant-numeric: tabular-nums; caret-color: #195965; color-scheme: light; -moz-appearance: textfield; appearance: textfield; }
.size-field input::-webkit-outer-spin-button, .size-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.size-field input:focus { outline: none; }
.size-field small { font-size: 11px; color: #536368; }
.size-range { display: block; margin-top: 8px; font-size: 11px; line-height: 1.3; color: #536368; font-variant-numeric: tabular-nums; }
.size-inputs label.is-out .size-field { border-color: #a43725; box-shadow: 0 0 0 2px #a4372526; }
.size-inputs label.is-out .size-range { color: #a43725; }
/* Volumen der Box nach Mass: eine Zeile unter den Feldern, rechnet mit. */
.hell .size-volume { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding: 16px 0; border-bottom: 1px solid #a6b7b5; font-size: 12px; line-height: 1.3; color: #536368; }
.size-volume b { color: #192426; font-size: 20px; font-weight: normal; font-variation-settings: 'wght' 600; font-variant-numeric: tabular-nums; }
.size-volume b small { font-size: 11px; font-variation-settings: 'wght' 450; }
/* Ohne 3D-Ansicht passt sich nichts sofort an — dann nur die Aufforderung. */
.sizes-fallback .size-inputs-live { display: none; }
.size-information > .text-action { font-size: 14px; }
.size-afterword { display: grid; grid-template-columns: 1.4fr .8fr; gap: 64px; border-top: 1px solid #a6b7b5; margin-top: 36px; padding-top: 30px; }
.size-afterword details { align-self: start; }
.size-afterword summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; cursor: pointer; color: #192426; font-size: 20px; font-variation-settings: 'wght' 550; }
.size-afterword summary::-webkit-details-marker { display: none; }
.size-afterword summary img { width: 20px; height: 20px; transition: transform 180ms ease-out; }
.size-afterword details[open] summary img { transform: rotate(45deg); }
.hell .size-afterword h3 { font-size: 20px; margin: 10px 0 0; }
.hell .size-afterword p { font-size: 15px; line-height: 1.65; max-width: 48ch; margin-top: 12px; }
.size-afterword .text-action { margin-top: 18px; font-size: 13px; }
#groessen.product-sizes.sizes-fallback #groessenBuehne { min-height: 0; }
#groessen.product-sizes.sizes-fallback .size-load { position: absolute; inset: auto 0 4px; background: #edf1ef; padding: 10px; }
@media (max-width: 1100px) {
  .size-product, .size-afterword { gap: 0 32px; }
  #groessen.product-sizes #groessenBuehne { height: 430px; }
  .size-specs dd { font-size: 18px; }
  /* 821–1100 px: die Faktenspalte steht auf ihren 300 px Mindestbreite, je
     Feld ~91 px. Bei 20 px Schrift war die letzte Ziffer von „1200“
     angeschnitten (iPad hochkant, iPhone quer). */
  .size-inputs { gap: 10px; }
  .size-field { padding: 0 8px 0 10px; }
  .size-field input { font-size: 18px; }
}
@media (max-width: 820px) {
  #groessen.product-sizes { padding: 58px 0 54px; }
  .size-heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .hell .size-heading h2 { font-size: clamp(30px, 8.7vw, 44px); line-height: 1.08; }
  .hell .size-heading > p { font-size: 15px; line-height: 1.5; }
  .size-product { scroll-margin-top: 92px; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'choices' 'visual' 'facts'; }
  .size-choices button { min-height: 68px; padding: 12px 0; }
  .size-choices button span { font-size: 20px; }
  .size-choices button small { font-size: 12px; }
  .size-visual { margin: 0 -12px; }
  #groessen.product-sizes #groessenBuehne { height: clamp(260px, 100vw, 420px); }
  .size-view-controls { gap: 16px; padding-bottom: 22px; }
  .size-information { padding-top: 0; }
  .size-specs h3, .size-specs .size-depth { display: none; }
  .size-specs dl { padding: 18px 0; gap: 12px; }
  .size-specs dd { font-size: clamp(17px, 5.3vw, 23px); }
  .size-inputs { padding: 0 0 18px; gap: 10px; }
  .size-field { padding: 0 8px 0 10px; }
  .size-field input { font-size: clamp(17px, 5.3vw, 22px); }
  .size-choices button span { font-size: clamp(16px, 4.9vw, 20px); }
  .size-note { max-width: 48ch; }
  .size-afterword { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; padding-top: 24px; }
  .size-afterword summary, .hell .size-afterword h3 { font-size: 18px; }
  .size-custom { border-top: 1px solid #a6b7b5; padding-top: 20px; }
  .size-custom h3 { margin-top: 0; }
}
@media (max-width: 820px) and (max-height: 480px) {
  .size-product { grid-template-columns: 1.2fr 1fr; grid-template-areas: 'visual choices' 'visual facts'; gap: 20px; }
  #groessen.product-sizes #groessenBuehne { height: 300px; }
  .size-specs dl { grid-template-columns: 1fr; gap: 10px; }
  .size-specs dl > div { display: flex; align-items: baseline; justify-content: space-between; }
  .size-inputs { grid-template-columns: 1fr; gap: 10px; }
  .size-specs dt { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #groessenBuehne canvas, .size-afterword summary img { transition: none; }
}