/* Einwilligungs-Banner. Erscheint unten, blockiert die Seite nicht.
   Ablehnen und Zustimmen sind gleich gross und gleich leicht zu treffen. */

.einwilligung{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  max-width:640px;margin-inline:auto;
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);
  box-shadow:0 8px 32px -8px color-mix(in srgb,var(--ink) 18%,transparent);
  padding:20px;
  opacity:0;transform:translateY(8px);
  transition:var(--transition-surface);
}
.einwilligung[data-sichtbar]{opacity:1;transform:none}
.einwilligung[hidden]{display:none}

.einwilligung__titel{
  margin:0 0 6px;font-family:var(--font-heading,inherit);
  font-size:17px;line-height:1.3;color:var(--text-heading);
}
.einwilligung__text{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--text-body)}
.einwilligung__text a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
.einwilligung__text a:hover{color:var(--text-link-hover)}

.einwilligung__knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.einwilligung__knoepfe .btn{flex:1 1 160px;height:44px;min-height:44px;font-size:15px}

@media (max-width:480px){
  .einwilligung{left:8px;right:8px;bottom:8px;padding:16px}
  .einwilligung__knoepfe .btn{flex:1 1 100%}
}

/* Link in der Fusszeile, ueber den man die Wahl wieder aendern kann */
.einwilligung-aendern{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:none}
.einwilligung-aendern:hover{text-decoration:underline}