/* Hosenregal (hosen-anprobe.php): ein Ladenregal wie im Hosenfachgeschäft. Je Platz oben ein Holzfach mit gefalteten Stapeln —
   ein Stapel je Farbe, eine Lage je vorrätiger Größe, die Lage in der Farbe der Hose —, darunter an der Stange ein Einzelstück
   zum Ansehen mit Preisschild. Die Wand ist ein Gegenstand und bleibt hell wie die Schuhwand; die Herstellerfotos werden auf
   die Wandfarbe multipliziert. Grundbausteine (Kopf, Berater, Chips, Preis) aus schuhwand.css. */
.hr-wand{--hr-wand:#F1EFEA;--hr-fach:#E4DED3;--hr-holz:#C9A777;--hr-holz-kante:#9C7B4E;--hr-holz-hell:#D9BD93;
    display:grid;gap:12px;padding:12px;margin-bottom:24px;background:var(--petrol-tief,#0E2725)}
.hr-regal{background:var(--hr-wand);scroll-margin-top:calc(var(--kopf) + 84px)}
.hr-regal .sw-feld-kopf h2{font-size:19px;line-height:1.25;font-weight:600;color:var(--weiss)}
.hr-abteilung{padding:14px 0 6px}
.hr-abteilung + .hr-abteilung{border-top:1px solid #E2DED5}
/* Abteilungsschild wie ein Messingschild über dem Regalboden */
.hr-abteilung-schild{display:inline-block;margin:0 0 10px 16px;padding:4px 12px;font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#3B2F1C;background:linear-gradient(180deg,#E9D7A8,#C9AE6B);box-shadow:0 1px 0 rgba(60,45,20,.35)}
/* Spalten ohne Abstand: Fachrahmen und Kleiderstange laufen über die ganze Reihe durch */
.hr-plaetze{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:26px;padding:0 10px 10px}
.hr-plaetze > .hr-platz:not(.hf-platz){flex:0 0 212px}
.hr-platz{display:flex;flex-direction:column;min-width:0;transition:opacity .2s}
.hr-platz.sw-blass{opacity:.18}

/* Das Fach: Holzrahmen, Rückwand etwas dunkler, die Stapel stehen unten auf dem Boden */
.hr-fach{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:176px;padding:12px 10px 0;overflow:hidden;background:linear-gradient(180deg,rgba(60,45,20,.10),transparent 26px),var(--hr-fach);
    border:5px solid var(--hr-holz);border-bottom-width:9px;border-bottom-color:var(--hr-holz-kante);box-shadow:inset 0 0 0 1px rgba(60,45,20,.12),0 6px 6px -4px rgba(60,45,20,.28)}
.hr-platz + .hr-platz .hr-fach{border-left-width:0}
.hr-stapel{position:relative;display:flex;flex-direction:column;align-items:stretch;flex:0 1 68px;min-width:32px;padding-bottom:4px;text-decoration:none;color:#1F2B2A;
    --lage:#A9B0AD;transition:transform .18s ease}
.hr-stapel:hover,.hr-stapel:focus-visible{transform:translateY(-4px)}
.hr-stapel:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* eine gefaltete Hose von vorn: Lage mit Faltkante oben, Schatten unten, leicht versetzt wie von Hand gelegt */
.hr-lage{position:relative;display:block;height:16px;margin-top:-2px;border-radius:3px 3px 5px 5px/2px 2px 6px 6px;background:var(--lage);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.20),0 1px 1px rgba(0,0,0,.28)}
.hr-lage:first-child{margin-top:0}
.hr-lage:nth-child(odd){transform:translateX(1.5px)}
.hr-lage:nth-child(4n){transform:translateX(-1.5px)}
.hr-lage::after{content:"";position:absolute;left:8%;right:8%;top:7px;height:1px;background:rgba(0,0,0,.14)}
.hr-stapel--zwei .hr-lage{background:linear-gradient(180deg,var(--lage) 0 58%,var(--lage2,var(--lage)) 58%)}
.hr-stapel--ohne .hr-lage{background:repeating-linear-gradient(135deg,#B9BFBC 0 5px,#A9B0AD 5px 10px)}
/* Größenetikett vorn an der Lage */
.hr-lage b{position:absolute;left:3px;top:50%;transform:translateY(-50%);z-index:1;padding:0 3px;font-weight:600;font-size:9.5px;line-height:12px;
    color:#1F2B2A;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);font-variant-numeric:tabular-nums;white-space:nowrap}
.hr-lage--rest{height:12px;background:transparent!important;box-shadow:none}
.hr-lage--rest::after{display:none}
.hr-lage--rest b{left:50%;transform:translate(-50%,-50%);background:none;box-shadow:none;color:#5E6B69}
.hr-lage.ap-treffer b{background:var(--orange);color:#1F2B2A;box-shadow:0 0 0 2px var(--orange)}
.hr-farbe{display:block;margin-top:5px;font-size:10.5px;line-height:1.2;text-align:center;color:#5E6B69;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Die Kleiderstange: ein Chromrohr über die ganze Reihe, daran der Bügel mit dem Einzelstück */
.hr-haenger{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:16px;text-decoration:none;color:#1F2B2A}
.hr-haenger::before{content:"";position:absolute;left:0;right:0;top:16px;height:6px;border-radius:3px;
    background:linear-gradient(180deg,#F4F6F7 0,#B6BEC3 45%,#7E888E 100%);box-shadow:0 2px 3px rgba(0,0,0,.18)}
.hr-buegel{position:relative;z-index:1;width:min(58%,124px);height:40px;margin-top:-12px;
    background:linear-gradient(#2B2F31,#2B2F31) 4px 100%/10px 15px no-repeat,linear-gradient(#2B2F31,#2B2F31) calc(100% - 4px) 100%/10px 15px no-repeat}
/* Haken über die Stange, darunter die Querstange des Klammerbügels; die Klammern halten den Bund */
.hr-buegel::before{content:"";position:absolute;left:50%;top:0;width:14px;height:16px;margin-left:-7px;border:2.5px solid #6B7378;border-bottom:0;border-radius:9px 9px 0 0}
.hr-buegel::after{content:"";position:absolute;left:0;right:0;top:16px;height:6px;border-radius:3px;background:linear-gradient(180deg,#4A5054,#1F2325)}
.hr-stueck{position:relative;display:block;width:min(86%,190px);height:236px;margin-top:-4px;overflow:hidden;background:var(--hr-wand);transform-origin:50% 0;transition:transform .35s ease}
.hr-stueck img{width:100%;height:100%;object-fit:contain;object-position:50% 8%;mix-blend-mode:multiply}
.hr-haenger:hover .hr-stueck,.hr-haenger:focus-visible .hr-stueck{transform:rotate(1.4deg)}
.hr-haenger:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.hr-schild{width:calc(100% - 24px);margin-top:12px;padding:7px 9px 8px;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #E2DED5;border-top:3px solid var(--petrol)}
.hr-haenger:hover .hr-schild{border-color:var(--petrol)}
.hr-schild em{font-style:normal;font-family:var(--font-label);font-weight:500;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#5E6B69}
.hr-schild strong{font-weight:600;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hr-schild .sw-preis{margin-top:4px}
.hr-schild .sw-preis i{display:inline}

/* Berater: Abteilung + Größen je Größensystem */
.hr-berater{flex-direction:column;align-items:stretch;gap:10px}
.hr-gruppe{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.hr-gruppe > .ss-overline{min-width:92px}
.hr-gruppe--groessen{flex-direction:column;align-items:stretch;gap:6px}
.hr-system{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.hr-system > span{min-width:96px;font-size:12.5px;color:var(--text-muted)}
.hr-system .sw-chips{flex:1 1 280px;gap:6px}
.hr-system .sw-chip{padding:5px 10px;font-size:13px}
@media(max-width:900px){.hr-plaetze{padding:0 6px 8px}.hr-plaetze > .hr-platz:not(.hf-platz){flex-basis:160px}.hr-wand{padding:8px;gap:8px}
    .hr-stueck{height:190px}.hr-fach{height:164px}
    .hr-regal{scroll-margin-top:calc(var(--kopf) + 12px)}}
@media(prefers-reduced-motion:reduce){.hr-platz,.hr-stapel,.hr-stueck{transition:none}}

/* Fotowand (Lars 17.10.2026, includes/katalog_hosenfach.php): je Modell fotorealistische Fächer — links hängt die Hose, rechts
   drei Stapelfächer in Originalhöhe. Die Fächer stoßen ohne Abstand aneinander; jedes legt sich mit seinem linken Pfosten über
   den rechten Rand des Nachbarn (3,4 % der Breite), so steht zwischen zwei Fächern genau ein Pfosten. Keine Beschriftung im Bild —
   Farben und Größen stehen in der Artikelbox darunter. */
/* Fachbreite: n Fächer füllen die Reihe. Jedes Fach rückt 3,4 % unter das nächste (dessen linker Pfosten deckt die Kante),
   am Reihenende ragt der Abschlusspfosten (4,2 % wie jeder Pfosten im Foto) 0,8 % über → Breite = n·0,966·b + 0,042·b */
.hr-plaetze{container-type:inline-size;--hf-b:calc(100cqw / 2.95)} /* cqw = Inhaltsbreite ohne Padding */
.hf-platz{display:flex;flex-direction:column;flex:0 0 auto;max-width:100%;margin-right:calc(var(--hf-b) * -.034)}
/* Die Breite eines Platzes geben allein seine Fächer vor (FR-428): Artikelbox, Merkmal- und Hinweiszeile tragen nichts zur
   Breite bei und brechen innerhalb um. Sonst machte eine lange Größen- oder Merkmalzeile den Platz breiter als sein Foto,
   und das nächste Fach der Reihe rückte mit einer Lücke nach rechts. */
.hf-platz > :not(.hf-buchten):not(.lp-marke){contain:inline-size} /* Fähnchen ausgenommen, sonst 16 px schmal (FR-480) */
.hf-buchten{display:flex;flex-wrap:wrap}
.hf-bucht{position:relative;flex:none;width:var(--hf-b);aspect-ratio:1;margin-right:calc(var(--hf-b) * -.034);background:#B07A45}
.hf-bucht:last-child{margin-right:0}
/* Abschlusspfosten: der linke Pfosten desselben Fotos, rechts angesetzt; das nächste Fach der Reihe liegt darüber */
.hf-pfosten{position:absolute;top:0;left:96.6%;width:4.2%;height:100%;object-fit:cover;object-position:0 0;pointer-events:none}
.hf-foto{display:block;width:100%;height:100%}
.hf-haengt,.hf-stapel{position:absolute;display:block;border-radius:4px;transition:box-shadow .18s ease}
.hf-haengt{left:6%;top:9%;width:56%;height:80%}
.hf-haengt:hover,.hf-haengt:focus-visible,.hf-stapel:hover,.hf-stapel:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 4px var(--orange);outline:none}
.hf-schild{width:auto;margin:12px calc(12px + var(--hf-b) * .034) 0 12px;text-decoration:none;color:#1F2B2A}
.hf-farbe{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px;margin-top:5px;font-size:11px;line-height:1.3;color:#5E6B69}
.hf-farbe b{font-weight:600;color:#1F2B2A;margin-right:4px}
.hf-groesse{padding:0 4px;border:1px solid #D8D3C8;border-radius:3px;font-variant-numeric:tabular-nums;color:#1F2B2A}
.hf-groesse.ap-treffer{background:var(--orange);border-color:var(--orange);color:#1F2B2A}
.hf-platz.sw-blass{opacity:.18}
@media(max-width:900px){.hr-plaetze{--hf-b:calc(100cqw / 1.98)}}
@media(max-width:600px){.hr-plaetze{--hf-b:calc(100cqw / 1.012)}}

/* „Hosen finden“ (Lars 18.10.2026, _hosenregal.php + hosenregal.js): kurzer Kopf, Wofür-Chips, klebende Leiste in Petrol mit
   „Größe finden“ und „Für“, Ergebniszeile, Größe in der Artikelbox, Sheet „Ihre Größe“. Farben nur aus den CI-Tokens:
   Petrol für Leiste und aktive Zustände, Orange für die eigene Größe und den einen Akzentknopf. Tippflächen mindestens 44 px. */
.hr-wand [hidden],.hr-ergebnis[hidden],.hr-ergebnis [hidden],.hr-leiste[hidden],.hr-leiste [hidden],.hr-sheet [hidden]{display:none!important}
.hr-kopf{margin:4px 0 14px}
.hr-kopf h1{font-size:34px;line-height:40px;letter-spacing:-.02em;margin:0}
.hr-unterzeile{margin:6px 0 0;font-size:17px;line-height:24px;color:var(--text-muted)}

/* Wofür: eine waagerecht wischbare Reihe, am Desktop umbrechend */
.hr-wofuer{margin:0 0 12px}
.hr-wofuer h2{margin:0 0 8px;font-size:16px;line-height:22px;font-weight:600;color:var(--text-strong)}
.hr-wofuer-reihe{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px;scroll-padding-inline:16px}
.hr-wofuer-reihe::-webkit-scrollbar{display:none}
.hr-wofuer-chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--weiss);
    color:var(--text-strong);font-size:15px;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hr-wofuer-chip:hover{border-color:var(--petrol)}
.hr-wofuer-chip .hr-zahl{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.hr-wofuer-chip[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:var(--weiss)}
.hr-wofuer-chip[aria-pressed="true"] .hr-zahl{color:#C9D9D6}
.hr-wofuer-chip--leer:not([aria-pressed="true"]){color:var(--text-muted);border-style:dashed}
.hr-wofuer-schuhe{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--link);white-space:nowrap;font-size:15px}
.hr-wofuer-chip:focus-visible,.hr-wofuer-schuhe:focus-visible,.hr-leiste button:focus-visible,.hr-link:focus-visible,.hr-knopf:focus-visible,.hr-passt-knopf:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media(min-width:901px){.hr-wofuer-reihe{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}

/* Klebende Leiste: unter dem Seitenkopf, mobil von Rand zu Rand */
.hr-leiste{position:sticky;top:var(--kopf);z-index:30;display:flex;align-items:center;gap:8px;min-height:56px;padding:6px 12px;margin:0 0 10px;
    background:var(--petrol);color:var(--weiss);box-shadow:0 8px 16px -10px rgba(14,39,37,.6)}
.hr-leiste button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hr-leiste-groesse{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:999px;
    background:var(--orange);color:#1F2B2A;font-weight:600;font-size:15px;text-align:left}
.hr-leiste-groesse [data-hr-groesse-text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-kurz-mini{display:none}
.hr-stift{display:none;flex:none}
.hr-leiste-groesse--an{background:var(--weiss);color:var(--petrol);box-shadow:inset 4px 0 0 var(--orange)}
.hr-leiste-groesse--an .hr-stift{display:inline}
.hr-fuer{flex:none;display:flex;align-items:center;padding:0 2px;border-radius:999px;background:rgba(255,255,255,.12)}
.hr-fuer-titel{padding:0 4px 0 10px;font-size:13px;color:#C9D9D6}
.hr-fuer button{min-height:44px;min-width:44px;padding:0 11px;border:0;border-radius:999px;background:none;color:var(--weiss);font-size:14px}
.hr-fuer button[aria-pressed="true"]{background:var(--weiss);color:var(--petrol);font-weight:600}
.hr-leiste-zurueck{flex:none;min-height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:none;color:var(--weiss);font-size:14px}
@media(min-width:901px){.hr-leiste{gap:12px}.hr-leiste-groesse{flex:0 1 auto;max-width:520px;padding:0 22px}.hr-wofuer-schuhe{padding:0 10px}}
@media(max-width:900px){.hr-leiste{margin:0 -16px 10px;padding:6px 16px}.hr-kopf h1{font-size:26px;line-height:32px}.hr-unterzeile{font-size:15px;line-height:21px}}
@media(max-width:420px){.hr-fuer-titel{display:none}.hr-leiste{gap:6px}.hr-leiste-groesse{padding:0 10px 0 12px;font-size:14px}
    .hr-leiste .hr-leiste-zurueck{width:44px;padding:0;font-size:0}.hr-leiste-zurueck::before{content:"×";font-size:22px;line-height:1}
    .hr-fuer button{font-size:13px;padding:0 8px}.hr-leiste .hr-praefix{display:none}
    /* Am Handy die Kurzform („80/76“, „L“, „Hose 45“) — die lange schnitte zu „Bauch …“ ab; der volle Satz steht in der Ergebniszeile */
    .hr-leiste .hr-kurz-voll{display:none}.hr-leiste .hr-kurz-mini{display:inline}}
@media(max-width:360px){.hr-leiste{gap:4px}.hr-leiste-groesse{padding:0 8px 0 10px}.hr-fuer button{padding:0 6px;min-width:40px}}

/* Ergebniszeile, Rechensatz, leerer Zustand, Sammelzeile */
.hr-ergebnis{margin:0 0 12px;scroll-margin-top:calc(var(--kopf) + 68px)}
.hr-treffer{margin:0;outline:none;font-size:16px;line-height:24px;color:var(--text-strong);font-variant-numeric:tabular-nums}
.hr-zahl-gross{display:inline-block;padding:0 4px;margin-left:-4px;border-radius:4px;font-size:19px;transition:background-color .6s ease}
.hr-blink{background:var(--orange);transition:none}
.hr-satz{margin:4px 0 0;font-size:14px;line-height:21px;color:var(--text-muted)}
.hr-link{font:inherit;display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;padding:0 4px;vertical-align:middle;border:0;background:none;color:var(--link);text-decoration:underline;cursor:pointer}
.hr-leer{margin-top:10px;padding:16px;background:var(--weiss);border:1px solid var(--border);border-top:3px solid var(--petrol)}
.hr-leer p{margin:0 0 10px}
.hr-leer-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.hr-knopf{font:inherit;font-size:15px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--petrol);background:var(--weiss);color:var(--petrol);cursor:pointer}
.hr-knopf:hover{background:var(--petrol-nebel)}
.hr-wand--leer{display:none}
.hr-ausgeblendet{margin:0;padding:6px 8px;font-size:14px;color:#C9D9D6}
.hr-ausgeblendet .hr-link{color:#F5A24B}
.hr-regal{scroll-margin-top:calc(var(--kopf) + 72px)}
@media(prefers-reduced-motion:reduce){.hr-zahl-gross{transition:none}}

/* Ihre Größe in der Artikelbox: hängt unten am Schild, eine Größenzeile und genau eine Statuszeile */
.hr-passt{margin:0 12px;padding:6px 9px 8px;background:#fff;border:1px solid #E2DED5;border-top:1px dashed #D8D3C8;font-size:13px;line-height:1.35;color:#1F2B2A}
.hf-platz > .hr-passt{margin:0 calc(12px + var(--hf-b) * .034) 0 12px}
.hr-passt p{margin:0}
.hr-passt-groesse b{padding:0 5px;border-radius:3px;background:var(--orange);color:#1F2B2A;font-variant-numeric:tabular-nums}
.hr-passt-groesse em{font-style:normal;color:#5E6B69}
.hr-passt-status{display:flex;align-items:center;gap:6px;margin-top:4px!important;color:#3B4746}
.hr-passt-status::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:2px solid #9AA5A3}
.hr-passt--laden .hr-passt-status{color:var(--petrol);font-weight:600}
.hr-passt--laden .hr-passt-status::before{background:var(--petrol);border-color:var(--petrol)}
.hr-passt--bestellbar .hr-passt-status::before{border-color:var(--petrol)}
.hr-passt--eigene_hose .hr-passt-status::before{display:none}
.hr-passt-knopf{font:inherit;min-height:44px;margin:-6px 0 -8px;padding:0;border:0;background:none;color:var(--link);text-decoration:underline;cursor:pointer;text-align:left}
.ps-raum .hr-passt{background:#0E0E0E;border-color:#2A2A2A;color:#fff}

/* Sheet „Ihre Größe“: mobil von unten, am Desktop mittig */
.hr-sheet{width:min(600px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:12px;background:var(--weiss);color:var(--text-strong);
    box-shadow:0 24px 60px -12px rgba(14,39,37,.55)}
.hr-sheet[open]{display:flex}
.hr-sheet::backdrop{background:rgba(14,39,37,.55)}
.hr-sheet-form{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.hr-sheet-kopf{display:flex;gap:12px;align-items:flex-start;padding:16px 16px 14px 20px;background:var(--petrol);color:var(--weiss)}
.hr-sheet-kopf h2{margin:0;font-size:19px;line-height:25px;font-weight:600;color:var(--weiss)}
.hr-sheet-kopf p{margin:4px 0 0;font-size:14px;line-height:20px;color:#C9D9D6}
.hr-sheet-zu{flex:none;width:44px;height:44px;margin:-6px -6px 0 auto;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:var(--weiss);font-size:24px;line-height:1;cursor:pointer}
.hr-sheet-inhalt{flex:1;min-height:0;overflow:auto;padding:14px 20px 8px;overscroll-behavior:contain}
.hr-sheet-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--weiss)}
.hr-sheet-fuss .ss-btn{min-height:48px;flex:1 1 220px}
.hr-sheet-fuss .hr-klein{margin:0}
.hr-sheet-satz{margin:0 0 12px;padding:10px 12px;background:var(--petrol-nebel);border-left:3px solid var(--orange);font-size:14px;line-height:20px}
.hr-klein{font-size:13px;line-height:19px;color:var(--text-muted);margin:6px 0 0}
.hr-sheet fieldset{margin:0 0 14px;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px}
.hr-sheet legend{width:100%;margin-bottom:8px;font-weight:600;font-size:15px}
.hr-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.hr-wege button{display:grid;gap:2px;align-content:center;min-height:64px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--weiss);
    color:var(--text-strong);font:inherit;text-align:left;cursor:pointer}
.hr-wege b{font-size:14px;line-height:18px;font-weight:600}
.hr-wege span{font-size:12px;line-height:16px;color:var(--text-muted)}
.hr-wege button[aria-pressed="true"]{border-color:var(--petrol);box-shadow:inset 0 0 0 1px var(--petrol);background:var(--petrol-nebel)}
.hr-reiter{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.hr-reiter button{min-height:44px;padding:0 12px;border:0;border-bottom:3px solid transparent;background:none;font:inherit;font-size:15px;color:var(--text-muted);cursor:pointer}
.hr-reiter button[aria-pressed="true"]{border-bottom-color:var(--petrol);color:var(--petrol);font-weight:600}
.hr-wege button:focus-visible,.hr-reiter button:focus-visible,.hr-sheet-zu:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.hr-wahlen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.hr-gruppe-titel{margin:4px 0 6px;font-size:13px;font-weight:600;color:var(--text-muted)}
.hr-wahl{position:relative;display:inline-flex}
.hr-wahl input{position:absolute;opacity:0;width:1px;height:1px}
.hr-wahl span{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:999px;
    font-size:15px;font-variant-numeric:tabular-nums;cursor:pointer}
.hr-wahl--breit span{min-width:110px}
.hr-wahl input:checked + span{background:var(--petrol);border-color:var(--petrol);color:var(--weiss);font-weight:600}
.hr-wahl input:focus-visible + span{outline:3px solid var(--orange);outline-offset:2px}
.hr-feld{margin-bottom:12px}
.hr-feld label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.hr-optional{font-weight:400;color:var(--text-muted)}
.hr-eingabe{display:inline-flex;align-items:center;gap:8px}
.hr-feld input,.hr-feld select{font:inherit;font-size:16px;height:44px;padding:0 10px;border:1px solid var(--border-strong);border-radius:6px;background:var(--weiss);color:var(--text-strong)}
.hr-feld input{width:96px}
.hr-jeans{display:flex;flex-wrap:wrap;gap:0 20px}
.hr-fehler{margin:8px 0 0;padding:8px 10px;border-left:3px solid #B3262B;background:#FBEDEE;color:#7A1A1E;font-size:14px}
@media(max-width:600px){
    .hr-sheet{width:100%;max-height:90dvh;margin:auto 0 0;border-radius:16px 16px 0 0}
    .hr-sheet-inhalt{padding:12px 16px 8px}.hr-sheet-kopf{padding:14px 12px 12px 16px}.hr-sheet-fuss{padding-left:16px;padding-right:16px}
    .hr-wege{gap:6px}.hr-wege button{padding:8px}.hr-wege b{font-size:13px;line-height:17px}
}

/* ── Stufe 2: Wünsche (Lars 18.10.2026) ─────────────────────────────────────────────────────────────────── */
.hr-leiste-wuensche{flex:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:var(--weiss);font-size:15px}
.hr-leiste-wuensche--an{background:var(--weiss);color:var(--petrol);font-weight:600}
.hr-wuensche-zahl:empty{display:none}
.hr-wuensche-zahl{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--orange);color:#1F2B2A;font-size:12px;line-height:20px;text-align:center;font-weight:700}
.hr-leiste-wuensche:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media(max-width:420px){.hr-leiste-wuensche{padding:0 10px;font-size:14px}}
@media(max-width:380px){.hr-leiste-wuensche{padding:0 8px;font-size:13px;gap:4px}}
.hr-wunsch-liste{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.hr-wunsch-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 12px;border:1px solid var(--petrol);border-radius:999px;background:var(--weiss);color:var(--petrol);font:inherit;font-size:14px;cursor:pointer}
.hr-wunsch-chip::after{content:"×";font-size:18px;line-height:1;color:#5E6B69}
.hr-wunsch-chip--nie{border-style:dashed}
.hr-wunsch-chip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.hr-wunsch-zeilen{display:grid;gap:2px}
.hr-wunsch-zeile{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.hr-wunsch-name{flex:1 1 auto;min-width:0;font-size:15px;line-height:20px}
.hr-wunsch-wahl{flex:none;display:grid;grid-template-columns:repeat(3,minmax(76px,auto));gap:4px}
.hr-wunsch-knopf{min-height:44px;padding:0 8px;border:1px solid var(--border-strong);border-radius:8px;background:var(--weiss);color:var(--text-strong);font:inherit;font-size:13px;cursor:pointer}
.hr-wunsch-knopf[aria-pressed="true"]{border-color:var(--petrol);background:var(--petrol);color:var(--weiss);font-weight:600}
.hr-wunsch-knopf--egal[aria-pressed="true"]{background:var(--petrol-nebel);color:var(--petrol)}
.hr-wunsch-knopf:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media(max-width:460px){.hr-wunsch-zeile{flex-wrap:wrap;gap:4px 10px}.hr-wunsch-name{flex-basis:100%}.hr-wunsch-wahl{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}}
.hr-merkmale{margin:0 12px;padding:5px 9px;background:#fff;border:1px solid #E2DED5;border-top:0;font-size:12.5px;line-height:1.35;color:#3B4746}
.hf-platz > .hr-merkmale,.hf-platz > .hr-ungeprueft{margin:0 calc(12px + var(--hf-b) * .034) 0 12px}
.hr-ungeprueft{margin:0 12px;padding:5px 9px;background:#FFF6EC;border:1px solid #F3D3AE;border-top:0;font-size:12.5px;line-height:1.35;color:#7A4A12}
.ps-raum .hr-merkmale{background:#0E0E0E;border-color:#2A2A2A;color:#ddd}
/* Schmale Schirme: Größe und Wünsche oben nebeneinander, darunter „Für“ und Zurücksetzen — einreihig wird „Größe finden“ zu „G…“ */
@media(max-width:560px){
    .hr-leiste{flex-wrap:wrap;row-gap:6px}
    .hr-leiste-groesse{order:1;flex:1 1 40%;justify-content:center}
    .hr-leiste-wuensche{order:2;flex:1 1 40%;justify-content:center}
    .hr-fuer{order:3;flex:1 1 auto;justify-content:space-between}
    .hr-fuer button{flex:1 1 0}
    .hr-leiste-zurueck{order:4}
    .hr-regal{scroll-margin-top:calc(var(--kopf) + 134px)}
}
/* Fachschild-Scan (?fach=): was in diesem Fach liegt */
.hr-fach-hinweis{margin:0 0 14px;padding:10px 14px;border-left:4px solid var(--orange);border-radius:6px;background:#FFF8F0;color:#1F2B2A;font-size:15px}
.hr-fach-hinweis a{margin-left:6px;white-space:nowrap}