/* ------------------------------------------------------- MMD Tooltip (Portal-Variante) - Panel wird per JS in verschoben - position:absolute (nicht fixed) + per JS positioniert -------------------------------------------------------- */ /* Wrapper um Trigger + (initial) Panel */ .mmd-tooltip { position: relative; display: inline-block; } /* Trigger als Button ohne Standard-Styles */ .mmd-tooltip__trigger { all: unset !important;; /* entfernt ALLES Button-Default */ display: inline !important; /* ganz wichtig: kein Block */ cursor: help; /* oder pointer */ text-decoration: underline !important; } /* Hover / Focus leicht betonen */ .mmd-tooltip__trigger:hover { text-decoration-thickness: 2px; } /* Fokus sichtbar aber dezent */ .mmd-tooltip__trigger:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; } /* Panel: wird im DOM ins verschoben */ .mmd-tooltip__panel { /* default hidden wird via [hidden] vom JS gesteuert */ } /* Wichtig: Portal-Panels liegen “oben drüber” */ .mmd-tooltip__panel.is-portal { position: absolute; /* ✅ nicht fixed */ z-index: 9999999; left: 0; top: 0; min-width: 260px; max-width: min(420px, 80vw); pointer-events: auto; } /* Inneres Tooltip-Card */ .mmd-tooltip__inner { display: block; background: #fff; color: #111; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); border: 1px solid rgba(0, 0, 0, .08); padding: 12px 12px 10px 12px; } /* Header: Thumbnail + Title */ .mmd-tooltip__head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-bottom: 8px; } .mmd-tooltip__thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; } .mmd-tooltip__img { width: 100%; height: 100%; object-fit: cover; display: block; } .mmd-tooltip__title { font-weight: 700; line-height: 1.2; } /* Body */ .mmd-tooltip__body { display: block; } .mmd-tooltip__body p { margin: 0.4em 0; } .mmd-tooltip__body p:first-child { margin-top: 0; } /* Falls in deinem Content Listen vorkommen */ .mmd-tooltip__body ul, .mmd-tooltip__body ol { margin: 0.4em 0 0.4em 1.2em; } /* Links im Tooltip */ .mmd-tooltip__body a { text-decoration: underline; text-underline-offset: 3px; } /* Optional: kleines “Fade-in” wenn geöffnet (funktioniert nur wenn du das Panel nicht mit display:none versteckst, sondern via [hidden] -> JS setzt hidden=false, dann wirkt die Transition) */ .mmd-tooltip__panel.is-portal[hidden] { opacity: 0; transform: translateY(4px); } .mmd-tooltip__panel.is-portal:not([hidden]) { opacity: 1; transform: translateY(0); transition: opacity 120ms ease, transform 120ms ease; } /* Inline-Problem beheben */ .mmd-tooltip__p { display:block; margin:.4em 0; } .mmd-tooltip__p:first-child { margin-top:0; } .mmd-tooltip__li { display:inline; } /* Mobile: Panel etwas breiter zulassen */ @media (max-width: 768px) { .mmd-tooltip__panel.is-portal { max-width: min(520px, 92vw); } }