/* ==========================================================================
   zustimmung.css · Einwilligungsleiste für Google Analytics (27.09.2026)
   Leiste am unteren Rand, kein Vollbild, kein Schleier. Solange sie steht,
   bekommt die Seite unten genau ihre Höhe als Abstand, damit kein Inhalt
   verdeckt wird (auch nicht auf Impressum und Datenschutz).
   Nutzt die --t-*-Token, wenn es sie gibt, sonst eigene Werte.
   ========================================================================== */

.zu-leiste {
  --zu-grund: var(--t-panel, #fff);
  --zu-text: var(--t-ink, #14141a);
  --zu-text-2: var(--t-ink-2, #4a4a56);
  --zu-kante: var(--t-border, rgba(20, 20, 26, .16));
  --zu-akzent: var(--t-accent-vivid, var(--t-accent, #2f6bd8));
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background: var(--zu-grund);
  color: var(--zu-text);
  border-top: 1px solid var(--zu-kante);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .12);
  font-family: var(--font-main, Inter, system-ui, sans-serif);
}

.zu-leiste__innen {
  width: min(72rem, 100% - 2rem);
  margin: 0 auto;
  padding: .95rem 0 calc(.95rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
}

.zu-leiste__text { flex: 1 1 auto; min-width: 0; }

.zu-titel {
  margin: 0 0 .2rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
}

.zu-text {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--zu-text-2);
}

.zu-text a { color: var(--zu-akzent); text-decoration: underline; text-underline-offset: 3px; }

.zu-leiste__knoepfe { display: flex; gap: .6rem; flex: 0 0 auto; }

/* Beide Knöpfe identisch: gleiche Größe, gleiche Farbe, gleiche Gewichtung. */
.zu-knopf {
  min-width: 10.5rem;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--zu-text);
  background: var(--zu-text);
  color: var(--zu-grund);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.zu-knopf:hover { opacity: .88; }
.zu-knopf:focus-visible { outline: 3px solid var(--zu-akzent); outline-offset: 2px; }

@media (max-width: 760px) {
  .zu-leiste__innen { flex-direction: column; align-items: stretch; }
  .zu-leiste__knoepfe { width: 100%; }
  .zu-knopf { flex: 1 1 0; min-width: 0; }
}

/* Platz für die Leiste, damit nichts verdeckt wird. */
html.zu-leiste-offen body { padding-bottom: var(--zu-hoehe, 7rem); }

@media print { .zu-leiste { display: none; } }