/* coaching-pille.css — Coaching-Pille unten rechts. Quelle: docs/neueIdeen/v07-coaching-pille/coaching-pille.css (Export «Edumod HP v07_Pille
   unten re_ 1zu1», 2026-10-18); lädt nur, wenn inc/coaching-pille.php die Pille ausgibt. Beauftragte neue Komponente ausserhalb des Designs v07
   (User 2026-10-18), nur Tokens aus CORPORATE-DESIGN §7 und bestehende Klassen (.btn, .btn-primary, .eyebrow, .link-arrow).
   Abweichungen vom Export, je mit Grund:
   1 z-index 190 statt 250: unter dem Header (200), sonst schwebte die Pille über dem offenen Burger-Menü.
   2 Tastatur-Fokus zeigt die ausgeblendete Pille (Muster Skip-Link; User 2026-10-18), sonst wäre sie per Tab unsichtbar erreichbar. Genau
     :has(:focus-visible), NICHT :focus-within: ein Mausklick lässt den Fokus auf dem Button, die Pille bliebe dann über Formular und Footer stehen
     (gemessen 2026-10-18, alle sechs Breiten). Dazu gibt coaching-pille.js den Fokus nach einem Zeiger-Klick ab: in Chromium machte sonst schon
     der nächste Tastendruck den Mausfokus «focus-visible».
   3 Puls dreimal nach jedem Einblenden statt endlos (User 2026-10-18).
   4 Farben über color-mix aus --accent und --petrol statt fester rgba-Werte (gleiche Töne, ziehen mit den Tokens mit).
   5 Bewegung aus bei prefers-reduced-motion (auch Einblenden, Karte, Hover) und Puls aus bei data-motion="off"; Hover nur bei Zeigergeräten
     (auf Touch bliebe er nach dem Tippen stehen).
   6 Ausgeblendet, solange der Cookie-Banner offen ist (er liegt darüber und schnitte sie ab), und beim Drucken.
   7 Nur EIN Link: «Mehr erfahren» als rote Pille (.btn.btn-primary, Regel .cb3 .btn) zur Detailseite; der Termin-Button des Exports und sein
     Textlink .link-arrow entfallen (User 2026-10-18), .cb-mehr bleibt nur als Kennung für die Probe.
   8 Karte auf niedrigen Fenstern (Handy quer) scrollbar, statt unter den Header zu ragen. */
.cb3{position:fixed;right:24px;bottom:24px;z-index:190;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
/* Zwei Regeln, NICHT eine Selektorliste: ein Browser ohne :has() verwürfe die ganze Liste und damit auch .show (Pille nie sichtbar). */
.cb3.show{opacity:1;transform:none;pointer-events:auto}
.cb3:has(:focus-visible){opacity:1;transform:none;pointer-events:auto}
.edumod-consent:not([hidden]) ~ .cb3,.edumod-consent:not([hidden]) ~ .cb3 .cb3-card{visibility:hidden}
.cb3 .eyebrow{display:block;margin-bottom:6px}
.cb3 h4{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--blau);margin:0 0 6px}
.cb3 p{margin:0 0 16px;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.cb3 .btn{width:100%;padding:13px 16px;font-size:.92rem}
.cb3-btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;background:var(--blau);color:#fff;font-family:var(--display);font-weight:600;font-size:.95rem;padding:14px 20px;border-radius:10px;box-shadow:0 14px 34px -14px color-mix(in srgb,var(--petrol) 70%,transparent);transition:transform .25s var(--ease),background .2s}
.cb3-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(hover:hover){.cb3-btn:hover{transform:translateY(-2px);background:var(--petrol)}}
.cb3-dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.cb3.show .cb3-dot{animation:cb3Puls 2.2s ease-out 3}
@keyframes cb3Puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}}
.cb3-card{position:absolute;right:0;bottom:calc(100% + 12px);width:300px;max-height:calc(100vh - 170px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:20px 20px 18px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.cb3.open .cb3-card{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(max-width:820px){
  .cb3{right:14px;bottom:calc(74px + env(safe-area-inset-bottom))}
  .cb3-btn{padding:11px 16px;font-size:.88rem}
  /* Pille hier 74 px hoch über der CTA-Leiste: 220 = Header 79 + 74 + Pille ~45 + Lücke 12 + Luft; mit 170 wie oben lag die Karte bei Handys
     quer 40 px unter dem Header (gemessen 812 × 375: Oberkante 39 px, Header bis 79 px). dvh nach vh: bei sichtbarer Browser-Leiste (iOS). */
  .cb3-card{width:min(300px,calc(100vw - 28px));max-height:calc(100vh - 220px - env(safe-area-inset-bottom));max-height:calc(100dvh - 220px - env(safe-area-inset-bottom))}
}
[data-motion="off"] .cb3.show .cb3-dot{animation:none}
@media(prefers-reduced-motion:reduce){
  .cb3,.cb3-card,.cb3-btn{transition:none}
  .cb3,.cb3-card{transform:none}
  .cb3-btn:hover{transform:none}
  .cb3.show .cb3-dot{animation:none}
}
@media print{.cb3{display:none}}