/* APROPOS 2026, Von-bis-Regler im VIP Suchauftrag (Theme 0.1.40, 06.10.2026, Variante A nach Entscheidung von Baris, 0.1.41 ohne
   sichtbare Felder ab und bis).
   Lädt nur auf Seiten mit einem Formular mit Reglern (inc/kopf.php, APR_REGLER_ROUTEN). Ergänzt basis.css und unterseiten-v2.css,
   eigene Klassen stehen hier vollständig (die Theme-CSS wird beim Bau der Vorschau auf benutzte Klassen gekürzt).
   Design der Website: Plus Jakarta Sans aus basis.css, Frischgrün #2FBF5E nur als Füllung des gewählten Bereichs, Ränder und Fokus
   dunkel (#10301D), Spur #E3E1DC, Fehler #9A3412 wie .s-fehler, Platzhalter und Skala #6B6B6B (5,3 zu 1 auf Weiß), keine Schatten.
   Felder (nur noch ohne Skript sichtbar) so hoch wie alle Felder der Website (58 px aus .s-feld input), Griffe 24 px sichtbar (bis 0.1.41
   30 px) mit 48 px Trefferfläche.
   0.1.41 (Baris 06.10. abends): Mit Skript sind die Felder ab und bis unsichtbar (regler.js setzt type hidden, hidden an der Zeile und
   die Klasse mit-regler an der Gruppe). Eine Gruppe ist dann Überschrift, Anzeige, Regler und Skalenenden, der Hinweis steht direkt
   unter dem Regler. Abstand zwischen zwei Gruppen und zu den Feldern davor und danach ist der Abstand des Formulars (.s-form gap
   18 px wie zwischen allen Feldern, verglichen mit 28 px zwischen den Gruppen, das brach den Takt zum Feld danach), die Überschrift
   steht 8 px über der Anzeige wie jede Beschriftung über ihrem Feld. Gemessen 06.10.: Bereich der drei Gruppen 1440 px 716 auf 423,
   390 px 709 auf 416, 360 px 703 auf 410, 320 px 996 auf 404.
   Korrektur 0.1.41 nach der Prüfung: Fokusring auch nach einem Mausklick auf den Absendeknopf (Klasse fehlerfokus aus regler.js,
   gleicher Ring wie :focus-visible). Die halbe Pflichtwahl nutzt .s-regler-wert.leer (grau) und eine versteckte Füllung, dafür
   braucht es keine neue Regel.
   0.1.42 (Baris 07.10.2026 nach dem Test am iPhone): Griff sichtbar 24 px statt 30 px auf allen Breiten (Rand 2 px wie bisher, am Desktop
   mit der Maus genauso gut zu fassen, eine Größe für Desktop und Handy), Trefferfläche weiter 48 px, jetzt eckig (::before ohne Rundung),
   damit sie genau der Fläche entspricht, die regler.js als Griff zählt (griffBei, FLAECHE 24 px um die Mitte über die ganze Höhe der
   Bahn). Die Spur ist um den halben Griff eingerückt (12 px, RAND in regler.js), der Griff schließt links und rechts mit den Feldern ab.
   Griff und Trefferfläche haben touch-action none: Wer einen Griff anfasst, zieht ihn bis zum Loslassen, auch wenn der Finger etwas nach
   oben oder unten wandert, die Seite scrollt dabei nicht. Mit pan-y brach Safari auf dem iPhone das Ziehen sonst ab (pointercancel,
   WebKit-Fehler 203335, offen seit iOS 13). Die freie Bahn behält pan-y, dort scrollt senkrechtes Wischen die Seite wie bisher. */

/* Gruppe je Suchkriterium (fieldset aus apr_regler_gruppe), überschreibt .s-form fieldset und .s-form legend der Wertermittlung */
.s-form .s-bereich{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.s-form .s-bereich legend{float:none;width:auto;padding:0;margin:0 0 8px;font-size:14px;font-weight:500;letter-spacing:0;line-height:1.4;color:var(--text,#1B1B1B)}
.s-bereich .s-zeile{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.s-bereich .s-feld input{font-variant-numeric:tabular-nums}
.s-bereich .s-feld input::placeholder{color:#6B6B6B;opacity:1}
.s-bereich .s-feld input:focus-visible{outline:2px solid #10301D;outline-offset:1px;border-color:#10301D}
.s-bereich .s-feld input[aria-invalid="true"]{border-color:#9A3412}
.s-bereich [data-apr-stern][hidden]{display:none}
.s-bereich .s-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 0.1.41: Felder ab und bis mit Skript unsichtbar (.s-zeile und .s-feld sind sonst display grid), Sternchen an der Überschrift */
.s-bereich .s-zeile[hidden],.s-bereich .s-feld[hidden]{display:none}
.s-regler-stern[hidden]{display:none}

/* Anzeige des gewählten Bereichs, Bahn mit Spur, Füllung und zwei Griffen, Skalenenden (baut assets/js/regler.js) */
.s-regler{display:grid;gap:6px;min-width:0}
.s-regler-wert{margin:0;font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--text,#1B1B1B);min-height:27px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.s-regler-wert.leer{font-weight:400;color:#6B6B6B}
.s-regler-bahn{position:relative;height:48px;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.s-regler-spur{position:absolute;left:12px;right:12px;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:#E3E1DC;overflow:hidden}
.s-regler-fuellung{position:absolute;top:0;bottom:0;left:calc(var(--von,0) * 100%);right:calc((1 - var(--bis,1)) * 100%);background:#2FBF5E}
.s-regler-fuellung[hidden]{display:none}
.s-regler-griff{position:absolute;top:50%;left:calc(12px + (100% - 24px) * var(--p,0));width:24px;height:24px;margin:-12px 0 0 -12px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid #10301D;touch-action:none;cursor:grab;outline:none;z-index:1}
.s-regler-griff::before{content:"";position:absolute;inset:-14px;touch-action:none}   /* 0.1.42: vom Innenrand aus (20 px), ergibt 48 px Trefferfläche, eckig wie griffBei in regler.js */
.s-regler-griff.oben{z-index:2}
.s-regler-griff.zieht{cursor:grabbing;background:#E7F2E3}
.s-regler-griff:focus-visible{outline:2px solid #10301D;outline-offset:3px}
.s-regler-griff.zeiger:focus-visible{outline:none}   /* Fokus durch Maus oder Finger (regler.js), mit Tab und Tasten bleibt der Ring */
.s-regler-griff.fehlerfokus:focus{outline:2px solid #10301D;outline-offset:3px}   /* Fokus nach einem Sendeversuch, auch nach Mausklick (regler.js) */
.s-regler-griff.offen{border:2px dashed #6B6B6B}
.s-bereich.fehler .s-regler-griff.offen,.s-regler-griff[aria-invalid="true"]{border-color:#9A3412}
.s-regler-skala{display:flex;justify-content:space-between;gap:12px;margin-top:-4px;font-size:13px;line-height:1.4;color:#6B6B6B}
.s-regler-skala span:last-child{text-align:right}
.s-regler-hinweis{margin:0;font-size:14px;line-height:1.45;color:#6B6B6B}
.s-regler-hinweis[hidden]{display:none}
.s-regler-hinweis.rot{color:#9A3412;font-weight:500}

/* Die Anzeige bleibt auch am kleinen Handy einzeilig, sonst springt die Höhe beim Ziehen (gemessen: längster Text
   „Bitte wählen Sie die Wohnfläche“ 280 px bei 19 px Schrift, Platz 296 px bei 390, 266 px bei 360, 238 px bei 320).
   Korrektur 0.1.42 nach der Prüfung (07.10.2026): Bis 0.1.42 machte der Absendeknopf das Formular bei 320 px 12 px zu breit, die 238 px
   waren zu viel. Richtig sind 226 px bei 320 (Platz gleich Breite minus 94 px). Gemessen 07.10. mit Plus Jakarta Sans 400: der längste Text
   braucht 251 px bei 17 px, 236 px bei 16 px, 221 px bei 15 px. Daraus 17 px ab 346 px Breite, 16 px von 335 bis 345, 15 px bis 334
   (vorher 16 px erst bis 339, bei 340 bis 345 brach der längste Text schon um). */
@media (max-width:640px){
  .s-regler-wert{font-size:19px;min-height:25px}
}
@media (max-width:379px){
  .s-regler-wert{font-size:17px;min-height:23px}
}
@media (min-width:360px) and (max-width:399px){
  .s-bereich .s-feld input{padding:0 14px}   /* zwei Felder nebeneinander, sonst 18 px wie alle Felder der Website */
}
@media (max-width:359px){
  .s-bereich .s-zeile{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:345px){
  .s-regler-wert{font-size:16px;min-height:21px}   /* Prüfung 06.10.: 16 px statt 17 px, Korrektur 0.1.42 schon ab 345 px (vorher 339) */
}
@media (max-width:334px){
  .s-regler-wert{font-size:15px;min-height:20px}   /* Korrektur 0.1.42: bei 320 px sind es 226 px Platz, 16 px braucht 236 px */
}
@media (forced-colors:active){
  .s-regler-spur{background:GrayText}
  .s-regler-fuellung{background:Highlight}
  .s-regler-griff{background:Canvas;border-color:ButtonText}
  .s-regler-griff:focus-visible,.s-regler-griff.fehlerfokus:focus{outline-color:Highlight}
}