/* =========================================================================
   Buchstabenwahl im Plattenfilter (.klp-) — 12.10.2026

   Siebzehn Knoepfe statt blossem Raten. Wer nicht weiss, dass ص der Code X ist,
   kommt trotzdem ans Ziel, und ein Tippfehler ist ausgeschlossen. Das Textfeld
   bleibt die einzige Quelle: ein Knopf schreibt hinein, das Feld bleibt frei
   bedienbar, beide koennen deshalb nicht auseinanderlaufen.

   Die Knoepfe sitzen auf der dunkelgruenen Filterflaeche, deshalb Weiss auf
   Weiss-Transparenz statt eigener Farben. Reines CSS mit eigenem Namensraum —
   das Tailwind-Bundle ist seit dem 23.08. eingefroren.
   ========================================================================= */

.klp {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.klp-b {
    flex: 0 0 auto;
    min-width: 46px;
    padding: 5px 8px 4px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.klp-b:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
.klp-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Angetippt: gefuellt, damit der Zustand auch ohne Farbe erkennbar bleibt. */
.klp-b[aria-pressed="true"] {
    background: #fff;
    border-color: #fff;
    color: #006C35;
    transform: translateY(-1px);
}

.klp-ar { display: block; font-size: 17px; font-weight: 700; }
.klp-la { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; opacity: .7; margin-top: 2px; }
.klp-b[aria-pressed="true"] .klp-la { opacity: .85; }

/* Rueckmeldung unter dem Feld: was verstanden wurde, und was nicht. */
.klp-info { margin-top: 8px; font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, .72); }
.klp-info strong { color: #fff; font-weight: 700; }
.klp-warn { margin-top: 6px; font-size: 12px; line-height: 18px; color: #FFD9D9; }
.klp-warn i { margin-inline-end: 5px; }

/* Die Trefferzahl direkt am Filter — damit man beim Tippen sieht, dass sich
   etwas bewegt, ohne erst zu den Ergebnissen zu scrollen. */
.klp-count { margin-top: 10px; text-align: center; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .8); }
.klp-count strong { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
    .klp-b { min-width: 42px; padding: 4px 6px 3px; }
    .klp-ar { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .klp-b, .klp-b:hover, .klp-b[aria-pressed="true"] { transition: none; transform: none; }
}

/* Das Buchstabenfeld samt Knoepfen nimmt beide Rasterspalten ein.
   NICHT mit `sm:col-span-2` — die Klasse ist im eingefrorenen Tailwind-Bundle
   gar nicht enthalten (nur das unpraefigierte `col-span-2`), sie tut also
   stillschweigend nichts. Geprueft am gebauten CSS, nicht vermutet. */
@media (min-width: 640px) {
    .klp-breit { grid-column: span 2 / span 2; }
}

/* ===================================================== Grenze: drei Buchstaben
   Ein saudisches Kennzeichen traegt hoechstens drei Buchstaben (am Bestand
   geprueft: Maximum 3 ueber alle 12.696 Zeilen). Sind drei gewaehlt, werden die
   uebrigen vierzehn stumpf und nehmen keinen Klick mehr an — die Grenze ist
   sichtbar, bevor man dagegen laeuft. Die gewaehlten bleiben bedienbar, sonst
   kaeme man nicht mehr heraus. */
/* Kein gesperrter Zustand mehr (Inhaber, 12.10.2026): ein toter Klick erklaert
   nichts. Der vierte Knopf nimmt den Klick an, wird abgelehnt und WACKELT —
   dazu der rote Hinweis darunter. Nach dem Muster von .kw-shake im
   Fahrzeug-Assistenten. */
@keyframes klp-shake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-5px); }
    30%, 60%, 90% { transform: translateX(5px); }
}
.klp-shake {
    animation: klp-shake .55s ease-in-out;
    border-color: #FF6B5E !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 94, .32);
}
@media (prefers-reduced-motion: reduce) {
    /* Ohne Bewegung traegt der Text allein — der Ring bleibt, damit ueberhaupt
       etwas zu sehen ist. */
    .klp-shake { animation: none; }
}

/* Der stille Zaehler in der Hinweiszeile: die Grenze sehen, bevor man dagegen
   laeuft, ohne dass etwas gesperrt aussieht. */
.klp-zahl {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Das kleine x sitzt IM Feld und raeumt nur die Buchstaben. "Clear all" liegt
   bewusst weit weg von den Knoepfen — danach zu greifen hiess bisher, auf ein
   Kennzeichen zu tippen. */
.klp-feld { position: relative; }
.klp-x {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 17px; line-height: 1;
    cursor: pointer;
    transition: background-color .14s ease;
}
.klp-x:hover { background: rgba(255, 255, 255, .3); }
.klp-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Zuruecksetzen bei der Trefferzahl, mit echtem Abstand nach oben. */
.klp-reset {
    display: inline-flex; align-items: center; gap: 5px;
    margin-inline-start: 14px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    font-size: 12px; font-weight: 600; line-height: 18px;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.klp-reset:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .55); }
.klp-reset:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.klp-reset i { font-size: 10px; }