/* Deutlich sichtbare Auswahl auf den Kursseiten (Wunsch der Kundin 01.10.2026, iPad/Touch).
   Bisher war nur bei Hochzeit ein schwacher Rahmen zu sehen, und der sah aus wie die
   Hervorhebung "Beliebteste Wahl". Jetzt gilt auf allen Kursseiten dasselbe:
   gewaehlte Karte = kraeftiger roter Rahmen + Schild "Ausgewaehlt", die anderen treten
   zurueck. Funktioniert ohne Hover, also auch per Fingertipp.
   Karten: .kk (Kinder/Jugend), .stufe/.technik mit .st-btn (Paartanz, Solo, 50+, Training),
   .tariff (Hochzeit, Privat). */

.kk[aria-expanded="true"],
.stufe:has(.st-btn[aria-expanded="true"]),
.technik:has(.st-btn[aria-expanded="true"]),
.stufe.md-gewaehlt,.technik.md-gewaehlt,
.tariff[aria-expanded="true"]{
  position:relative;
  border-color:var(--accent)!important;
  box-shadow:0 0 0 2px var(--accent),0 18px 48px -18px rgba(225,29,42,.55)!important;
  transform:translateY(-3px);
  opacity:1!important;
}
/* Schild oben rechts */
.kk[aria-expanded="true"]::after,
.stufe:has(.st-btn[aria-expanded="true"])::after,
.stufe.md-gewaehlt::after,.technik.md-gewaehlt::after,
.technik:has(.st-btn[aria-expanded="true"])::after,
.tariff[aria-expanded="true"]::after{
  content:"\2713  Ausgewählt";
  position:absolute;top:12px;right:12px;z-index:3;
  padding:5px 11px;border-radius:999px;
  background:var(--accent);color:#fff;
  font:700 11px/1.2 var(--sans,system-ui);letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 6px 18px -6px rgba(225,29,42,.7);
  pointer-events:none;
}
/* Hochzeit: Schild "Beliebteste Wahl" sitzt oben mittig, darum kein Konflikt; bei der
   gewaehlten Karte das Ausgewaehlt-Schild unter den oberen Rand ruecken */
.tariff.best[aria-expanded="true"]::after{top:22px}

/* Die nicht gewaehlten Karten derselben Gruppe treten zurueck */
.kk-grid:has(.kk[aria-expanded="true"]) .kk:not([aria-expanded="true"]),
.stufen:has(.st-btn[aria-expanded="true"]) .stufe:not(:has(.st-btn[aria-expanded="true"])),
.stufen:has(.md-gewaehlt) .stufe:not(.md-gewaehlt),
.tariffs:has(.tariff[aria-expanded="true"]) .tariff:not([aria-expanded="true"]){
  opacity:.5;
}
/* "Beliebteste Wahl" soll nicht wie ausgewaehlt aussehen, wenn eine andere Karte gewaehlt ist */
.tariffs:has(.tariff[aria-expanded="true"]) .tariff.best:not([aria-expanded="true"]){
  border-color:var(--line)!important;background:var(--surface)!important;
}

/* Der gedrueckte Knopf in der Karte: gefuellt mit Haken */
.st-btn[aria-expanded="true"]{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.st-btn[aria-expanded="true"]::before{content:"\2713\00a0"}

@media (prefers-reduced-motion:reduce){
  .kk[aria-expanded="true"],.stufe:has(.st-btn[aria-expanded="true"]),
  .technik:has(.st-btn[aria-expanded="true"]),.tariff[aria-expanded="true"]{transform:none}
}

/* Karte angetippt, aber noch kein Knopf gewaehlt: Knoepfe pulsieren kurz als Hinweis */
.stufe.md-gewaehlt .st-btn,.technik.md-gewaehlt .st-btn{border-color:var(--accent)!important;animation:md-tipp 1.4s cubic-bezier(.22,.61,.36,1) 2}
@keyframes md-tipp{0%,100%{box-shadow:0 0 0 0 rgba(225,29,42,0)}40%{box-shadow:0 0 0 5px rgba(225,29,42,.35)}}
.stufe,.technik{cursor:pointer}
@media (prefers-reduced-motion:reduce){.stufe.md-gewaehlt .st-btn,.technik.md-gewaehlt .st-btn{animation:none}}

/* Probestunden-Seite: gewaehlter Bereich (Kachel oben) und gewaehlte Kurszeile */
.pb-grid .cc.md-gewaehlt,
.pb-item:has([data-probe][aria-expanded="true"]) .pb-row{
  position:relative;border-color:var(--accent)!important;
  box-shadow:0 0 0 2px var(--accent),0 18px 48px -18px rgba(225,29,42,.55)!important;opacity:1!important}
.pb-grid .cc.md-gewaehlt::after,
.pb-item:has([data-probe][aria-expanded="true"]) .pb-row::after{
  content:"\2713  Ausgewählt";position:absolute;top:12px;right:12px;z-index:3;padding:5px 11px;border-radius:999px;
  background:var(--accent);color:#fff;font:700 11px/1.2 var(--sans,system-ui);letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 6px 18px -6px rgba(225,29,42,.7);pointer-events:none}
.pb-item:has([data-probe][aria-expanded="true"]) .pb-row::after{top:-11px;right:22px}
.pb-grid:has(.md-gewaehlt) .cc:not(.md-gewaehlt){opacity:.5}
.pb-rows:has([data-probe][aria-expanded="true"]) .pb-item:not(:has([aria-expanded="true"])) .pb-row{opacity:.5}