/* Sprachwahl Patient/Fach – TIBA OxyCare, modules/oxy-sprachwahl.php */

/* Sichtbarkeit: beide Fassungen im HTML, die Klasse am <html> entscheidet (cache-fest) */
html:not(.oxy-fach) #fachSpeech,
html:not(.oxy-fach) .oxy-nur-fach{display:none!important}
html.oxy-fach #normalSpeech,
html.oxy-fach .oxy-nur-patient{display:none!important}

/* Umschalter */
.oxy-sprachwahl{container-type:inline-size;width:100%;margin:28px 0 36px}
.oxy-sprachwahl .oxy-sprachwahl__innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px}
.oxy-sprachwahl .oxy-sprachwahl__frage{margin:0;padding:0;color:#173377;font-family:"Nunito Sans",sans-serif;font-size:1rem;font-weight:700;line-height:1.4}
.oxy-sprachwahl .oxy-sprachwahl__seg{display:inline-flex;gap:0;padding:4px;margin:0;border:1px solid #173377;border-radius:20px;background:#fff}
.oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf{
  appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin:0;padding:10px 18px;border:0;border-radius:16px;box-shadow:none;background:transparent;color:#173377;
  font-family:"Nunito Sans",sans-serif;font-size:1rem;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf svg{flex:0 0 auto;width:18px;height:18px}
.oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf:hover{background:#E7EBF2;color:#173377}
.oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf:focus{outline:none}
.oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf:focus-visible{outline:3px solid #FFF200;outline-offset:2px}
/* aktiver Knopf folgt der Klasse am <html> – stimmt schon vor dem ersten Zeichnen */
html:not(.oxy-fach) .oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf[data-oxy-sprache="patient"],
html.oxy-fach .oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf[data-oxy-sprache="fach"]{background:#173377;color:#fff}
.oxy-sprachwahl .oxy-sprachwahl__kurz{display:none}

@container (max-width:560px){
  .oxy-sprachwahl .oxy-sprachwahl__innen{flex-direction:column;gap:10px}
  .oxy-sprachwahl .oxy-sprachwahl__seg{display:flex;width:100%}
  .oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf{flex:1 1 50%;padding:12px 8px}
  .oxy-sprachwahl .oxy-sprachwahl__lang{display:none}
  .oxy-sprachwahl .oxy-sprachwahl__kurz{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .oxy-sprachwahl .oxy-sprachwahl__seg button.oxy-sprachwahl__knopf{transition:none}
}