/* Marken-/Modellauswahl (10.11.2026, dritte Fassung): schlicht nach der
   Vorlage des Inhabers -- Titel, x, Suchfeld, Liste mit grauen
   Buchstabenueberschriften, rechts alle Buchstaben, der aktuelle gruen.
   Verhalten in /js/ksa-combo.js. Telefon (<= 640 px): Vollbild. */
.kmw-root { position: fixed; inset: 0; z-index: 10000; display: none; }
.kmw-root.is-open { display: block; }
.kmw-back { position: absolute; inset: 0; background: rgba(15, 18, 22, .45); }

.kmw {
    --kmw-green: #006C35;
    --kmw-ink: #1b1b21;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 64px));
    display: flex; flex-direction: column;
    background: #fff; color: var(--kmw-ink);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
    font: inherit; font-size: 15px; line-height: 1.35;
    overflow: hidden; outline: 0;
}

/* Kopf: Titel + x, darunter das Suchfeld */
.kmw-top { flex: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 8px; padding: 18px 20px 10px; }
.kmw-title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.kmw-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #6b7079; cursor: pointer; }
.kmw-x:hover { color: var(--kmw-ink); background: #f2f4f7; }
.kmw-x:focus-visible { outline: 2px solid var(--kmw-green); outline-offset: 1px; }
.kmw-search { grid-column: 1 / -1; display: flex; align-items: center; height: 46px; padding-inline: 14px 6px; border: 1px solid #d5dae0; border-radius: 10px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.kmw-search:focus-within { border-color: var(--kmw-green); box-shadow: 0 0 0 3px rgba(0, 108, 53, .18); }
.kmw-search svg { display: none; }
.kmw-q { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--kmw-ink); font: inherit; font-size: 16px; }
.kmw-q::placeholder { color: #9ea4ad; }
.kmw-q::-webkit-search-cancel-button { display: none; }
.kmw-clear { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #6b7079; font-size: 20px; line-height: 1; cursor: pointer; }

/* Liste */
.kmw-body { position: relative; flex: 1; min-height: 0; display: flex; }
.kmw-list { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 16px; -webkit-overflow-scrolling: touch; }
.kmw.has-rail .kmw-list { padding-inline-end: 44px; }
.kmw-sec { padding: 4px 0 6px; }
.kmw-h {
    position: sticky; top: 0; z-index: 1;
    padding: 10px 0 6px; background: #fff;
    border-bottom: 1px solid #e3e7ec;
    font-size: 13px; line-height: 18px; font-weight: 600; color: #9ea4ad;
}
.kmw-o { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 15px; -webkit-tap-highlight-color: transparent; }
.kmw-o span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmw-o:hover span, .kmw-o.is-act span { color: var(--kmw-green); }
.kmw-o.is-cur { color: var(--kmw-green); font-weight: 700; }
.kmw-tick { flex: none; color: var(--kmw-green); }
.kmw-o--reset { color: #6b7079; }
.kmw-sep { height: 1px; margin: 8px 0 2px; background: #e3e7ec; }
.kmw-none { padding: 40px 0; text-align: center; color: #6b7079; }

/* Buchstabenleiste: alle Buchstaben, der aktuelle gruen hinterlegt */
.kmw-rail {
    --kmw-row: 18px;
    position: absolute; inset-block: 6px 10px; inset-inline-end: 8px; z-index: 3;
    width: 26px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    touch-action: none; user-select: none; -webkit-user-select: none;
}
.kmw-rail:empty { display: none; }
.kmw-rail button {
    display: grid; place-items: center; flex: none; width: 22px; height: var(--kmw-row); padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--kmw-ink); cursor: pointer;
    font: inherit; font-size: min(12px, calc(var(--kmw-row) - 5px)); line-height: 1; font-weight: 700;
}
.kmw-rail button.is-cur { background: var(--kmw-green); color: #fff; }
.kmw-rail button:focus-visible { outline: 2px solid var(--kmw-green); outline-offset: 0; }
.kmw.is-searching .kmw-rail { display: none; }

html.kmw-lock, html.kmw-lock body { overflow: hidden; }

@media (max-width: 640px) {
    .kmw { top: 0; left: 0; transform: none; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
    .kmw-top { padding: max(14px, env(safe-area-inset-top)) 16px 10px; }
    .kmw-list { padding: 0 16px max(16px, env(safe-area-inset-bottom)); }
    .kmw.has-rail .kmw-list { padding-inline-end: 40px; }
    .kmw-o { min-height: 48px; font-size: 16px; }
    .kmw-rail { inset-inline-end: 4px; }
}

/* Leiste: Hover zeigt, welcher Buchstabe angesprungen wird */
@media (hover: hover) {
    .kmw-rail button:hover:not(.is-cur) { background: #e3f1e8; color: var(--kmw-green); }
}

/* Telefon: Dropdown am Feld statt Vollbild (10.11.2026). Keine Abdunkelung,
   keine Scroll-Sperre; Lage und Groesse setzt ksa-combo.js (place()). */
.kmw-root.is-pop { pointer-events: none; }
.kmw-root.is-pop .kmw-back { display: none; }
.kmw-root.is-pop .kmw {
    position: fixed; transform: none; pointer-events: auto;
    border-radius: 14px; border: 1px solid #e4e4e7;
    box-shadow: 0 16px 40px rgba(15, 18, 22, .22), 0 2px 6px rgba(15, 18, 22, .08);
}
/* Kein Titel im Dropdown -- das Feldetikett steht direkt darueber; x neben die Suche. */
.kmw-root.is-pop .kmw-top { padding: 10px 10px 6px 12px; gap: 6px; }
.kmw-root.is-pop .kmw-title { display: none; }
.kmw-root.is-pop .kmw-search { order: -1; grid-column: 1; }
.kmw-root.is-pop .kmw-x { width: 36px; height: 36px; }
.kmw-root.is-pop .kmw-search { height: 42px; }
.kmw-root.is-pop .kmw-list { padding: 0 14px 10px; }
.kmw-root.is-pop .kmw.has-rail .kmw-list { padding-inline-end: 38px; }
.kmw-root.is-pop .kmw-o { min-height: 44px; padding: 8px 0; font-size: 15px; }
.kmw.rail-off .kmw-rail { display: none; }
.kmw.rail-off.has-rail .kmw-list, .kmw-root.is-pop .kmw.rail-off.has-rail .kmw-list { padding-inline-end: 14px; }