/* Maß-Seiten (/feldbett-200-kg/, /feldbett-150-kg/, /feldbett-fuer-grosse-menschen/, /feldbett-breit/): Liste aus
   templates/_massliste.html, Daten aus massliste() in tools/build.py. Nur auf diesen Seiten geladen, kein JavaScript.
   Farben und Schriften aus site.css (:root), Umbrüche in em wie dort, Raster mit minmax(0, 1fr) (nie breiter als das Bild). */

.massliste { margin-block: 1.4rem 0 !important; }
.massliste > * + * { margin-top: 1.6rem; }

/* Sprungmarken zu den Abschnitten */
.mass-sprung ul { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: .5rem; }
.mass-sprung li + li { margin-top: 0; }
.mass-sprung a { padding: .45rem .8rem; border: 2px solid var(--kiefer); border-radius: 999px; font: 700 1.05rem/1.1 var(--display);
  text-decoration: none; color: var(--kiefer); min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.mass-sprung a:hover { background: var(--kiefer); color: var(--nebel); }
.mass-sprung-zahl { font-weight: 400; margin-left: .25em; }

/* Abschnitt je Stufe */
.mass-abschnitt { scroll-margin-top: 1rem; }
.mass-abschnitt > * + * { margin-top: .8rem; }
.mass-abschnitt h3 { margin: 0 !important; font-size: clamp(1.45rem, 3vw, 1.8rem); line-height: 1.1; overflow-wrap: break-word; }
.mass-regel { font-size: .95rem; line-height: 1.5; color: var(--daemmerung); }
.mass-leer { background: var(--nebel); border-left: 5px solid var(--wegweiser); border-radius: 4px; padding: .8rem 1rem; font-size: 1rem; line-height: 1.5; }

/* Karten: eine Spalte, ab 40em zwei (die Textspalte ist höchstens 68ch breit) */
.mass-modelle { list-style: none; margin: .8rem 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40em) { .mass-modelle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mass-modelle li + li { margin-top: 0; }
.mass-modell { background: var(--papier); border: 1px solid var(--linie); border-top: 5px solid var(--kiefer); border-radius: 4px; padding: .9rem 1rem 1rem;
  display: flex; flex-direction: column; gap: .7rem; min-width: 0; scroll-margin-top: 1rem; }
.mass-modell p { margin: 0 !important; }
.mass-kopf { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .8rem; align-items: center; }
.mass-bild { color: var(--kiefer); }
.mass-kopf-text { min-width: 0; }
.mass-name { font: 800 1.25rem/1.1 var(--display); overflow-wrap: break-word; hyphens: auto; }
.mass-name a { text-decoration: none; }
.mass-name a:hover { text-decoration: underline; }
.mass-bauart { margin-top: .25rem !important; font-size: .9rem; color: var(--daemmerung); }

/* Werte: zwei je Zeile, das Merkmal der Seite hervorgehoben */
.mass-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem; margin: 0; }
.mass-werte div { min-width: 0; border-top: 1px solid var(--linie); padding-top: .35rem; }
.mass-werte dt { font-size: .82rem; color: var(--daemmerung); }
.mass-werte dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.mass-werte .mass-haupt dd { font: 800 1.45rem/1.1 var(--display); color: var(--kiefer); }
.mass-ka { font-weight: 400; font-style: italic; }
.mass-reicht { font-size: .95rem; line-height: 1.45; }
.mass-kauf { margin-top: auto; }
.mass-kauf .kaufen { max-width: 100%; box-sizing: border-box; }
.mass-quelle { font-size: .88rem; line-height: 1.45; color: var(--daemmerung); }

/* Große Browserschrift / sehr schmal: Zeichnung weg, Werte untereinander */
@media (max-width: 21em) {
  .mass-kopf { grid-template-columns: minmax(0, 1fr); }
  .mass-bild { display: none; }
  .mass-werte { grid-template-columns: minmax(0, 1fr); }
}