/* ===========================================================================
   Der Rechtstexte-Layer (P3) — ein natives <dialog>, scrollbar, mit X oben
   rechts. Mechanik in public/layer.js, Markup-Vertrag dort im Kopfkommentar.

   Dasselbe Bauteil bedient später das Bestellprüfungs-Overlay (P6); die
   Klassen hier sind deshalb bewusst allgemein gehalten (`.layer*`), nicht an
   Rechtstexte gebunden. `.rechtslink` ist die eine Ausnahme — die
   Trigger-Optik für AGB/Datenschutz/Widerruf, siehe rechtstexte.ts.

   `[hidden] { display: none !important }` (styles.css) betrifft `<dialog>`
   nicht: seine Sichtbarkeit hängt am `open`-Attribut, das der Browser selbst
   setzt, nicht an `hidden`. Deshalb kein `display` auf `dialog[data-layer]`
   ohne `[open]` — das würde sich mit nichts beißen, ist hier aber trotzdem
   vermieden, um die Regel nicht durch ein Gegenbeispiel zu verwässern.
   =========================================================================== */

/* --- Auslöser: sieht aus wie ein Link, ist bei modus "layer" ein <button> - */

.rechtslink {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.rechtslink:hover {
  text-decoration-thickness: 2px;
}

/* --- Dialog + Rückplatte -------------------------------------------------- */

dialog.layer {
  padding: 0;
  border: 0;
  border-radius: var(--radius-block);
  box-shadow: var(--spur-karte);
  /* Eigene Grenzen statt "so groß wie der Inhalt": ein langer Rechtstext soll
     im Layer scrollen (`.layer__body`), nicht den Dialog über den Bildschirm
     hinaus wachsen lassen. */
  width: min(90vw, 640px);
  max-height: min(85vh, 720px);
  overscroll-behavior: contain;
}

dialog.layer::backdrop {
  background: rgb(8 46 30 / 55%); /* --gruen-dunkel, halbtransparent */
}

.layer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: inherit;
  padding: 2.5rem 1.75rem 1.75rem;
  background: var(--papier);
  color: var(--gruen-text);
}

.layer__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius-pille);
  background: var(--gruen-hell);
  color: var(--gruen-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.layer__close:hover {
  background: var(--limette);
}

.layer__title {
  margin: 0 2.5rem 1rem 0;
  font-size: 1.25rem;
}

/* Scrollt in sich — die Seite dahinter bleibt an ihrem Platz (body bekommt
   `overflow: hidden` in layer.js, solange ein Layer offen ist). `tabindex="0"`
   im Markup macht den Bereich selbst mit der Tastatur erreichbar (WCAG 2.1.1),
   ein eigener Bildlaufbereich sonst nicht. */
.layer__body {
  overflow-y: auto;
  padding-right: 0.25rem;
}

.layer__body p {
  margin: 0 0 1em;
}

.layer__body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  dialog.layer {
    width: 92vw;
    max-height: 88vh;
  }

  .layer__panel {
    padding: 2.25rem 1.25rem 1.25rem;
  }
}