/* Gabriel Wolf · Einwilligungsbanner
   ----------------------------------------------------------------------------
   Bewusst eine eigene Datei und nicht Teil von style.css: Die Danke-, Fehler-
   und Linkseite bringen ihr eigenes, schlankes CSS mit und binden style.css
   gar nicht ein. Lag der Banner dort drin, war er auf genau diesen Seiten
   ungestaltet, und das fiel erst bei der Tippflaechen-Pruefung auf.

   Diese Datei wird neben consent.js auf jeder Seite eingebunden.
*/

/* Rueckfallwerte stehen bei jeder Variablen dabei. Grund: Danke-, Fehler- und
   Linkseite binden style.css nicht ein, dort waeren die Variablen leer und der
   Banner erschien durchsichtig und an der falschen Stelle. Mit dem zweiten
   Argument in var() greift notfalls der feste Wert. */
/* ── Einwilligung für Statistik und Werbung ─────────────────────────────────
   Der Banner entsteht im Skript (assets/js/consent.js) und liegt über allem.
   Er blockiert die Seite bewusst nicht: Wer ihn ignoriert, kann weiterlesen,
   und ohne Zustimmung wird eben nichts gemessen. Beide Knöpfe sind gleich
   groß und gleich auffällig, damit Ablehnen nicht schwerer fällt als
   Zustimmen. Das verlangt die DSGVO, und es ist auch einfach anständig. */
.consent {
  position: fixed;
  left: var(--gutter, clamp(1.25rem, 5vw, 2.5rem));
  right: var(--gutter, clamp(1.25rem, 5vw, 2.5rem));
  bottom: var(--gutter, clamp(1.25rem, 5vw, 2.5rem));
  z-index: 9000;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s var(--ease, cubic-bezier(.16, 1, .3, 1)), transform .32s var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.consent.ist-offen { opacity: 1; transform: none; }
.consent-box {
  pointer-events: auto;
  width: min(100%, 560px);
  background: var(--ink-900, #101410);
  border: 1px solid var(--line-strong, rgba(242,243,236,.18));
  border-radius: var(--radius, 18px);
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.consent-titel {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 1.22rem;
  line-height: 1.25;
  margin: 0 0 .55rem;
  color: var(--paper, #F2F3EC);
}
.consent-text {
  margin: 0 0 1.1rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--paper-dim, #A9B1A6);
}
.consent-details {
  border-top: 1px solid var(--line, rgba(242,243,236,.10));
  margin-bottom: 1.1rem;
}
.consent-zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line, rgba(242,243,236,.10));
  font-size: .9rem;
  color: var(--paper, #F2F3EC);
  cursor: pointer;
}
.consent-zeile-fest { cursor: default; }
.consent-klein {
  color: var(--paper-dim, #A9B1A6);
  font-size: .84rem;
  line-height: 1.45;
}
.consent-zeile input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: .15rem;
  accent-color: var(--green-500, #4FB874);
  cursor: pointer;
}
.consent-fest {
  flex: 0 0 auto;
  font-size: .8rem;
  color: var(--green-400, #6BCB8B);
  white-space: nowrap;
  margin-top: .2rem;
}
.consent-knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
/* Eigene Knopfstile statt der .btn-Klassen der Hauptseite. Die liegen in
   style.css, die auf Danke-, Fehler- und Linkseite nicht geladen wird. Beide
   Knoepfe sind absichtlich gleich gross: Ablehnen darf nicht schwerer fallen
   als Zustimmen. */
.consent-btn {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font: 600 1rem/1.2 inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s var(--ease, cubic-bezier(.16, 1, .3, 1)),
              background-color .2s, border-color .2s, color .2s;
}
.consent-btn:hover { transform: translateY(-2px); }
.consent-btn:active { transform: translateY(0) scale(.98); }
.consent-ja {
  background: var(--green-500, #4FB874);
  color: var(--green-ink, #07130B);
}
.consent-ja:hover { background: var(--green-400, #6BCB8B); }
.consent-nein {
  background: transparent;
  color: var(--paper, #F2F3EC);
  border-color: var(--line-strong, rgba(242,243,236,.18));
}
.consent-nein:hover {
  border-color: var(--green-line, rgba(79,184,116,.35));
  color: var(--green-400, #6BCB8B);
}
.consent-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1rem;
  font-size: .85rem;
}
.consent-fuss a,
.consent-link {
  color: var(--paper-dim, #A9B1A6);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  /* Mindestens 44 px Tippflaeche. Das sind eigenstaendige Bedienelemente und
     keine Links im Fliesstext, deshalb gilt hier die volle Groesse. Das
     negative margin haelt den optischen Abstand trotzdem klein. */
  padding-block: .72rem;
  margin-block: -.72rem;
  display: inline-block;
}
.consent-fuss a:hover,
.consent-link:hover { color: var(--paper, #F2F3EC); }

/* Am Handy untereinander: Zwei Knöpfe nebeneinander werden sonst so schmal,
   dass die Beschriftung umbricht. */
@media (max-width: 520px) {
  .consent { left: 0; right: 0; bottom: 0; }
  .consent-box {
    width: 100%;
    border-radius: var(--radius, 18px) var(--radius, 18px) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 1.25rem var(--gutter, clamp(1.25rem, 5vw, 2.5rem)) calc(1.25rem + env(safe-area-inset-bottom));
  }
  .consent-knoepfe { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: opacity .01ms; transform: none; }
}

/* Der Widerrufs-Knopf steht in der Fußzeile zwischen echten Links und muss
   deshalb aussehen wie einer, obwohl er ein Button ist.

   Die Schriftgröße steht hier ausdrücklich auf .95rem, genau wie bei
   ".site-footer ul a" in style.css. Mit "font: inherit" erbte der Knopf vom
   <li> und damit die Grundgröße: Er stand sichtbar größer zwischen Impressum,
   Datenschutz und AGB. Wird die Größe der Footer-Links dort geändert, muss
   sie hier mitgeändert werden. */
.footer-consent {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: .95rem;
  font-weight: inherit;
  line-height: inherit;
  color: var(--paper, #F2F3EC);
  cursor: pointer;
  text-align: left;
  transition: color .2s var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.footer-consent:hover { color: var(--green-400, #6BCB8B); }

/* Wichtig: display im Regelsatz darueber setzt [hidden] ausser Kraft, und
   "Auswahl speichern" stand dann sichtbar da, obwohl die Einstellungen noch
   zugeklappt waren. Diese Regel holt das Verstecken zurueck. */
.consent-link[hidden],
.consent-details[hidden] { display: none; }