/* First notice: a compact bar fixed to the bottom of the viewport, OVER the
   page. It is not in the document flow, so showing or closing it moves
   nothing, and the page stays usable while it is open. The detailed
   settings are a separate modal dialog, opened only on request.
   Every rule is scoped to .consent-banner / .consent-dialog. */
.consent-banner, .consent-dialog { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; background: #fff; box-sizing: border-box; text-align: left; }
.consent-banner[hidden], [data-consent-open][hidden], .map-consent[hidden] { display: none !important; }

/* Above the sticky header and Leaflet's controls (both 1000), below the
   page modals (1050) and the mobile menu (2000), which cover it while open. */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; border-top: 3px solid #f7d34f; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12); padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
.consent-banner .consent-inner { width: 80%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.consent-banner .consent-text { flex: 1 1 520px; min-width: 0; }
.consent-banner h2 { font-size: 17px; line-height: 1.3; font-weight: 700; margin: 0 0 4px; }
.consent-banner p { margin: 0; color: #4a4a4a; }
.consent-banner p + p { margin-top: 6px; }
.consent-banner a, .consent-dialog a { color: #111; text-decoration: underline; text-decoration-color: #f7d34f; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.consent-banner a:hover, .consent-dialog a:hover { text-decoration-color: #111; }

/* Buttons share the site's .btn-yellow look. "Alle akzeptieren" and
   "Alle ablehnen" deliberately have exactly the same presentation. */
.consent-banner .consent-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.consent-banner button, .consent-dialog button { font: inherit; font-weight: 600; line-height: 1.2; color: #111; background: #fff; border: 1px solid #111; border-radius: 6px; padding: 10px 20px; min-height: 44px; margin: 0; cursor: pointer; transition: background-color 0.2s; }
.consent-banner [data-consent-all], .consent-dialog .consent-save { background: #f7d34f; border-color: #f7d34f; }
.consent-banner [data-consent-all]:hover, .consent-dialog .consent-save:hover { background: #e6c845; border-color: #e6c845; }
.consent-banner [data-consent-open]:hover, .consent-dialog [data-consent-close]:hover { background: #f3f4f6; }
.consent-banner :focus-visible, .consent-dialog :focus-visible { outline: 3px solid #165dab; outline-offset: 3px; }

/* Settings dialog: its content scrolls; the save bar stays visible. */
.consent-dialog { width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #ddd; border-radius: 12px; padding: 0; margin: auto; box-shadow: 0 12px 60px rgba(0, 0, 0, 0.3); font-size: 16px; line-height: 1.55; }
.consent-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.consent-settings { margin: 0; padding: 26px 26px 0; }
.consent-dialog h2 { font-size: 23px; line-height: 1.3; margin: 0; }
.consent-dialog p { margin: 0 0 12px; }
.consent-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.consent-heading button { padding: 8px 12px; min-height: 40px; }
.consent-option { display: flex; align-items: start; gap: 14px; padding: 18px 0; border-top: 1px solid #ddd; cursor: pointer; }
.consent-option input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #111; }
.consent-option strong, .consent-option span span { display: block; }
.consent-option strong { margin-bottom: 6px; }
.consent-dialog .consent-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 6px -26px 0; padding: 14px 26px; background: #fff; border-top: 1px solid #ddd; }
.consent-dialog .consent-save-hint { margin: 0; font-size: 14px; color: #4a4a4a; }

.contact-channel { color: inherit; font: inherit; text-decoration: none; }
.legal .contact-channel { color: inherit; text-decoration: none; }
.contact-channel:hover, .contact-channel:focus-visible { text-decoration: underline; }
.coverage-map__canvas { width: 100%; height: 100%; min-height: inherit; }

@media (max-width: 768px) {
  .consent-banner .consent-inner { width: auto; margin: 0 16px; }
}
@media (max-width: 520px) {
  .consent-banner { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 14px; line-height: 1.45; }
  .consent-banner h2 { font-size: 16px; }
  .consent-banner .consent-inner { gap: 12px; }
  .consent-banner .consent-actions { flex: 1 1 100%; grid-template-columns: 1fr 1fr; gap: 8px; }
  .consent-banner [data-consent-open] { grid-column: 1 / -1; }
  .consent-banner button { padding: 8px 12px; min-height: 42px; }
  .consent-settings { padding: 18px 18px 0; }
  .consent-dialog .consent-actions { margin: 6px -18px 0; padding: 12px 18px; }
  .consent-dialog .consent-save { flex: 1 1 100%; }
  .consent-heading { flex-wrap: wrap; }
}