/* Einwilligungsbanner im Feldhandbuch-Stil: ein Feldblatt, unten angeheftet. Baut auf den Farben aus styles.css auf.
   Beide Knöpfe sehen gleich aus, damit „Ablehnen“ genauso leicht ist wie „Zustimmen“. */
.einwilligung {
  /* schmale Leiste ganz unten, damit sie am Handy den Kaufknopf im ersten Bild nicht verdeckt */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px var(--rand, 16px) calc(10px + env(safe-area-inset-bottom));
  background: var(--papier-hell, #efead6); color: var(--tinte, #161712);
  border-top: 4px solid var(--oliv, #3f4a1f);
  box-shadow: 0 -10px 30px -16px rgba(13, 14, 9, .55);
  font: 400 .78rem/1.38 var(--sans, system-ui, sans-serif);
}
.einwilligung[hidden] { display: none; }
/* läge die Leiste über dem Hauptknopf im ersten Bild, steht sie oben (tracking.js, platziere) */
.einwilligung--oben {
  top: 0; bottom: auto; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px;
  border-top: 0; border-bottom: 4px solid var(--oliv, #3f4a1f); box-shadow: 0 10px 30px -16px rgba(13, 14, 9, .55);
}
.einwilligung__text { max-width: 760px; margin: 0 auto 8px; }
.einwilligung__text b { font-weight: 600; }
.einwilligung__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.einwilligung__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 760px; margin: 0 auto; }
.einwilligung__knoepfe button {
  min-height: 44px; padding: 6px 12px; cursor: pointer;
  font: 600 .78rem/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte, #161712); background: transparent; border: 2px solid var(--tinte, #161712); border-radius: 0;
}
/* breit: Text und Knöpfe in einer Zeile, damit die Leiste flach bleibt */
@media (min-width: 720px) {
  .einwilligung { display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 7px; padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
  .einwilligung--oben { padding-top: calc(7px + env(safe-area-inset-top)); padding-bottom: 7px; }
  .einwilligung__text { margin: 0; flex: 0 1 820px; }
  .einwilligung__knoepfe { margin: 0; flex: 0 0 280px; }
}
.einwilligung__knoepfe button:hover { background: var(--papier, #d9d2b6); }
.einwilligung__knoepfe button:focus-visible,
.einwilligung__oeffner:focus-visible { outline: 3px solid var(--signal-tief, #d9961e); outline-offset: 2px; }

/* Link im Fuß, sieht aus wie Impressum und Datenschutz */
.einwilligung__oeffner {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--creme, #ece6cc); font: inherit; text-decoration: underline;
}