/* bl-select.css — Styling für das Custom-Bundesland-Dropdown (bl-select.js). * Nutzt die in den einzelnen HTML-Seiten definierten CSS-Variablen * (--card, --line, --ink, --muted, --accent, --faint) mit Fallbacks. */ .bl-combo { position: relative; display: inline-block; vertical-align: middle; } .bl-combo.full { display: block; width: 100%; } .bl-combo.full .bl-combo-btn { width: 100%; } .bl-combo-btn { display: inline-flex; align-items: center; gap: .4em; padding: .38em .55em; font: inherit; font-size: .95em; color: var(--ink, #eceae0); background: var(--surface, var(--card, #171d12)); border: 1px solid var(--line2, var(--line, #2b3626)); border-radius: 6px; cursor: pointer; line-height: 1.2; min-height: 32px; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; text-align: left; touch-action: manipulation; /* kein 300-ms-Warten auf einen Doppeltipp */ } .bl-combo-btn:hover { border-color: var(--accent, #7fa869); } .bl-combo-btn:focus-visible { outline: 2px solid var(--accent, #7fa869); outline-offset: 1px; } .bl-combo-btn[aria-expanded="true"] { border-color: var(--accent, #7fa869); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #7fa869) 35%, transparent); } .bl-combo-btn .bl-wappen { width: 18px; height: 14px; object-fit: contain; flex: 0 0 auto; border-radius: 2px; } .bl-combo-btn .bl-combo-label { flex: 1 1 auto; white-space: nowrap; } .bl-combo-btn .bl-combo-caret { flex: 0 0 auto; width: 10px; height: 10px; opacity: .65; transition: transform .15s; } .bl-combo-btn[aria-expanded="true"] .bl-combo-caret { transform: rotate(180deg); } .bl-combo-list { position: absolute; top: calc(100% + 2px); left: 0; min-width: 100%; max-width: 92vw; min-width: max-content; max-height: min(320px, 60vh); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; background: var(--surface, var(--card, #171d12)); border: 1px solid var(--line2, var(--line, #2b3626)); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 9001; } .bl-combo-list[hidden] { display: none; } .bl-combo-opt { display: flex; align-items: center; gap: .55em; padding: .42em .55em; border-radius: 4px; cursor: pointer; color: var(--ink, #eceae0); font-size: .94em; line-height: 1.2; min-height: 32px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .bl-combo-opt .bl-wappen { width: 20px; height: 15px; object-fit: contain; flex: 0 0 auto; border-radius: 2px; } .bl-combo-opt .bl-combo-opt-label { flex: 1 1 auto; } .bl-combo-opt:hover, .bl-combo-opt[aria-selected="true"]:focus, .bl-combo-opt.is-active { background: var(--line-soft, rgba(210,224,196,.06)); } .bl-combo-opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent, #7fa869) 18%, transparent); font-weight: 500; } /* Wenn der Button "mini" rendern soll (z.B. Planer inline) */ .bl-combo.mini .bl-combo-btn { padding: .22em .42em; font-size: .85em; min-height: 26px; } .bl-combo.mini .bl-combo-btn .bl-wappen { width: 15px; height: 12px; } .bl-combo.mini .bl-combo-list { max-height: 280px; } /* Große Variante (z.B. Onboarding/Funnel) */ .bl-combo.large .bl-combo-btn { padding: .65em .8em; font-size: 1.05em; min-height: 44px; width: 100%; } .bl-combo.large .bl-combo-btn .bl-wappen { width: 24px; height: 18px; } .bl-combo.large .bl-combo-list { width: 100%; } @media (max-width: 540px) { .bl-combo-opt { min-height: 40px; font-size: 1em; } .bl-combo-btn { min-height: 38px; } } /* ─── Bottom-Sheet am Handy (≤640px, seit 29.07.2026) ───────────────────────── Das absolut positionierte Popover war am Smartphone unbenutzbar: 9 Optionen à 40px ≈ 368px passen nicht in die 320px-Liste, und in onboarding.html steckt das Dropdown in `.over .bx{overflow-y:auto}` — die Liste wurde schlicht abgeschnitten, Steiermark bis Wien waren nie erreichbar. Die Klasse sitzt auf der LISTE, nicht als Nachfahren-Selektor unter .bl-combo: bl-select.js hängt die Liste im Sheet-Modus an den um. Das muss sein, weil .over und .over .bx backdrop-filter haben — das erzeugt einen Containing-Block, in dem sich position:fixed an der Box statt am Viewport ausrichtet und wieder in derselben Falle säße. Alle Maße hier stehen deshalb ohne Elternkontext. */ .bl-combo-backdrop { position: fixed; inset: 0; z-index: 100001; background: rgba(6,9,14,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .bl-combo-list.bl-combo-sheet { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; min-width: 0; max-width: none; max-height: 70vh; z-index: 100002; margin: 0; padding: 26px 10px max(10px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: 0 -10px 32px rgba(0,0,0,.62); } /* Griffbalken wie beim Marker-Sheet und beim HUD — gleiche Formsprache. Bewusst als Hintergrund-Layer und NICHT als ::before: die Liste ist hier selbst der Scroll-Container, ein absolut positioniertes Pseudoelement würde beim Wischen nach oben aus dem Bild laufen. background-attachment bleibt auf `scroll` (Default) — das heftet den Layer an die Border-Box des Elements, nicht an den Inhalt. */ .bl-combo-list.bl-combo-sheet { background-image: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.32)); background-repeat: no-repeat; background-size: 56px 5px; background-position: center 10px; } .bl-combo-list.bl-combo-sheet .bl-combo-opt { min-height: 48px; font-size: 1.02em; padding: .5em .7em; } /* Wappen inline in Text (z.B. setBlInfo-Infozeile, Jagdjahr-Radio-Labels, * Schusszeiten-Admin-Tabelle, Schusszeiten-Popup-Summary). * Höhe fix, Breite auto via object-fit, vertical-align auf Textmitte. */ img.bl-wappen, img.bl-wappen-inline { display: inline-block; vertical-align: -0.18em; object-fit: contain; border-radius: 2px; } img.bl-wappen-inline { width: 14px; height: 11px; margin: 0 2px 0 0; } .bl-wappen-inline + .bl-wappen-inline { margin-left: 4px; }