/* Oxy erklärt – TIBA OxyCare, modules/oxy-erklaert.php */
.oxy-ex{--oxy-ink:#173377;--oxy-ink-tief:#0f2456;--oxy-gelb:#FFF200;--oxy-cyan:#0BBBEF;container-type:inline-size;display:block;margin:20px 0 32px;font-family:inherit;text-align:left}
.oxy-ex *{box-sizing:border-box}
.oxy-ex .oxy-ex__karte{position:relative;background:var(--oxy-ink);color:#fff;border-radius:30px;box-shadow:0 18px 40px -18px rgba(23,51,119,.32),0 4px 12px rgba(23,51,119,.06)}
.oxy-ex .oxy-ex__deko{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.oxy-ex .oxy-ex__deko:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--oxy-cyan);opacity:.16}
.oxy-ex .oxy-ex__deko:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:4px solid var(--oxy-cyan);opacity:.6}
.oxy-ex .oxy-ex__inhalt{position:relative}
.oxy-ex .oxy-ex__figur{display:block;height:auto;max-width:none;margin:0;filter:drop-shadow(0 12px 14px rgba(5,14,40,.30))}
.oxy-ex .oxy-ex__marke{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 14px 7px 12px;border-radius:999px;background:var(--oxy-gelb);color:var(--oxy-ink-tief);font:700 .95rem/1 "Fira Sans",sans-serif;letter-spacing:.01em}
.oxy-ex .oxy-ex__marke:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oxy-ink-tief)}
.oxy-ex .oxy-ex__frage{margin:0 0 10px;padding:0;color:#fff;font:600 clamp(1.25rem,1rem + 1.2cqi,1.6rem)/1.22 "Fira Sans",sans-serif;text-transform:none;letter-spacing:0}
.oxy-ex .oxy-ex__antwort{color:rgba(255,255,255,.92);max-width:64ch}
.oxy-ex .oxy-ex__antwort p{margin:0 0 .6em;color:inherit}
.oxy-ex .oxy-ex__antwort p:last-child{margin-bottom:0}
.oxy-ex .oxy-ex__antwort a{color:#7fdcf8}
.oxy-ex .oxy-ex__mehr{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:#7fdcf8;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.oxy-ex .oxy-ex__mehr:after{content:"→";transition:transform .2s ease}
.oxy-ex .oxy-ex__mehr:hover,.oxy-ex .oxy-ex__mehr:focus{color:#fff}
.oxy-ex .oxy-ex__mehr:hover:after{transform:translateX(4px)}
.oxy-ex .oxy-ex__mehr:focus-visible{outline:3px solid var(--oxy-gelb);outline-offset:3px;border-radius:4px}
/* A – Oxy schaut über die Oberkante. Platz für den Kopf als margin an der Karte
   (nicht am .oxy-ex selbst: der ist der Container und kann sich nicht selbst abfragen). */
.oxy-ex.oxy-ex--a{margin-top:0}
.oxy-ex--a .oxy-ex__karte{margin-top:60px;padding:32px 36px 34px}
.oxy-ex--a .oxy-ex__deko:before{left:-110px;bottom:-190px}
.oxy-ex--a .oxy-ex__deko:after{left:46%;top:-6px;opacity:.5}
.oxy-ex--a .oxy-ex__figur{position:absolute;right:30px;top:-66px;width:150px;z-index:1}
.oxy-ex--a .oxy-ex__frage{padding-right:170px}
/* B – Oxy rechts in der Karte */
.oxy-ex--b .oxy-ex__karte{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:end;padding:32px 30px 30px 36px}
.oxy-ex--b .oxy-ex__deko:before{right:-70px;bottom:-130px}
.oxy-ex--b .oxy-ex__deko:after{right:200px;top:24px}
.oxy-ex--b .oxy-ex__figur{position:relative;width:200px;justify-self:center}
@container (max-width:560px){
  .oxy-ex--a .oxy-ex__karte{margin-top:56px;padding:78px 22px 24px}
  .oxy-ex--a .oxy-ex__figur{width:120px;top:-60px;right:auto;left:14px}
  .oxy-ex--a .oxy-ex__frage{padding-right:0}
  .oxy-ex--a .oxy-ex__deko:after{left:auto;right:28px;top:22px}
  .oxy-ex--b .oxy-ex__karte{grid-template-columns:1fr;gap:8px;padding:22px 22px 24px}
  .oxy-ex--b .oxy-ex__figur{order:-1;width:120px;justify-self:start}
  .oxy-ex--b .oxy-ex__deko:before{width:230px;height:230px;right:-80px;top:-100px;bottom:auto}
  .oxy-ex--b .oxy-ex__deko:after{right:30px;top:auto;bottom:24px}
}
@media (prefers-reduced-motion:reduce){.oxy-ex .oxy-ex__mehr:after{transition:none}}