/* blatt – Fenster von unten (Sheet) als echtes <dialog>: Fokusfalle, Escape und Hintergrund-Sperre kommen vom Browser */
@layer module {
  .blatt {
    position: fixed; inset: auto 0 calc(env(safe-area-inset-bottom) + var(--a3)); margin: 0 auto;
    inline-size: min(560px, calc(100% - 24px)); max-inline-size: none;
    max-block-size: min(80dvh, 640px); overflow-y: auto;
    padding: var(--a4) var(--a5) var(--a5);
    border-radius: var(--r-blatt);
    color: var(--text);
    /* Glas über 95 % Seitenfarbe: Inhalt dahinter bleibt nur Ahnung, Schrift im Blatt gut lesbar; bei Weniger Transparenz ganz deckend */
    background: linear-gradient(var(--glas-hg), var(--glas-hg)), color-mix(in srgb, var(--hg) 95%, transparent);
  }
  .blatt::backdrop { background: rgb(0 0 0 / .25); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .blatt-kopf { display: flex; align-items: center; gap: var(--a2); margin-bottom: var(--a3); }
  .blatt-kopf h2 { font-size: var(--fs-titel3); margin-right: auto; }
  .blatt-zu {
    inline-size: var(--tipp); block-size: var(--tipp); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--fuellung); color: var(--text-2);
  }
  .blatt-zu svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .blatt-zeile { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--a3); min-block-size: 64px; padding-block: var(--a2); border-bottom: 1px solid var(--trenner); }
  .blatt-zeile .beschriftung { font-weight: 600; }
  html:has(.blatt[open]) { overflow: hidden; }
}