/* Consent-Dialog (includes/consent-banner.php + consent-banner.js).
   Eigenständig, damit er auf v2- und Altseiten gleich aussieht; Farben = v2-Tokens. */
.ra-consent{--c-red:#B42344;--c-red-dark:#730023;--c-text:#363636;--c-muted:#6b625c;--c-bg:#FCF7F0;--c-line:#efe6da;--c-off:#958677;
  width:calc(100% - 32px);max-width:600px;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:24px;
  background:var(--c-bg);color:var(--c-text);font-family:'Noto Sans',Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6;hyphens:manual;
  box-shadow:0 30px 60px -20px rgba(54,54,54,.45);overflow:auto;overscroll-behavior:contain}
.ra-consent::backdrop{background:rgba(54,54,54,.55)}
body:has(.ra-consent[open]){overflow:hidden}
.ra-consent::before{content:"";position:sticky;top:0;display:block;height:4px;background:linear-gradient(90deg,var(--c-red-dark),var(--c-red) 35%,#FF96A0 70%,#7DDCCD)}
.ra-consent__box{display:flex;flex-direction:column;gap:18px;padding:28px 32px 32px}
.ra-consent__box[hidden]{display:none}
.ra-consent__text{display:grid;gap:12px}
.ra-consent__purposes{margin:0;padding:0 0 0 20px;list-style:disc;font-size:15px;line-height:1.6}
.ra-consent__purposes li{margin:0;padding:0}
.ra-consent__purposes li+li{margin-top:6px}
.ra-consent h2{margin:0;padding:0;font-size:24px;font-weight:900;line-height:1.2;color:var(--c-text)}
.ra-consent p{margin:0;padding:0;font-size:15px;line-height:1.6;hyphens:manual!important} /* Alt-CSS: p{hyphens:auto!important} */
.ra-consent a{color:var(--c-red)}
.ra-consent__opts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ra-consent__opt{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:14px 18px;background:#fff;border:1px solid var(--c-line);border-radius:16px}
.ra-consent__opt strong,.ra-consent__opt label{display:block;font-size:16px;font-weight:700;cursor:pointer}
.ra-consent__opt strong{cursor:default}
.ra-consent__opt p{font-size:14px;line-height:1.5;color:var(--c-muted)}
.ra-consent__badge{flex:none;padding:4px 10px;border-radius:100px;background:#C3F0EB;color:#0F463C;font-size:13px;font-weight:700;white-space:nowrap}
/* Schalter: natives Kontrollkästchen mit role="switch"; Spur und Knopf >= 3:1 Kontrast.
   Doppelte Klasse schlägt "input[type=checkbox]{appearance:checkbox}" aus dem Divi-CSS der Altseiten */
.ra-consent .ra-consent__switch{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:52px;height:30px;margin:0;border-radius:100px;background:var(--c-off);cursor:pointer;transition:background-color .2s}
.ra-consent__switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.ra-consent .ra-consent__switch:checked{background:var(--c-red)}
.ra-consent__switch:checked::after{transform:translateX(22px)}
/* Zustimmung bewusst hervorgehoben (Entscheidung des Betreibers), Größe aller Buttons gleich */
.ra-consent__btns{display:flex;flex-wrap:wrap;gap:10px}
.ra-consent__btn{flex:1 1 0;min-height:48px;margin:0;padding:10px 16px;white-space:nowrap;border:2px solid var(--c-red);border-radius:100px;background:var(--c-red);color:var(--c-bg);font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.ra-consent__btn--ghost{background:#fff;color:var(--c-red)}
.ra-consent__check{margin-right:6px;vertical-align:-2px}
.ra-consent__head{display:flex;align-items:center;gap:12px}
.ra-consent__head h2{min-width:0}
/* Im Code nach dem Titel, damit Tab vom fokussierten Titel auf den Button führt; sichtbar links davon */
.ra-consent__back{order:-1;flex:none;display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:0;padding:6px 14px 6px 10px;border:2px solid var(--c-red);border-radius:100px;background:#fff;color:var(--c-red);font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
@media (hover:hover){
  .ra-consent__btn:hover,.ra-consent__back:hover{background:var(--c-red-dark);border-color:var(--c-red-dark);color:var(--c-bg)}
}
.ra-consent__btn:active{transform:scale(.98)}
.ra-consent :focus-visible{outline:2px solid #fff;outline-offset:0;box-shadow:0 0 0 4px #1a1a1a}
.ra-consent h2[tabindex]:focus-visible{outline:0;box-shadow:none} /* Überschrift bekommt den Fokus nur per Skript, sie ist nicht bedienbar */
.ra-consent__links{text-align:center}
.ra-consent .ra-consent__links{font-size:14px}
.ra-consent__link{margin:0;padding:0;border:0;background:none;color:var(--c-red);font:inherit;text-decoration:underline;cursor:pointer}
/* Erste Ebene: Der Text scrollt, Buttons und Links bleiben immer sichtbar (der Dialog ist dort nicht schließbar) */
#ra-consent-start{padding-bottom:0}
.ra-consent__actions{position:sticky;bottom:0;display:flex;flex-direction:column;gap:14px;margin:0 -32px;padding:8px 32px 24px;background:var(--c-bg)}
@media (max-width:560px){
  .ra-consent__box{padding:22px 20px 24px;gap:16px}
  .ra-consent h2{font-size:21px}
  .ra-consent__opt{padding:12px 14px}
  .ra-consent__btn{flex-basis:100%}
  .ra-consent__link{display:block;width:100%;padding:4px 0}
  .ra-consent__actions{gap:6px;margin:0 -20px;padding:10px 20px 12px;box-shadow:0 -10px 12px -10px rgba(54,54,54,.2)}
  #ra-consent-start [data-consent-choice="accept"]{order:-1}
  .ra-consent__sep{display:none}
}
@media (max-width:340px){
  .ra-consent__head{gap:8px}
  .ra-consent__head h2{font-size:18px}
}
@media (prefers-reduced-motion:no-preference){
  .ra-consent[open]{animation:ra-consent-in .25s ease-out}
  .ra-consent[open]::backdrop{animation:ra-consent-fade .25s ease-out}
}
@keyframes ra-consent-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes ra-consent-fade{from{opacity:0}}