/* The live search of the Akademie (task H2, round 6, 2026-11-13): the panel of suggestions under a search field
   (Resources/Public/Suggest/suggest.js; registered with its data by Classes/Section/Suggest/SuggestData.php). Its own
   stylesheet: the hero's and the header's styles stay as they are. A white panel under the field, the field's width and
   radius, a hairline and one soft offset shadow; group labels small in navy; the match in bold; the active row in the
   pale cyan of the chips; rows at least 44 px. It lies over the page below (absolute), scrolls in itself when long.
   2026-11-14: the motion of the results (suggest.js) and the fades of the active row, the arrow and the thumbnails. */
.dgm-sg-host { position: relative; z-index: 40; }
.dgm-sg { --sg-ink: #003e52; --sg-text: #475569; --sg-acc: #00abe3; --sg-sky: #e6f6fd; --sg-sky-ink: #00658a;
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; box-sizing: border-box;
  max-height: min(64vh, 540px, var(--sg-room, 540px)); overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  border: 1px solid rgb(0 62 82 / .14); border-radius: 14px; background: #fff; color: var(--sg-ink); text-align: left;
  box-shadow: 0 22px 44px -22px rgb(0 33 44 / .42), 0 3px 8px -4px rgb(0 33 44 / .12);
  font: 400 15px/1.35 "Theme-Font", Inter, system-ui, sans-serif; }
.dgm-sg[hidden] { display: none; }
.dgm-sg *, .dgm-sg *::before, .dgm-sg *::after { box-sizing: border-box; }
.dgm-sg__g + .dgm-sg__g, .dgm-sg__g + .dgm-sg__o--all { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgb(0 62 82 / .08); }
.dgm-sg__h { padding: 6px 10px 4px; color: var(--sg-ink); font: 700 12px/1.3 "Theme-Font", Inter, system-ui, sans-serif; letter-spacing: .02em; }
.dgm-sg__o { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px;
  color: var(--sg-ink) !important; text-decoration: none !important; cursor: pointer; }
/* the active row (keyboard or pointer): its pale cyan ground fades in (100 ms) as the last one's fades out */
.dgm-sg__o::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sg-sky); opacity: 0; transition: opacity .1s ease-out; }
.dgm-sg__o:hover::before, .dgm-sg__o.is-active::before { opacity: 1; }
.dgm-sg__o:focus-visible { outline: 2px solid var(--sg-ink); outline-offset: -2px; }
.dgm-sg__pic { flex: none; width: 56px; height: 42px; overflow: hidden; border-radius: 7px; background: linear-gradient(160deg, #0b5a76, #003e52); }
.dgm-sg__pic img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .22s ease-out; }
.dgm-sg__pic img.is-ld { opacity: 1; }
.dgm-sg__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dgm-sg__n { min-width: 0; color: var(--sg-ink); font-weight: 500; overflow-wrap: anywhere; }
.dgm-sg__o--course .dgm-sg__n { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dgm-sg__n b { font-weight: 700; }
.dgm-sg__m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--sg-text); font-size: 13px; }
.dgm-sg__mark { padding: 1px 7px; border-radius: 6px; background: #f1f4f6; color: var(--sg-ink); font-size: 12px; font-weight: 600; }
.dgm-sg__o.is-booked .dgm-sg__pic { opacity: .55; }
.dgm-sg__o--count { justify-content: space-between; }
.dgm-sg__c { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--sg-sky);
  color: var(--sg-sky-ink); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.dgm-sg__c { transition: background-color .1s ease-out; }
.dgm-sg__o.is-active .dgm-sg__c, .dgm-sg__o:hover .dgm-sg__c { background: #fff; }
/* the topics in the empty field: chips that wrap */
.dgm-sg__g--chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.dgm-sg__g--chips .dgm-sg__h { flex-basis: 100%; }
.dgm-sg__g--chips .dgm-sg__o { gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid rgb(0 62 82 / .14); }
.dgm-sg__o--all { justify-content: space-between; }
.dgm-sg__o--all .dgm-sg__n { color: var(--sg-ink); font-weight: 600; }
.dgm-sg__arrow { color: var(--sg-acc); font-weight: 700; transition: transform .1s ease-out; }
.dgm-sg__num { display: inline-block; }
.dgm-sg__none { margin: 4px 10px 6px !important; color: var(--sg-ink); font-weight: 600; }
.dgm-sg__g--ways .dgm-sg__n { color: var(--sg-ink); font-weight: 600; }
.dgm-sg__g--ways .dgm-sg__o::after { content: "→"; margin-left: auto; color: var(--sg-acc); font-weight: 700; transition: transform .1s ease-out; }
/* the arrow at the row's end moves 2 px with the active row */
.dgm-sg__o:hover .dgm-sg__arrow, .dgm-sg__o.is-active .dgm-sg__arrow, .dgm-sg__g--ways .dgm-sg__o:hover::after, .dgm-sg__g--ways .dgm-sg__o.is-active::after { transform: translateX(2px); }
/* motion (suggest.js): the content as one layer; the copies of leaving rows behind the rows, out of the flow; while the
   panel's height follows its content it clips */
.dgm-sg__in { position: relative; }
.dgm-sg__ghosts { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dgm-sg.is-sizing { overflow: hidden; }
.dgm-sg__vh, .dgm-sg__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .dgm-sg__o::before, .dgm-sg__pic img, .dgm-sg__c, .dgm-sg__arrow, .dgm-sg__g--ways .dgm-sg__o::after { transition: none; }
  .dgm-sg__o:hover .dgm-sg__arrow, .dgm-sg__o.is-active .dgm-sg__arrow, .dgm-sg__g--ways .dgm-sg__o:hover::after, .dgm-sg__g--ways .dgm-sg__o.is-active::after { transform: none; }
}
@media (max-width: 639.98px) {
  .dgm-sg { padding: 6px; max-height: min(58vh, 480px, var(--sg-room, 480px)); }
  .dgm-sg__o { gap: 10px; padding: 6px 8px; }
}