/* ============================================================================
   kw-pills.css — KÜSTENWERK Pillen-System "Glas & Gold"
   Gegenstück zu kw-buttons.css (.kwb). Stand 25.07.2026 — live.

   AUFBAU
   Basis      .kwp                       Voll-Pille, Glas, feiner Rand, 24 px
   Farbe      --gold --gruen --rot --blau   (ohne Zusatz = neutral)
   Form       --kreis --rondell --plakette --kicker
   Größe      --klein (20) --gross (30)   (ohne Zusatz = 24)
   Extras     --zahl --puls --sticker  +  Kind <span class="dot">
   ============================================================================ */

.kwp{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  box-sizing:border-box; height:24px; padding:0 12px; border-radius:999px;
  font:600 11.5px/1 "Poppins",system-ui,sans-serif; letter-spacing:.02em;
  white-space:nowrap; vertical-align:middle;
  color:rgba(238,240,243,.82);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- Farben: getönte Glasfläche + leuchtende Schrift ---- */
.kwp--gold{ color:#ffd347; border-color:rgba(255,195,0,.55);
  background:linear-gradient(180deg,rgba(255,195,0,.16),rgba(255,195,0,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 12px rgba(255,195,0,.10) }
.kwp--gruen{ color:#43e07c; border-color:rgba(40,216,98,.50);
  background:linear-gradient(180deg,rgba(40,216,98,.15),rgba(40,216,98,.05)) }
.kwp--rot{ color:#ff6b6d; border-color:rgba(255,77,79,.50);
  background:linear-gradient(180deg,rgba(255,45,45,.15),rgba(255,45,45,.05)) }
.kwp--blau{ color:#63b3ff; border-color:rgba(77,163,255,.45);
  background:linear-gradient(180deg,rgba(77,163,255,.14),rgba(77,163,255,.05)) }

/* ---- Status-Punkt ---- */
.kwp .dot{ width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 8px currentColor; flex:none }
.kwp--puls .dot{ animation:kwpPuls 1.2s ease-in-out infinite }
@keyframes kwpPuls{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce){ .kwp--puls .dot{ animation:none } }

/* ---- Größen ---- */
.kwp--klein{ height:20px; padding:0 9px; font-size:10.5px; gap:6px }
.kwp--klein .dot{ width:6px; height:6px }
.kwp--gross{ height:30px; padding:0 15px; font-size:13px }

/* ---- Formen ---- */
.kwp--zahl{ min-width:24px; padding:0 7px }
.kwp--klein.kwp--zahl{ min-width:20px; padding:0 6px }

.kwp--kreis{ width:32px; height:32px; padding:0; border-radius:50%; font-size:12.5px }
.kwp--kreis.kwp--klein{ width:26px; height:26px; font-size:11px }
.kwp--kreis.kwp--gross{ width:40px; height:40px; font-size:15px }

/* Rondell = großer Erfolg-/Fehler-Kreis (Bestätigungsseiten, Häkchen) */
.kwp--rondell{ width:72px; height:72px; padding:0; border-radius:50%;
  font-size:30px; font-weight:400; letter-spacing:0 }

/* Plakette = eckige Variante (Racing-Kontexte, technische Labels) */
.kwp--plakette{ border-radius:8px; font-weight:700; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase }
.kwp--plakette .dot{ border-radius:2px; box-shadow:none }

/* Kicker = reines Text-Label, kein Pillenkörper */
.kwp--kicker{ height:auto; padding:0; background:none; border:0; box-shadow:none;
  color:#ffc300; font-weight:600; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase }

/* Sticker = Ecklabel, liegt absolut auf einer Karte/Bild */
.kwp--sticker{ position:absolute; top:12px; right:12px; z-index:2 }

/* ---- Zahl IN der Pille (Schrittanzeige) ----
   Ein kleiner getönter Kreis am linken Pillenrand, statt eines zweiten Elements daneben. */
.kwp .kwp-num{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:17px; height:17px; margin:0 2px 0 -8px; border-radius:50%;   /* sitzt bündig in der Ecke */
  background:rgba(255,255,255,.14); color:inherit;
  font-size:10.5px; font-weight:700; line-height:1;
}
.kwp--gold .kwp-num{ background:rgba(255,195,0,.28) }
.kwp--gruen .kwp-num{ background:rgba(40,216,98,.28) }
.kwp--rot .kwp-num{ background:rgba(255,77,79,.28) }
.kwp--blau .kwp-num{ background:rgba(77,163,255,.28) }
.kwp--gross .kwp-num{ width:20px; height:20px; margin:0 3px 0 -10px; font-size:12px }
.kwp--klein .kwp-num{ width:14px; height:14px; margin:0 1px 0 -6px; font-size:9.5px }

/* ---- Zweifarbig: gedämpftes Vorwort in der Pille ---- */
.kwp .kwp-mut{ color:rgba(255,255,255,.55); font-weight:500 }

/* ---- XL: höhere Hero-Fassung (Buchungsnummer u. Ä.) ---- */
.kwp--xl{ height:38px; padding:0 18px; font-size:15px; letter-spacing:.06em }

/* ---- Kontextregeln (enge Container, analog zu `dialog .kwb`) ----
   Race-HUD ist nur 120 px breit: Standard-Padding würde die drei Sektor-Chips überlaufen
   lassen (gemessen 111 px statt 100). Mit flex:1 sitzen sie exakt wie die alten .fe-sec. */
.fe-hud-sectors .kwp{ flex:1; min-width:0; padding:0 2px; letter-spacing:.06em }

/* ---- Zustände ---- */
.kwp[hidden]{ display:none }
.kwp:disabled,.kwp[aria-disabled="true"]{ opacity:.45 }