/* Bogen: ein Blatt, am Handy von unten, am Rechner mittig. Natives <dialog>, Ein- und Ausblenden
   nach Fizzys dialog.css (@starting-style, allow-discrete). Logik: bogen_controller.js. */
@layer bausteine {
  html:has(dialog.bogen[open]) { overflow: hidden; }
  dialog.bogen {
    border: 1px solid var(--ton-4); border-radius: var(--rundung-gross); padding: .6rem .8rem 1rem; width: min(26rem, calc(100vw - 2rem));
    background: var(--flaeche); color: CanvasText; box-shadow: var(--schatten);
    opacity: 0; transform: scale(.92); transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), display var(--dauer) allow-discrete, overlay var(--dauer) allow-discrete;
  }
  dialog.bogen[open] { opacity: 1; transform: none; }
  dialog.bogen::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dauer), display var(--dauer) allow-discrete, overlay var(--dauer) allow-discrete; }
  dialog.bogen[open]::backdrop { opacity: 1; }
  @starting-style {
    dialog.bogen[open] { opacity: 0; transform: scale(.92); }
    dialog.bogen[open]::backdrop { opacity: 0; }
  }
  .bogen-kopf { display: flex; align-items: baseline; gap: .6rem; padding: .3rem .2rem .7rem; border-bottom: 1px solid var(--rand); margin-bottom: .5rem; }
  .bogen-kopf strong { font-size: 1.15rem; }
  .bogen-kopf small { opacity: .55; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bogen-zu { margin-left: auto; opacity: .6; }
  .bogen-eintrag, .bogen-form { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .8rem .5rem; --k-grund: transparent; --k-text: inherit; --k-rand: transparent; border-radius: var(--rundung); font-size: 1.05rem; text-align: left; white-space: normal; justify-content: flex-start; }
  .bogen-form { padding: 0; }
  .bogen-form .bogen-eintrag { width: 100%; }
  .bogen-eintrag:hover { background: var(--ton-2); filter: none; }
  .bogen-eintrag span { display: flex; flex-direction: column; }
  .bogen-eintrag small { opacity: .55; font-size: .8rem; }
}
@layer handy {
  @media (max-width: 48rem) {
    dialog.bogen { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--rundung-gross) var(--rundung-gross) 0 0; border-bottom: 0; padding-bottom: calc(1rem + var(--sicher-unten)); transform: translateY(1rem); }
    dialog.bogen[open] { transform: none; }
    @starting-style { dialog.bogen[open] { transform: translateY(1rem); } }
  }
}