/* Auflagen-Passung auf /feldbett-auflage-passend/ (templates/_auflage.html, static/js/auflage.js). Wird nur auf dieser Seite
   geladen. Farben und Schriften aus site.css (:root), Ampelfarben wie Paar-Rechner und „Passt dir das?“, Umbrüche in em.
   Ampel nie nur über die Farbe: Jede Stufe steht als Wort daneben. Raster mit minmax(0, 1fr), nichts breiter als das Bild. */
:root { --auflage-passt: #2F6B3A; --auflage-knapp: #B98A00; --auflage-nicht: #A3412B; }

/* Ampel (Werkzeug, Matrix, Regeln) */
.auflage-stufe { display: inline-flex; align-items: flex-start; gap: .35rem; font-weight: 700; margin: 0; }
.auflage-punkt { width: .72em; height: .72em; margin-top: .4em; border-radius: 50%; flex: none; background: currentColor; }
.auflage-stufe.auflage-passt { color: var(--auflage-passt); }
.auflage-stufe.auflage-kleiner, .auflage-stufe.auflage-ueber { color: #7A5B00; }
.auflage-stufe.auflage-kleiner .auflage-punkt, .auflage-stufe.auflage-ueber .auflage-punkt { background: var(--auflage-knapp); }
.auflage-stufe.auflage-nicht { color: var(--auflage-nicht); }
.auflage-stufe.auflage-offen { color: var(--daemmerung); }

/* Werkzeug */
.auflage-ohne-js { background: var(--papier); border-left: 5px solid var(--wegweiser); border-radius: 4px; padding: .8rem 1rem; font-size: 1rem; }
.auflage-werkzeug { background: var(--papier); border: 2px solid var(--kiefer); border-radius: 6px; padding: 1.2rem 1.3rem 1.3rem; margin-block: 2rem !important; scroll-margin-top: 1rem; }
.auflage-werkzeug > * + * { margin-top: 1rem; }
.auflage-werkzeug h2 { margin: 0 !important; font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.auflage-intro { font-size: 1rem; line-height: 1.55; }
.auflage-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.auflage-feld { display: grid; gap: .3rem; min-width: 0; align-content: start; }
.auflage-feld-bett, .auflage-hilfe { grid-column: 1 / -1; }
.auflage-feld label { font-size: .98rem; font-weight: 650; }
.auflage-feld select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 44px; padding: .4rem .6rem; font: 400 1rem/1.3 var(--text);
  border: 2px solid var(--kiefer); border-radius: 4px; background: #fff; color: var(--granit); text-overflow: ellipsis; }
.auflage-eingabe { display: flex; align-items: center; gap: .4rem; }
.auflage-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; }
.auflage-eingabe input::placeholder { font: 400 1rem var(--text); color: #6B7480; }
.auflage-eingabe input[aria-invalid="true"] { border-color: var(--auflage-nicht); }
.auflage-einheit { font-size: .95rem; color: var(--daemmerung); min-width: 1.6em; }
.auflage-hilfe { margin: 0 !important; font-size: .88rem; line-height: 1.4; color: var(--daemmerung); }
.auflage-status { font-size: 1rem; line-height: 1.5; padding: .7rem .9rem; background: var(--nebel); border-left: 5px solid var(--wegweiser); border-radius: 4px; }
.auflage-transparenz { font-size: .88rem; line-height: 1.45; color: var(--daemmerung); }

/* Ergebnis: je Auflage eine Karte, Skizze daneben ab 34em */
.auflage-ergebnis { list-style: none; margin: 1rem 0 0 !important; padding: 0 !important; display: grid; gap: .9rem; }
.auflage-ergebnis:empty { display: none; }
.auflage-ergebnis li { margin: 0 !important; }
.auflage-treffer { background: #fff; border: 1px solid var(--linie); border-left: 6px solid var(--auflage-passt); border-radius: 4px; padding: .8rem .9rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; min-width: 0; }
.auflage-treffer-kleiner, .auflage-treffer-ueber { border-left-color: var(--auflage-knapp); }
.auflage-treffer-nicht { border-left-color: var(--auflage-nicht); background: var(--papier); }
@media (min-width: 34em) { .auflage-treffer { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); align-items: center; } }
.auflage-treffer-text { display: grid; gap: .3rem; min-width: 0; }
.auflage-treffer-text p { margin: 0 !important; }
.auflage-treffer-name { font: 800 1.2rem/1.1 var(--display); overflow-wrap: break-word; }
.auflage-zeile, .auflage-preis, .auflage-keine { font-size: .92rem; line-height: 1.45; }
.auflage-zeile { color: var(--granit); overflow-wrap: break-word; }
.auflage-keine { color: var(--daemmerung); }
.auflage-treffer-kauf { margin-top: .3rem; }
.auflage-treffer-kauf .kaufen { max-width: 100%; box-sizing: border-box; }
.auflage-werbung { font-size: .85rem; color: var(--daemmerung); }
.auflage-treffer-bild { min-width: 0; }
.auflage-skizze { display: block; width: 100%; height: auto; max-width: 13rem; overflow: visible; }
.auflage-skizze-bett { fill: var(--nebel); stroke: none; }
.auflage-skizze-rand { fill: none; stroke: var(--kiefer); stroke-width: 1.5; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.auflage-skizze-auflage { fill: rgba(47, 107, 58, .3); stroke: var(--auflage-passt); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.auflage-skizze-auflage.auflage-kleiner, .auflage-skizze-auflage.auflage-ueber { fill: rgba(185, 138, 0, .3); stroke: #7A5B00; }
.auflage-skizze-auflage.auflage-nicht { fill: rgba(163, 65, 43, .25); stroke: var(--auflage-nicht); }

/* Passungsmatrix: Tabelle aus site.css (.tabelle-stapel: unter 42rem Zeilenblöcke mit Beschriftung) */
.auflage-matrix th { vertical-align: bottom; }
.auflage-th-mass { display: block; font-weight: 400; font-size: .85rem; color: var(--daemmerung); }
.auflage-bett-name { font-weight: 650; overflow-wrap: break-word; }
.auflage-bett-mass { display: block; font-weight: 400; font-size: .88rem; color: var(--daemmerung); white-space: nowrap; }
.auflage-zelle { display: grid; gap: .1rem; }
.auflage-matrix .auflage-stufe { font-size: .92rem; }
.auflage-delta { font-size: .85rem; line-height: 1.35; color: var(--daemmerung); }
.auflage-matrix tr { scroll-margin-top: 1rem; }
.auflage-matrix tr:target { background: var(--flechte-hell); outline: 2px solid var(--kiefer); outline-offset: -2px; }
.auflage-tab-hinweis { font-size: .88rem; line-height: 1.45; color: var(--daemmerung); }

/* Auflagen im Überblick */
.auflage-liste { list-style: none; margin: 1rem 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40em) { .auflage-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.auflage-liste li + li { margin-top: 0; }
.auflage-karte { 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; }
.auflage-karte p { margin: 0 !important; }
.auflage-kopf { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .8rem; align-items: center; }
.auflage-bild { color: var(--kiefer); }
.auflage-name { font: 800 1.25rem/1.1 var(--display); overflow-wrap: break-word; hyphens: auto; }
.auflage-werte { display: grid; gap: .4rem; margin: 0; }
.auflage-werte div { min-width: 0; border-top: 1px solid var(--linie); padding-top: .35rem; }
.auflage-werte dt { font-size: .82rem; color: var(--daemmerung); }
.auflage-werte dd { margin: 0; font-weight: 650; overflow-wrap: break-word; }
.auflage-kauf { margin-top: auto; }
.auflage-kauf .kaufen { max-width: 100%; box-sizing: border-box; }

/* Regeln */
.auflage-regeln { padding-left: 0 !important; list-style: none; }
.auflage-regeln li { margin-top: .5rem; }

/* Sehr schmal oder große Browserschrift: Felder untereinander, Zeichnung weg */
@media (max-width: 21em) {
  .auflage-form { grid-template-columns: minmax(0, 1fr); }
  .auflage-kopf { grid-template-columns: minmax(0, 1fr); }
  .auflage-bild { display: none; }
}

/* Notlösung im Werkzeug, wenn keine Auflage passt (Isomatten-Suche, auflage.js) */
.auflage-notloesung { background: #fff; border: 1px solid var(--linie); border-left: 6px solid var(--wegweiser); border-radius: 4px; padding: .8rem .9rem; }
.auflage-notloesung p { margin: 0 0 .6rem !important; font-size: .95rem; line-height: 1.5; }
.auflage-notloesung .kaufen { max-width: 100%; box-sizing: border-box; }
.auflage-notloesung .kaufen-hinweis { margin: .6rem 0 0 !important; font-size: .85rem; color: var(--daemmerung); }