/* Consent-Banner (DSGVO, kategorienbasiert). Funktional immer aktiv,
   Performance und Marketing getrennt einwilligbar. */

.rf-consent {
  position: fixed;
  inset: auto 12px 12px 12px;
  z-index: 2000;
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  gap: 1rem 1.5rem;
  align-items: flex-start;
  background: var(--rf-weiss, #fff);
  color: var(--rf-schwarz, #141413);
  border: 1px solid var(--rf-linie, #e3e3e7);
  border-radius: 14px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.20);
  padding: 18px 20px;
  font-size: var(--rf-t-s, 0.9375rem);
  line-height: 1.5;
}

.rf-consent__haupt { flex: 1 1 auto; min-width: 0; }

.rf-consent__titel {
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}

.rf-consent__text { margin: 0; }
.rf-consent__text a { color: var(--rf-rot, #bd1212); text-decoration: underline; }

.rf-consent__optionen { display: grid; gap: .55rem; margin-top: 1rem; }
.rf-consent__optionen[hidden] { display: none; }
.rf-consent__opt { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; }
.rf-consent__opt input {
  margin-top: .18rem; flex: none; width: 18px; height: 18px;
  accent-color: var(--rf-rot, #bd1212);
}

.rf-consent__knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  width: 200px;
}

.rf-consent__knopf {
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  width: 100%;
  transition: background-color var(--rf-tempo, 180ms), border-color var(--rf-tempo, 180ms);
}
.rf-consent__knopf--ok { background: var(--rf-rot, #bd1212); color: #fff; border-color: var(--rf-rot, #bd1212); }
.rf-consent__knopf--ok:hover { background: var(--rf-rot-dunkel, #950d0d); }
.rf-consent__knopf--grau { background: #ececec; color: #222; }
.rf-consent__knopf--grau:hover { background: #e0e0e0; }
.rf-consent__knopf:focus-visible { outline: 3px solid var(--rf-rot-hell, #da4d61); outline-offset: 2px; }

@media (max-width: 640px) {
  .rf-consent { flex-direction: column; inset: auto 8px 8px 8px; padding: 16px; }
  .rf-consent__knoepfe { flex-direction: column; width: 100%; }
}

/* Im Chat sitzen alle Knoepfe unten. Unten verdeckte das Banner auf dem
   Handy den Start "Los geht es", und am Einstieg sind in der Woche bis
   19.10.2026 knapp ein Viertel abgesprungen. Deshalb dort oben und kompakt.
   Der Text bleibt wortgleich, er ist rechtlich abgestimmt. Ablehnen bleibt
   so gross und so nah wie Akzeptieren. */
@media (max-width: 640px) {
  body.chat .rf-consent { inset: 8px 8px auto 8px; gap: .75rem; padding: 14px; }
  body.chat .rf-consent__titel { font-size: 1rem; margin-bottom: .25rem; }
  body.chat .rf-consent__text { font-size: .8125rem; max-height: 6.2em; overflow-y: auto; }
  body.chat .rf-consent__knoepfe { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  body.chat .rf-consent__knopf { flex: 1 1 40%; width: auto; padding: 10px 12px; }
  body.chat .rf-consent__knopf[data-edit] { flex-basis: 100%; }
}