/* Paar-Rechner und Standardpaarungen auf /feldbett-2-personen/ (templates/_paarrechner.html, static/js/paar.js).
   Wird nur auf dieser Seite geladen. Farben und Schriften aus site.css (:root), Umbrüche in em wie dort.
   Ampel nie nur über die Farbe: Jede Stufe steht als Wort daneben (passt, knapp, passt nicht). */
:root { --paar-passt: #2F6B3A; --paar-knapp: #B98A00; --paar-nicht: #A3412B; }

/* Rechner-Kasten */
.paar-rechner { background: var(--papier); border: 2px solid var(--kiefer); border-radius: 6px; padding: 1.2rem 1.3rem 1.3rem; margin-block: 2rem !important; }
.paar-rechner > * + * { margin-top: 1rem; }
.paar-rechner h2 { margin: 0 !important; font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.paar-intro { font-size: 1rem; line-height: 1.55; }
.paar-ohne-js { background: var(--papier); border-left: 5px solid var(--wegweiser); border-radius: 4px; padding: .8rem 1rem; font-size: 1rem; }

/* Formular: zwei Personen nebeneinander ab 40em, darunter der Weg */
.paar-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
@media (min-width: 40em) { .paar-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paar-hilfe, .paar-transport, .paar-beispiel { grid-column: 1 / -1; } }
.paar-form fieldset { margin: 0; padding: .8rem 1rem 1rem; border: 1px solid var(--linie); border-radius: 4px; min-width: 0; }
.paar-form legend { font: 800 1.25rem/1.1 var(--display); padding: 0 .3rem; }
/* Schmal: Beschriftung über dem Feld (wie .passt-feld), sonst bricht „Körpergröße“ mitten im Wort um; ab 24em daneben,
   die Beschriftung nie schmaler als ihr Wort */
.paar-feld { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; margin-top: .6rem; }
@media (min-width: 24em) { .paar-feld { grid-template-columns: minmax(max-content, 1fr) minmax(0, 8.5em); align-items: center; gap: .6rem; } }
.paar-feld label { font-size: 1rem; }
.paar-eingabe { display: flex; align-items: center; gap: .4rem; }
.paar-eingabe input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: .4rem .6rem; font: 700 1.25rem/1.2 var(--display);
  border: 2px solid var(--kiefer); border-radius: 4px; background: #fff; color: var(--granit); font-variant-numeric: tabular-nums; }
.paar-eingabe input[aria-invalid="true"] { border-color: var(--paar-nicht); }
.paar-einheit { font-size: .95rem; color: var(--daemmerung); min-width: 1.6em; }
.paar-hilfe { margin: 0 !important; font-size: .88rem; line-height: 1.4; color: var(--daemmerung); }
.paar-optionen { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .4rem; }
.paar-option { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: 1rem; cursor: pointer; }
.paar-option input { width: 1.2rem; height: 1.2rem; accent-color: var(--kiefer); margin: 0; }
.paar-beispiel { margin: 0 !important; font-size: .92rem; color: var(--daemmerung); }
.paar-beispiel-knopf { font: 700 1rem/1.1 var(--display); padding: .55rem .9rem; min-height: 44px; border: 2px solid var(--kiefer); border-radius: 4px;
  background: transparent; color: var(--kiefer); cursor: pointer; }
.paar-beispiel-knopf:hover { background: var(--kiefer); color: var(--nebel); }

/* Status (aria-live) und Ergebnis */
.paar-status { font-size: 1rem; line-height: 1.5; padding: .7rem .9rem; background: var(--nebel); border-left: 5px solid var(--wegweiser); border-radius: 4px; }
.paar-ergebnis { display: grid; gap: 1.2rem; }
.paar-ergebnis:empty { display: none; }
.paar-weg { background: #fff; border: 1px solid var(--linie); border-top: 6px solid var(--kiefer); border-radius: 4px; padding: 1rem 1.1rem 1.1rem; min-width: 0; }
.paar-weg[data-stufe="knapp"] { border-top-color: var(--paar-knapp); }
.paar-weg[data-stufe="nicht"] { border-top-color: var(--paar-nicht); }
.paar-weg > * + * { margin-top: .8rem; }
.paar-weg p { margin-bottom: 0; }
.paar-weg-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.paar-weg-nr { margin: 0 !important; width: 100%; font-size: .85rem; color: var(--daemmerung); font-style: italic; }
.paar-weg h3 { margin: 0 !important; font-size: clamp(1.4rem, 3vw, 1.7rem); line-height: 1.05; }
.paar-gesamt { margin: 0 0 0 auto !important; font-size: .95rem; }
.paar-modell { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .9rem; align-items: center; }
.paar-bild { color: var(--kiefer); }
.paar-name { margin: 0 !important; font: 800 1.3rem/1.1 var(--display); overflow-wrap: break-word; }
.paar-kriterien { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: .5rem; }
.paar-kriterien li { margin: 0; font-size: .98rem; line-height: 1.5; padding-left: .8rem; border-left: 4px solid var(--linie); }
.paar-kriterien li.paar-passt { border-left-color: var(--paar-passt); }
.paar-kriterien li.paar-knapp { border-left-color: var(--paar-knapp); }
.paar-kriterien li.paar-nicht { border-left-color: var(--paar-nicht); }
.paar-krit { font-weight: 650; }
.paar-ampel { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; white-space: nowrap; }
.paar-punkt { width: .75em; height: .75em; border-radius: 50%; background: currentColor; flex: none; }
.paar-ampel.paar-passt { color: var(--paar-passt); }
.paar-ampel.paar-knapp { color: #7A5B00; }
.paar-ampel.paar-knapp .paar-punkt { background: var(--paar-knapp); }
.paar-ampel.paar-nicht { color: var(--paar-nicht); }
.paar-preis { font-size: .95rem; }
.paar-kauf .kaufen { max-width: 100%; box-sizing: border-box; }
.paar-weg .kaufen-hinweis { margin-top: .5rem; }
.paar-keine { font-size: .95rem; line-height: 1.5; color: var(--paar-nicht); font-weight: 650; }
.paar-grenze { font-size: .95rem; line-height: 1.5; color: var(--granit); }
.paar-weitere { border-top: 1px solid var(--linie); padding-top: .8rem; }
.paar-weitere-titel { font: 800 1.15rem/1.1 var(--display); }
.paar-weitere ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.paar-weitere li { margin: 0; }
.paar-weitere li p { margin: 0; font-size: .95rem; }
.paar-weitere-name { font-weight: 650; margin-right: .4rem; }
.paar-weitere-werte { color: var(--granit); }
.paar-weitere .paar-kauf { margin-top: .4rem; }
.paar-weg-leer p { font-size: .98rem; }
.paar-transparenz { font-size: .85rem; line-height: 1.45; color: var(--daemmerung); }

/* Statische Tabelle der Standardpaarungen (Zeilenblöcke unter 42rem Rahmenbreite aus site.css) */
.paar-tabelle td:first-child > span { display: block; }
.paar-tab-weg { font-size: .82rem; font-weight: 400; color: var(--daemmerung); font-style: italic; }
.paar-tab-name { font-weight: 650; }
.paar-tab-preis { font-size: .9rem; font-weight: 400; margin-top: .2rem; }
.paar-tab-kauf { margin-top: .45rem; }
.paar-tab-kauf .kaufen { font-size: .95rem; }
.paar-tab-zusatz { display: block; font-size: .82rem; color: var(--daemmerung); }
.paar-tabelle tr { scroll-margin-top: 1rem; }
.paar-tab-hinweis { font-size: .88rem; line-height: 1.45; color: var(--daemmerung); }