/* ===========================================================================
   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);
  /* `svh` und nicht `vh`: Auf iOS Safari und Chrome Android meint `vh` die
     GROSSE Ansichtsfläche — die Höhe ohne Adress- und Werkzeugleiste. Der
     Dialog wird in derselben großen Fläche zentriert, ragt also oben UND
     unten hinter die Leisten, solange sie eingeblendet sind: Überschrift und
     Fußbereich waren dort abgeschnitten (Befund 07.09.2026 an der
     Bestellprüfung, dieselbe Zeile hier). `svh` ist die KLEINE Fläche und
     passt in beiden Zuständen; `dvh` wäre die dritte Möglichkeit und die
     schlechtere — sie ändert sich beim Ein- und Ausblenden der Leiste und
     ließe den Dialog während des Scrollens springen. Die `vh`-Zeile davor
     bleibt als Rückfall für Browser ohne `svh` stehen. */
  max-height: min(85vh, 720px);
  max-height: min(85svh, 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;
}

.layer__header {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 1.25rem 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gruen-hell);
}

.layer__header .layer__title {
  flex: 1 1 12rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.layer__print {
  padding: 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pille);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.layer__print:hover {
  background: var(--gruen-hell);
}

/* 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 {
  min-height: 0;
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
}

.layer-print {
  display: none;
}

@media print {
  html:has(.layer-print),
  body:has(.layer-print) {
    height: auto;
    overflow: visible !important;
    background: white;
  }

  body:has(.layer-print) > :not(.layer-print) {
    display: none !important;
  }

  body > .layer-print {
    display: block;
    color: black;
    font: 11pt/1.5 sans-serif;
    overflow-wrap: anywhere;
  }

  .layer-print h1 {
    font-size: 18pt;
  }

  .layer-print a {
    color: inherit;
    text-decoration: underline;
  }
}

.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;
    max-height: 88svh;
  }

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