/* Popover: Kästchen an einem Knopf mit Spitze, Glas-Look. Position rechnet Floating UI (popover_controller.js).
   Dazu das Kontextmenü an einer Nachricht (nachricht_menue_controller.js), gleiche Optik. */
@layer bausteine {
  .popover, .nachricht-menue {
    background: var(--glas); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--ton-4); border-radius: var(--rundung-gross); box-shadow: var(--schatten); color: CanvasText;
  }
  .popover { position: absolute; top: 0; left: 0; z-index: var(--z-popover); width: max-content; max-width: min(var(--pop-max, 20rem), calc(100vw - 1rem)); opacity: 0; transform: scale(.96); transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); }
  .popover.offen { opacity: 1; transform: none; }
  .popover-spitze { position: absolute; width: .9rem; height: .9rem; background: inherit; border: inherit; transform: rotate(45deg); clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: .15rem 0 0 0; }
  .popover[data-seite=top] .popover-spitze { transform: rotate(225deg); }
  .popover[data-seite=left] .popover-spitze { transform: rotate(135deg); }
  .popover[data-seite=right] .popover-spitze { transform: rotate(-45deg); }
  .popover-inhalt { position: relative; padding: .5rem; max-height: min(70vh, calc(100dvh - 8rem)); overflow-y: auto; overscroll-behavior: contain; }
  .popover-kopf { text-align: center; font-weight: 600; padding: .4rem .8rem .6rem; border-bottom: 1px solid var(--rand); margin: 0 0 .4rem; }
  .popover-menue { display: flex; flex-direction: column; gap: .3rem; min-width: 13rem; }
  .popover-menue form { display: contents; }
  .menue-eintrag, .popover input[type=submit].menue-eintrag, .nachricht-menue button {
    --k-grund: var(--ton-2); --k-text: inherit; --k-rand: transparent;
    display: block; width: 100%; text-align: center; text-decoration: none; padding: .7rem .9rem; border-radius: var(--rundung); font-size: 1rem; white-space: normal;
  }
  .menue-eintrag:hover, .nachricht-menue button:hover { --k-grund: var(--ton-4); filter: none; }
  .menue-eintrag.gefaehrlich, .nachricht-menue button.gefaehrlich { --k-text: var(--gefahr); font-weight: 600; }
  .menue-eintrag.aktiv { --k-grund: var(--akzent-mittel); }
  .popover-inhalt-text { padding: .3rem .6rem .2rem; font-size: .92rem; overflow-wrap: anywhere; }
  .popover-inhalt-text .kern { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: .4rem 0 .6rem; }
  .popover-inhalt-text ol { padding-left: 1.1rem; margin: 0; }
  .popover-inhalt-text li { margin: .35rem 0; line-height: 1.4; }
  .popover-form { display: flex; flex-direction: column; gap: .6rem; padding: .4rem .5rem; min-width: 17rem; max-width: 22rem; }
  .popover-form input, .popover-form textarea, .popover-form select { width: 100%; }
  .punkte { font-weight: 700; letter-spacing: .1em; padding: .4rem .7rem; }
  .nachricht-menue { position: absolute; z-index: var(--z-menue-nachricht); display: flex; flex-direction: column; gap: .3rem; min-width: 13rem; padding: .5rem; }
  .nachricht-menue[hidden] { display: none; }
}