/*
 * einwilligung.css – Gestaltung des Einwilligungsfensters (einwilligung.js)
 * Bauplanung Kleinert GmbH, seit 08.10.2026
 * Die Regeln sind auf allen Seiten gleich, nur der Variablenblock nimmt die Werte der jeweiligen Seite.
 */
/* pvplanung.com: Werte aus styles.css */
.ew-box {
  --ew-hg: #FFFFFF;
  --ew-text: #000000;
  --ew-text-leise: #444444;
  --ew-rand: #D6E1F2;
  --ew-akzent: #1238A5;
  --ew-akzent-dunkel: #0d2d8a;
  --ew-akzent-text: #ffffff;
  --ew-schrift: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --ew-radius: 10px;
  --ew-radius-knopf: 6px;
  --ew-schatten: 0 12px 40px rgba(18,56,165,0.18);
}

.ew-box {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 620px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  margin: 0 auto;
  padding: 20px 20px 18px;
  background: var(--ew-hg);
  color: var(--ew-text);
  border: 1px solid var(--ew-rand);
  border-radius: var(--ew-radius);
  box-shadow: var(--ew-schatten);
  font-family: var(--ew-schrift);
  font-size: 15px;
  line-height: 1.5;
}
.ew-box[hidden],
.ew-box [hidden] { display: none; }

.ew-titel {
  margin: 0 0 6px;
  font-family: var(--ew-schrift);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ew-text);
}
/* Die Überschrift nimmt beim Öffnen nur den Fokus auf, bedienbar ist sie nicht: kein Rahmen */
.ew-titel:focus { outline: none; }

.ew-text { margin: 0 0 8px; color: var(--ew-text-leise); }

.ew-links { display: flex; gap: 16px; margin: 0 0 14px; font-size: 14px; }
.ew-links a { color: var(--ew-text); text-decoration: underline; }

.ew-wahl { margin: 0 0 14px; border-top: 1px solid var(--ew-rand); }
.ew-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ew-rand);
  cursor: pointer;
}
.ew-zeile-text { display: flex; flex-direction: column; font-size: 14px; color: var(--ew-text-leise); }
.ew-zeile-text strong { font-size: 15px; color: var(--ew-text); }

.ew-schalter {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 12px;
  background: var(--ew-rand);
  border: 1px solid var(--ew-text-leise);
  cursor: pointer;
  transition: background-color .15s ease;
}
.ew-schalter::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ew-hg);
  border: 1px solid var(--ew-text-leise);
  transition: transform .15s ease;
}
.ew-schalter:checked { background: var(--ew-akzent); border-color: var(--ew-akzent); }
.ew-schalter:checked::after { transform: translateX(20px); border-color: var(--ew-akzent); }
.ew-schalter:disabled { opacity: .6; cursor: default; }
.ew-schalter:focus-visible { outline: 2px solid var(--ew-akzent); outline-offset: 2px; }

/* Alle drei Knöpfe gleich groß und gleich gestaltet: Ablehnen ist nicht schwächer als Annehmen */
.ew-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.ew-knopf {
  flex: 1 1 150px;
  padding: 12px 16px;
  font-family: var(--ew-schrift);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ew-akzent-text);
  background: var(--ew-akzent);
  border: 2px solid var(--ew-akzent);
  border-radius: var(--ew-radius-knopf);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ew-knopf:hover { background: var(--ew-akzent-dunkel); border-color: var(--ew-akzent-dunkel); }
.ew-knopf:focus-visible { outline: 3px solid var(--ew-akzent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ew-schalter, .ew-schalter::after, .ew-knopf { transition: none; }
}