/* Onboarding-Avatar (tinu.js): Avatar unten links (rechts sitzt MEE/Support), Sprechblase darueber, Licht um das Ziel. Kein Fokusfang, nichts verdeckt Knoepfe der Seite. */
.tinu { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: min(380px, calc(100vw - 28px)); pointer-events: none }
.tinu > * { pointer-events: auto }
body:has(#tab-leiste:not([hidden])) .tinu, body:has(#ew-leiste:not([hidden])) .tinu { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) }
.tinu-blase { position: relative; background: var(--pflaume); color: var(--milch); border: 1px solid var(--linie); border-radius: 18px 18px 18px 6px; padding: 14px 16px; box-shadow: 0 14px 38px rgba(10,4,16,.42), inset 0 1px 0 rgba(255,255,255,.04) }
:root[data-theme="light"] .tinu-blase { box-shadow: 0 10px 30px rgba(60,20,90,.12) }
/* Kennzeichnung «KI-Avatar» (tinu.label): klein, aber lesbar (Kontrast Nebel auf Pflaume > 7:1), mit Markenpunkt */
.tinu-label { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; color: var(--nebel) }
.tinu-label:empty { display: none }
.tinu-label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--verlauf) }
.tinu-schritt { margin: 0 0 6px; color: var(--korall-schrift) }
.tinu-text { margin: 0 0 8px; font-weight: 600; line-height: 1.45 }
.tinu-hilfe { margin: 0 0 8px; color: var(--nebel) }
.tinu-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.tinu-tts { display: inline-flex; gap: 4px; align-items: center; color: var(--nebel); margin-left: auto; cursor: pointer }
/* Avatar: rund, Verlaufsring Koralle -> Violett, weicher Schein; innen MEEYO-Nacht, damit ein freigestellter Clip (WebM mit Alpha) auf jeder Seite gleich aussieht */
/* button[type=button] aus meeyo.css (0,1,1) darf Ring und Groesse nicht ueberschreiben -> button.tinu-avatar[type=button] */
.tinu-avatar { --tinu-g: 68px }
.tinu-avatar, button.tinu-avatar[type=button] { position: relative; width: var(--tinu-g); height: var(--tinu-g); flex: none; border-radius: 50%; padding: 3px; border: 0; background: linear-gradient(135deg, var(--korall), var(--violett)); overflow: visible; cursor: default; display: block; line-height: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(10,4,16,.38), 0 0 22px rgba(255,79,122,.30), 0 0 34px rgba(139,61,255,.22) }
:root[data-theme="light"] .tinu-avatar { box-shadow: 0 6px 18px rgba(60,20,90,.18), 0 0 18px rgba(255,79,122,.22), 0 0 28px rgba(139,61,255,.16) }
.tinu-avatar.spricht { animation: tinu-schein 2.4s ease-in-out infinite }
@keyframes tinu-schein { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(10,4,16,.38), 0 0 22px rgba(255,79,122,.30), 0 0 34px rgba(139,61,255,.22) } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(10,4,16,.38), 0 0 30px rgba(255,79,122,.45), 0 0 46px rgba(139,61,255,.34) } }
.tinu.zu .tinu-avatar { cursor: pointer; --tinu-g: 54px }
.tinu-avatar img, .tinu-avatar video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; border-radius: 50%; background: radial-gradient(circle at 50% 78%, #3a1a4a 0%, #221230 45%, #160a1c 100%) }
.tinu-avatar video { pointer-events: none }
.tinu-avatar.tippbar { cursor: pointer }
/* 12.10.: Figur = Avatar + Griff + «Ton an». touch-action: none, sonst nimmt der Browser das Ziehen mit dem Finger als Scrollen */
.tinu-figur { position: relative; flex: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
.tinu-figur img { -webkit-user-drag: none; user-select: none }
.tinu-griff, button.tinu-griff[type=button] { position: absolute; top: -4px; right: -4px; z-index: 2; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--pflaume); color: var(--milch); font-size: 15px; line-height: 1; display: grid; place-items: center; cursor: grab; touch-action: none;
  box-shadow: 0 3px 10px rgba(10,4,16,.35) }
.tinu.zieht .tinu-griff, .tinu.zieht .tinu-avatar { cursor: grabbing }
.tinu.zieht { transition: none }
.tinu-griff:focus-visible { outline: 2px solid var(--korall); outline-offset: 2px }
.tinu-ton, button.tinu-ton[type=button] { position: absolute; left: calc(100% + 8px); bottom: 2px; white-space: nowrap; padding: 6px 12px; min-height: 0; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--pflaume); color: var(--milch); font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(10,4,16,.35) }
.tinu.rechts .tinu-ton { left: auto; right: calc(100% + 8px) }
/* verschoben: Platz kommt aus tinu.js (left/top); oben im Fenster steht die Blase unter Tinu, rechts schliesst sie rechts ab */
.tinu.verschoben.oben { flex-direction: column-reverse }
.tinu.verschoben.rechts { align-items: flex-end }
.tinu.verschoben.oben .tinu-blase { border-radius: 6px 18px 18px 18px }
.tinu.verschoben.rechts .tinu-blase { border-radius: 18px 18px 6px 18px }
.tinu.verschoben.oben.rechts .tinu-blase { border-radius: 18px 6px 18px 18px }
/* Freigestellt (WebM mit Alpha): kein Kreis, kein Ring, kein Rechteck — nur Tinu mit weichem Schatten und Markenschein */
.tinu.frei .tinu-avatar, .tinu.frei button.tinu-avatar[type=button] { --tinu-g: 128px; padding: 0; background: none; border-radius: 0; box-shadow: none }
.tinu.frei .tinu-avatar img, .tinu.frei .tinu-avatar video { border-radius: 0; background: transparent; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 8px 14px rgba(10,4,16,.45)) drop-shadow(0 0 16px rgba(255,79,122,.22)) }
.tinu.frei .tinu-avatar.spricht { animation: none }
.tinu.frei .tinu-avatar.spricht img, .tinu.frei .tinu-avatar.spricht video { filter: drop-shadow(0 8px 14px rgba(10,4,16,.45)) drop-shadow(0 0 22px rgba(255,79,122,.38)) drop-shadow(0 0 30px rgba(139,61,255,.25)) }
.tinu.frei.zu .tinu-avatar { --tinu-g: 84px }
/* Das Ziel leuchtet: Ring in Koralle mit violettem Hof, pulsierend; .tinu-leuchtet sitzt am Ziel selbst (Marke + Abstand beim Rollen) */
.tinu-licht { position: fixed; z-index: 59; border-radius: 14px; pointer-events: none; border: 2px solid var(--korall);
  box-shadow: 0 0 0 3px rgba(139,61,255,.55), 0 0 18px 4px rgba(255,79,122,.45); animation: tinu-puls 1.4s ease-in-out infinite }
.tinu-licht.ruhig { animation: none }
@keyframes tinu-puls { 0%, 100% { box-shadow: 0 0 0 3px rgba(139,61,255,.55), 0 0 18px 4px rgba(255,79,122,.45) } 50% { box-shadow: 0 0 0 9px rgba(139,61,255,.16), 0 0 32px 10px rgba(255,79,122,.28) } }
.tinu-leuchtet { scroll-margin: 25vh 0 }
/* Pfeil von Tinu zum Ziel */
.tinu-zeiger { position: fixed; z-index: 61; width: 0; height: 0; pointer-events: none; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 14px solid var(--korall); filter: drop-shadow(0 0 6px rgba(255,79,122,.6)) }
@media (prefers-reduced-motion: reduce) { .tinu-licht, .tinu-avatar.spricht { animation: none } }
/* Handy: kleinerer Avatar, Blase ueber die ganze Breite, Text bleibt lesbar */
@media (max-width: 480px) {
  .tinu { left: 10px; right: 10px; max-width: none; gap: 8px }
  .tinu-blase { padding: 12px 14px; border-radius: 16px 16px 16px 6px }
  .tinu .tinu-avatar { --tinu-g: 56px } .tinu.zu .tinu-avatar { --tinu-g: 48px }
  .tinu.frei .tinu-avatar { --tinu-g: 104px } .tinu.frei.zu .tinu-avatar { --tinu-g: 72px }
  .tinu.verschoben { right: auto; max-width: calc(100vw - 20px) }
  .tinu-text { font-size: .95rem }
  .tinu-knoepfe .knopf.klein { padding: 9px 14px }
}
/* Promoter-Portal: «Tinu mitsenden», Fortschritt der Eingeladenen, Neuigkeiten-Karte */
.tinu-mitsenden { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--linie); border-radius: var(--radius-klein) }
.tinu-mitsenden .zeile { display: flex; gap: 8px; align-items: center; font-weight: 600 }
.tinu-mitsenden .chips { margin-top: 8px }
.tinu-mitsenden .chips button.an { background: var(--verlauf); color: #fff; border-color: transparent }
.tinu-karte { display: flex; gap: 14px; align-items: flex-start }
.tinu-karte .tinu-avatar { flex: none; --tinu-g: 60px }
.tinu-karte .tinu-blase { flex: 1; border-radius: 6px 18px 18px 18px; box-shadow: none }
.tinu-fortschritt li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linie) }
.tinu-balken { height: 6px; border-radius: 3px; background: var(--pflaume-hell); overflow: hidden; min-width: 90px; align-self: center }
.tinu-balken i { display: block; height: 100%; background: var(--verlauf) }
.tinu-fortschritt { list-style: none; padding: 0; margin: 0 }
/* ── 13.10.2026 Tinu-Mini (tinu.js M.*): eine kleine ganze Figur, freigestellt, ohne Kreis — spaziert unten, steht, pfeift, winkt.
   Position nur per transform (tinu.js), darum kein Layout-Sprung. Filme (mini.*) ersetzen die CSS-Figur, sobald sie laufen. ── */
.tinu-mini, .tinu-sicher, .tinu-noten { display: none }
.tinu.mini { --tinu-mini-h: 150px; transition: none; will-change: transform }
.tinu.mini .tinu-avatar { display: none }
.tinu.mini .tinu-mini { display: block; position: relative; width: calc(var(--tinu-mini-h) * .625); height: var(--tinu-mini-h); padding: 0; margin: 0; border: 0;
  background: none; box-shadow: none; cursor: pointer; line-height: 0; touch-action: none; -webkit-tap-highlight-color: transparent }
button.tinu-mini[type=button] { min-height: 0; background: none; border: 0; padding: 0 }
.tinu.mini .tinu-mini:focus-visible { outline: 2px solid var(--korall); outline-offset: 3px; border-radius: 12px }
.tinu-sicher { position: absolute; width: 0; padding-bottom: env(safe-area-inset-bottom, 0px); pointer-events: none }
.tinu.mini .tinu-sicher { display: block; visibility: hidden }
/* Spricht er: der freigestellte Halbkoerper-Clip steht an seinem Platz, die kleine Figur ist so lange weg */
.tinu.mini.m-spricht .tinu-avatar { display: block }
.tinu.mini.m-spricht.frei .tinu-avatar, .tinu.mini.m-spricht.frei button.tinu-avatar[type=button] { width: calc(var(--tinu-mini-h) * .75); height: calc(var(--tinu-mini-h) * 1.3) }   /* Oberkoerper 540×960 */
.tinu.mini.m-spricht .tinu-mini { display: none }
.tinu-mini-bild { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 6px 10px rgba(10,4,16,.42)) drop-shadow(0 0 12px rgba(255,79,122,.2)) }
.tinu.mini.links .tinu-mini-bild { transform: scaleX(-1) }   /* die Filme schauen nach rechts — nach links gespiegelt */
.tinu-mini-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; background: transparent; pointer-events: none }
.tinu.mini.m-film .tinu-koerper { visibility: hidden }
/* 14.10.: Standbild aus dem Steh-Film statt der gezeichneten Figur; laeuft ein Film, liegt er allein da (kein Doppelbild beim Gehen) */
.tinu-mini-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none }
.tinu.mini.m-poster .tinu-koerper { visibility: hidden }
.tinu.mini.m-film .tinu-mini-poster { visibility: hidden }
/* CSS-Figur (bis die Filme da sind): Portrait als Kopf, Kapuzenpulli im Markenverlauf, Arme, Beine, Schuhe */
.tinu-koerper { position: absolute; inset: 0 11%; display: block }   /* Rahmen ist 0.625 × Hoehe (breitester Film 250×400) */
.tinu-koerper i, .tinu-koerper img { position: absolute; display: block; font-style: normal }
.tk-kopf { left: 26%; top: 0; width: 48%; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--pflaume-hell);
  box-shadow: 0 0 0 2px var(--pflaume), 0 0 0 3px var(--linie); z-index: 3 }
.tk-rumpf { left: 22%; top: 26%; width: 56%; height: 36%; border-radius: 40% 40% 22% 22% / 30% 30% 16% 16%; background: var(--verlauf); z-index: 2 }
.tk-arm { top: 28%; width: 15%; height: 32%; border-radius: 999px; background: var(--violett); transform-origin: 50% 8%; z-index: 1 }
.tk-arm.tk-l { left: 12% } .tk-arm.tk-r { right: 12%; background: var(--korall) }
.tk-bein { top: 58%; width: 18%; height: 38%; border-radius: 6px 6px 4px 4px; background: var(--pflaume-hell); box-shadow: inset 0 0 0 1px var(--linie); transform-origin: 50% 0 }
.tk-bein.tk-l { left: 29% } .tk-bein.tk-r { right: 29% }
.tk-bein::after { content: ""; position: absolute; left: -12%; bottom: -6%; width: 150%; height: 16%; border-radius: 6px 10px 4px 4px; background: var(--milch) }
/* gehen: Beine und Arme schwingen, der Koerper wippt */
.tinu.mini.m-gehen .tinu-koerper { animation: tinu-wippen .62s ease-in-out infinite }
.tinu.mini.m-gehen .tk-bein.tk-l, .tinu.mini.m-gehen .tk-arm.tk-r { animation: tinu-schwingen .62s ease-in-out infinite }
.tinu.mini.m-gehen .tk-bein.tk-r, .tinu.mini.m-gehen .tk-arm.tk-l { animation: tinu-schwingen .62s ease-in-out infinite reverse }
@keyframes tinu-wippen { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3%) } }
@keyframes tinu-schwingen { 0%, 100% { transform: rotate(16deg) } 50% { transform: rotate(-16deg) } }
/* stehen: ruhig atmen */
.tinu.mini.m-stehen .tinu-koerper { animation: tinu-atmen 3.6s ease-in-out infinite }
@keyframes tinu-atmen { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.015) } }
/* winken: der rechte Arm hebt sich und winkt */
.tinu.mini.m-winken .tk-arm.tk-r { animation: tinu-winken .5s ease-in-out 3 alternate; transform: rotate(-150deg) }
@keyframes tinu-winken { 0% { transform: rotate(-130deg) } 100% { transform: rotate(-170deg) } }
/* pfeifen: kleine Noten steigen auf (Ton nur mit «Ton an», tinu.js) */
.tinu.mini.m-pfeifen .tinu-noten { display: block; position: absolute; left: 62%; top: -4%; font-size: 15px; line-height: 1; color: var(--korall-schrift); pointer-events: none;
  animation: tinu-noten 1.6s ease-out infinite }
.tinu.mini.links.m-pfeifen .tinu-noten { left: auto; right: 62% }
@keyframes tinu-noten { 0% { opacity: 0; transform: translate(0, 6px) } 25% { opacity: 1 } 100% { opacity: 0; transform: translate(10px, -26px) rotate(14deg) } }
/* Griff und «Ton an» an der kleinen Figur */
.tinu.mini .tinu-griff, .tinu.mini button.tinu-griff[type=button] { top: -6px; right: -10px; width: 22px; height: 22px; font-size: 13px }
.tinu.mini .tinu-ton, .tinu.mini button.tinu-ton[type=button] { padding: 4px 10px; font-size: .78rem }
.tinu.mini:not(.verschoben) .tinu-ton { left: calc(100% + 6px) }
/* Im Promoter-Bereich loest Tinu-Mini die schwebende MEE-Blase ab («Frag MEE» steht in seinem Menue) */
html.tinu-mini-an.tinu-promoterbereich .mee-knopf-schwebend { display: none !important }
/* Bestaetigung nach «Tinu ausschalten» */
.tinu-hinweis { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 62; max-width: min(440px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 14px; border: 1px solid var(--linie); background: var(--pflaume); color: var(--milch); font-size: .9rem; box-shadow: 0 10px 30px rgba(10,4,16,.35) }
.tinu-schalter .zeile { display: flex; gap: 8px; align-items: center; font-weight: 600 }
/* 15.10.: ausgeschaltet — der kleine runde Tinu-Knopf unten links («Tinu zeigen»); bottom setzt tinu.js ueber der Tab-Leiste */
.tinu-ecke { position: fixed; left: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 58; width: 36px; height: 36px }
.tinu-ecke-knopf, button.tinu-ecke-knopf[type=button] { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--korall); background: var(--pflaume); box-shadow: 0 4px 14px rgba(10,4,16,.35); cursor: pointer; opacity: .9;
  -webkit-touch-callout: none; user-select: none; touch-action: manipulation }
.tinu-ecke-knopf:hover, .tinu-ecke-knopf:focus-visible { opacity: 1 }
.tinu-ecke-knopf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; pointer-events: none }
.tinu-ecke-weg, button.tinu-ecke-weg[type=button] { position: absolute; top: -7px; right: -9px; width: 18px; height: 18px; min-height: 0; padding: 0;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--nacht); color: var(--nebel); font-size: 12px; line-height: 1; cursor: pointer }
.tinu-schalter .fehler { color: var(--rot) }
@media (max-width: 480px) { .tinu.mini { --tinu-mini-h: 112px; left: 0; right: auto; max-width: calc(100vw - 20px) } }
@media (prefers-reduced-motion: reduce) {
  .tinu.mini .tinu-koerper, .tinu.mini .tk-bein, .tinu.mini .tk-arm, .tinu.mini .tinu-noten { animation: none !important }
  .tinu.mini.m-winken .tk-arm.tk-r { transform: rotate(-150deg) }
}
/* 15.10.: MEE «Zeig es mir» (mee_zeige.js) nutzt diese Blase und dieses Leuchten; unter jeder MEE-Antwort die zwei Knoepfe */
.mee-nach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -2px 0 6px }
.mee-nach .mee-aktion { margin: 0 }
.mee-zeigen { border-color: var(--korall); box-shadow: 0 0 0 2px rgba(139,61,255,.35), 0 0 12px 2px rgba(255,79,122,.35) }
.mee-nicht { background: none; border: 0; color: var(--nebel); text-decoration: underline; padding: 2px 4px; font-size: .8rem; cursor: pointer }
.mee-nicht:disabled { text-decoration: none; cursor: default }
/* Karten (Leaflet) bilden eine eigene Ebene — sonst liegt die Karte ueber Blase und Leuchtring (gemessen 15.10. auf /karte, 390 px) */
.leaflet-container { z-index: 0 }

/* 16.10.2026: Tinu-Schalter in der Kopfzeile des Portals (tinu.js .tinu-kopf-schalter) — Gesicht + Punkt an/aus, aria-pressed */
.tinu-kopf-schalter { position: relative; padding: 0; overflow: visible }
.tinu-kopf-schalter img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block }
.tinu-kopf-schalter.aus img { filter: grayscale(1); opacity: .55 }
.tinu-kopf-punkt { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #3ecf8e; border: 2px solid var(--nacht, #160a1c) }
.tinu-kopf-schalter.aus .tinu-kopf-punkt { background: #8a8296 }
/* 16.10.: Menue des Ecken-Knopfs (lange druecken) */
.tinu-ecke-menue { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 200px; max-width: calc(100vw - 32px);
  background: var(--pflaume, #2a1533); border: 1px solid var(--linie, #4a3352); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35) }
.tinu-ecke-menue .knopf { text-align: left }
/* 16.10.: Tinu-Steuerung des Owners (tinu_steuerung.js) — Karte im Admin, schwebend im Portal */
.tinu-steuer .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 }
.tinu-steuer .tinu-steuer-link { width: 100%; box-sizing: border-box; margin: 4px 0 }
.tinu-steuer .tinu-steuer-knoepfe { display: flex; flex-wrap: wrap; gap: 8px }
.tinu-steuer-pop { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: 80vh; overflow: auto }
.tinu-steuer-zu { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 22px; color: inherit; cursor: pointer }

/* 16.10. (Owner: «Tinu von überall erreichen — oben rechts»): runder Knopf oben rechts, top setzt tinu.js unter die Kopfzeile */
.tinu-oben { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); top: 80px; z-index: 58; width: 44px; height: 44px }
.tinu-oben-knopf, button.tinu-oben-knopf[type=button] { width: 44px; height: 44px; min-height: 0; padding: 2px; border-radius: 50%; overflow: hidden; border: 0;
  background: linear-gradient(135deg, var(--korall), var(--violett)); box-shadow: 0 6px 18px rgba(10,4,16,.35); cursor: pointer; display: block }
.tinu-oben-knopf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; border-radius: 50%; pointer-events: none }
.tinu-oben-knopf:focus-visible { outline: 2px solid var(--violett); outline-offset: 2px }
.tinu-oben-menue { left: auto; right: 0; bottom: auto; top: calc(100% + 8px) }