/* ==========================================================================
   Einwilligung — das Banner am Fuß und das Hinweisfeld im Kartenrahmen.

   Wie überall hier: keine neuen Werte, nur der Tokensatz. Die beiden Teile
   stehen in einer Datei, weil sie dieselbe Frage stellen und dieselbe Antwort
   entgegennehmen — auseinandergezogen liefen ihre Texte auseinander.
   ========================================================================== */

/* --------------------------------------------------------------- Banner -- */

.consent {
  position: fixed;
  z-index: 900; /* über der Seite, unter dem Lightbox-Overlay */
  inset-inline: 0;
  inset-block-end: 0;
  background: var(--c-cream-raised);
  border-block-start: 1px solid var(--c-line);
  box-shadow: 0 -18px 50px -30px rgba(36, 28, 30, 0.5);

  /* Startzustand: unten weg. `.is-in` fährt es hoch — siehe
     js/components/consent-banner.js, das die Klasse im nächsten Frame setzt. */
  transform: translateY(101%);
  transition: transform var(--dur-base) var(--ease-out);
}

.consent.is-in {
  transform: translateY(0);
}

/* Das Bauteil trägt `hidden`, wenn entschieden ist; ohne diese Zeile
   gewönne `position: fixed` gegen die Voreinstellung des Browsers. */
.consent[hidden] {
  display: none;
}

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

.consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-7);

  /*
     Ein Banner, das den halben Schirm frisst, ist selbst ein Grund, schnell
     irgendetwas zu klicken — und das ist keine überlegte Entscheidung mehr.
     Der Deckel gilt vor allem für sehr kleine Telefone und für den Fall, dass
     der Text später wächst: Titel, Knöpfe und Link bleiben stehen, gescrollt
     wird nur innerhalb des Textes.
  */
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Dieselbe Breite und dasselbe Polster wie `.container`, damit das Banner
     mit dem Fuß darüber fluchtet. Das Sicherheitspolster unten hält es auf
     dem iPhone über der Streichleiste. */
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-5) var(--gutter);
  padding-block-end: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
}

.consent__copy {
  flex: 1 1 28rem;
}

.consent__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  color: var(--c-ink);
}

.consent__title:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.consent__text {
  max-width: 68ch;
  margin-block-start: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

.consent__note {
  max-width: 68ch;
  margin-block-start: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--c-ink-muted);
}

.consent__link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.consent__link:hover {
  color: var(--c-accent-deep);
}

/*
   Die beiden Knöpfe.

   `flex: 1 1 0` plus die gemeinsame Mindestbreite macht sie exakt gleich
   breit — unabhängig davon, dass „Ablehnen" ein Zeichen länger ist als
   „Erlauben". Das ist hier kein Schönheitsgriff: eine Einwilligung, deren
   Ablehnung kleiner, blasser oder schwerer zu treffen ist als ihre
   Erteilung, ist keine freiwillige. Gleiche Fläche, gleiche Form, gleiche
   Schriftgröße; die Farbe unterscheidet sie, sonst nichts.
*/
.consent__actions {
  display: flex;
  flex: 0 1 auto;
  gap: var(--sp-3);
}

.consent__btn {
  flex: 1 1 0;
  min-width: 9.5rem;
}

/*
   Der Umriss von `.btn--ghost` ist überall sonst eine Haarlinie, die sich
   zurücknimmt. Hier darf sie das nicht: neben einem gefüllten Knopf muss der
   andere genauso deutlich als Knopf zu erkennen sein, sonst ist die Ablehnung
   der schwerere Weg — und eine Einwilligung, die leichter zu geben als zu
   verweigern ist, ist keine freiwillige.
*/
.consent__btn.btn--ghost {
  border-color: var(--c-ink);
  background: var(--c-cream);
}

@media (max-width: 40rem) {
  .consent__inner {
    gap: var(--sp-3);
    padding-block: var(--sp-4);
    padding-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }

  /* Auf dem Telefon zählt jede Zeile: der Fließtext rückt enger zusammen,
     bleibt aber vollständig lesbar. */
  .consent__text {
    line-height: var(--lh-snug);
  }

  .consent__note {
    margin-block-start: var(--sp-2);
    line-height: var(--lh-snug);
  }

  .consent__actions {
    width: 100%;
  }
}

/*
   Sehr flache Fenster: das Banner darf den Text nicht auffressen. Der
   Beschreibungsabsatz weicht dann, Titel, Knöpfe und der Weg zur Erklärung
   bleiben — sie sind das, was die Entscheidung trägt.
*/
@media (max-height: 34rem) and (min-width: 40rem) {
  .consent__text {
    display: none;
  }
}

/* ------------------------------------------------ Hinweisfeld der Karte -- */

/*
   Liegt über der Leinwand statt an ihrer Stelle: der Rahmen behält seine
   Höhe, und die Seite springt beim Zustimmen nicht.
*/
.map-gate {
  display: none;
}

.map-figure.is-gated .map-gate {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);

  padding: var(--sp-6);
  text-align: center;
  background: var(--c-cream-deep);
}

/* Die Zoom-Knöpfe gehören zu einer Karte, die es gerade nicht gibt. */
.map-figure.is-gated .map-frame__zoom {
  display: none;
}

.map-gate__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

.map-gate__text {
  max-width: 46ch;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

.map-gate .btn {
  margin-block-start: var(--sp-2);
}

.map-gate__link {
  font-size: var(--fs-meta);
  color: var(--c-ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.map-gate__link:hover {
  color: var(--c-accent);
}