/* OMSAG Glossar · Begriffe im Text und Tooltip
   Lädt nur auf Seiten, auf denen ein Begriff gefunden wurde. */

:root {
	--omsag-gl-accent: #50aa3c;
}

/* ── Begriff im Text ─────────────────────────────────────────────────── */
.omsag-gl {
	--gl-c: var(--omsag-gl-accent);
	cursor: help;
	border-radius: .22em;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: color-mix(in srgb, var(--gl-c) 75%, transparent);
	text-decoration-thickness: max(1.5px, .09em);
	text-underline-offset: .24em;
	text-decoration-skip-ink: none;
	-webkit-tap-highlight-color: transparent;
	transition: text-decoration-color .2s ease, background-color .2s ease, color .2s ease;
	outline: none;
}
.omsag-gl--ink { --gl-c: currentColor; }
.omsag-gl--dashed { text-decoration-style: dashed; }
.omsag-gl--solid { text-decoration-style: solid; text-decoration-thickness: max(1px, .06em); text-decoration-color: color-mix(in srgb, var(--gl-c) 55%, transparent); }
.omsag-gl--none { text-decoration-line: none; }
.omsag-gl--highlight {
	text-decoration-line: none;
	padding: 0 .12em;
	margin: 0 -.04em;
	background-image: linear-gradient(transparent 58%, color-mix(in srgb, var(--gl-c) 26%, transparent) 58%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.omsag-gl:hover,
.omsag-gl.is-open { text-decoration-color: var(--gl-c); text-decoration-style: solid; }
.omsag-gl--none:hover, .omsag-gl--none.is-open { text-decoration-line: none; }
.omsag-gl--highlight:hover,
.omsag-gl--highlight.is-open { background-image: linear-gradient(transparent 50%, color-mix(in srgb, var(--gl-c) 36%, transparent) 50%); }
.omsag-gl:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gl-c) 45%, transparent); }

/* Symbol hinter dem Wort: Fragezeichen oder Info im Kreis */
.omsag-gl--q::after,
.omsag-gl--i::after {
	content: "";
	display: inline-block;
	width: .78em;
	height: .78em;
	margin-left: .2em;
	vertical-align: -.06em;
	background-color: var(--gl-c);
	-webkit-mask: var(--gl-ico) center / contain no-repeat;
	mask: var(--gl-ico) center / contain no-repeat;
	opacity: .85;
	transition: opacity .2s ease, transform .25s cubic-bezier(.32, .72, 0, 1);
}
.omsag-gl--q { --gl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Zm0 2a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Zm.1 3.2c-2.2 0-3.8 1.3-3.9 3.3h2.1c.1-.9.8-1.5 1.8-1.5s1.7.6 1.7 1.4c0 .7-.3 1.1-1.3 1.7-1.1.7-1.6 1.4-1.5 2.6v.5h2v-.4c0-.8.3-1.1 1.3-1.8 1.1-.7 1.7-1.5 1.7-2.7 0-1.8-1.6-3.1-3.9-3.1Zm-1 10.1a1.3 1.3 0 1 0 2.6 0 1.3 1.3 0 0 0-2.6 0Z'/%3E%3C/svg%3E"); }
.omsag-gl--i { --gl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Zm0 2a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Zm-1.1 7.2h2.2v6.6h-2.2v-6.6Zm1.1-4a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Z'/%3E%3C/svg%3E"); }
.omsag-gl--q:hover::after, .omsag-gl--i:hover::after,
.omsag-gl--q.is-open::after, .omsag-gl--i.is-open::after { opacity: 1; transform: scale(1.08); }

/* ── Tooltip ─────────────────────────────────────────────────────────── */
.omsag-glt {
	--glt-bg: rgba(255, 255, 255, .9);
	--glt-solid: #fff;
	--glt-fg: #1d1d1f;
	--glt-muted: rgba(29, 29, 31, .62);
	--glt-line: rgba(0, 0, 0, .08);
	--glt-fill: rgba(0, 0, 0, .04);
	--glt-link: #3a8a28;
	--glt-sh: 0 0 0 .5px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .05), 0 16px 44px -8px rgba(0, 0, 0, .2);
	--ax: 50%;
	--ay: 50%;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 2147483000;
	box-sizing: border-box;
	width: max-content;
	max-width: min(340px, calc(100vw - 24px));
	margin: 0;
	padding: 0;
	border-radius: 16px;
	background: var(--glt-bg);
	color: var(--glt-fg);
	box-shadow: var(--glt-sh);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	font-family: var(--omsag-lp-font, inherit);
	font-size: 14.5px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: -.003em;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, 4px, 0) scale(.97);
	transform-origin: var(--ax) 100%;
	transition: opacity .16s ease, transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .3s;
}
.omsag-glt *, .omsag-glt *::before, .omsag-glt *::after { box-sizing: border-box; }
.omsag-glt.has-media { max-width: min(360px, calc(100vw - 24px)); }
.omsag-glt.is-in {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity .16s ease, transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}
.omsag-glt[data-side="bottom"] { transform-origin: var(--ax) 0; }
.omsag-glt[data-side="bottom"]:not(.is-in) { transform: translate3d(0, -4px, 0) scale(.97); }
.omsag-glt[data-side="right"] { transform-origin: 0 var(--ay); }
.omsag-glt[data-side="right"]:not(.is-in) { transform: translate3d(-4px, 0, 0) scale(.97); }
.omsag-glt[data-side="left"] { transform-origin: 100% var(--ay); }
.omsag-glt[data-side="left"]:not(.is-in) { transform: translate3d(4px, 0, 0) scale(.97); }

/* Designs */
.omsag-glt.is-dark {
	--glt-bg: rgba(30, 31, 34, .9);
	--glt-solid: #1e1f22;
	--glt-fg: #f5f5f7;
	--glt-muted: rgba(245, 245, 247, .62);
	--glt-line: rgba(255, 255, 255, .1);
	--glt-fill: rgba(255, 255, 255, .06);
	--glt-link: #b6e05a;
	--glt-sh: 0 0 0 .5px rgba(255, 255, 255, .14) inset, 0 0 0 .5px rgba(0, 0, 0, .4), 0 18px 50px -8px rgba(0, 0, 0, .55);
}
.omsag-glt.is-brand {
	--glt-bg: linear-gradient(150deg, #b2d83f, #50aa3c);
	--glt-solid: #7dc03c;
	--glt-fg: #10200a;
	--glt-muted: rgba(16, 32, 10, .7);
	--glt-line: rgba(16, 32, 10, .12);
	--glt-fill: rgba(255, 255, 255, .22);
	--glt-link: #10200a;
	--glt-sh: 0 2px 6px rgba(58, 138, 40, .2), 0 18px 44px -10px rgba(58, 138, 40, .45);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.omsag-glt.is-brand .omsag-glt__arrow { color: var(--glt-solid); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.omsag-glt { --glt-bg: #fff; }
	.omsag-glt.is-dark { --glt-bg: #1e1f22; }
}

/* Pfeil */
.omsag-glt__arrow {
	position: absolute;
	width: 18px;
	height: 9px;
	color: var(--glt-bg);
	pointer-events: none;
}
.omsag-glt__arrow svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.omsag-glt[data-side="top"] .omsag-glt__arrow { top: 100%; left: calc(var(--ax) - 9px); margin-top: -.5px; }
.omsag-glt[data-side="bottom"] .omsag-glt__arrow { bottom: 100%; left: calc(var(--ax) - 9px); transform: rotate(180deg); margin-bottom: -.5px; }
.omsag-glt[data-side="right"] .omsag-glt__arrow { right: 100%; top: calc(var(--ay) - 4.5px); transform: rotate(90deg); margin-right: -5px; }
.omsag-glt[data-side="left"] .omsag-glt__arrow { left: 100%; top: calc(var(--ay) - 4.5px); transform: rotate(-90deg); margin-left: -5px; }
.omsag-glt.is-dark .omsag-glt__arrow { color: rgba(30, 31, 34, .94); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.omsag-glt:not(.is-brand) .omsag-glt__arrow { color: color-mix(in srgb, var(--glt-solid) 92%, transparent); }
}

/* Inhalt */
.omsag-glt__inner { position: relative; padding: 14px 16px 15px; }
.omsag-glt__media {
	margin: 6px 6px 0;
	border-radius: 11px;
	overflow: hidden;
	background: var(--glt-fill);
	line-height: 0;
}
.omsag-glt__media img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; margin: 0; }
.omsag-glt__media.is-cover img { object-fit: cover; height: 170px; }
.omsag-glt__media.is-svg { padding: 14px 14px 12px; color: var(--glt-fg); }
.omsag-glt__media.is-svg svg { display: block; width: 100%; height: auto; max-height: 190px; overflow: visible; }
.omsag-glt.has-media .omsag-glt__inner { padding-top: 12px; }
.omsag-glt__kicker {
	margin: 0 0 3px;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--glt-muted);
}
.omsag-glt__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; margin: 0 0 4px; padding-right: 0; }
.omsag-glt.has-x .omsag-glt__head, .omsag-glt.has-x:not(.has-media) .omsag-glt__kicker { padding-right: 26px; }
.omsag-glt__title { margin: 0; font-size: 16px; font-weight: 680; line-height: 1.3; letter-spacing: -.012em; color: var(--glt-fg); }
.omsag-glt__long { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--glt-muted); }
.omsag-glt__text { color: var(--glt-fg); opacity: .92; }
.omsag-glt__text p, .omsag-glt__text ul, .omsag-glt__text ol { margin: 0 0 .55em; padding: 0; font: inherit; color: inherit; }
.omsag-glt__text ul, .omsag-glt__text ol { padding-left: 1.15em; }
.omsag-glt__text li { margin: 0 0 .2em; }
.omsag-glt__text > :last-child { margin-bottom: 0; }
.omsag-glt__text strong, .omsag-glt__text b { font-weight: 650; }
.omsag-glt__text a { color: var(--glt-link); text-decoration: underline; text-underline-offset: .18em; }
.omsag-glt__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	padding: 6px 12px 6px 13px;
	border-radius: 999px;
	background: var(--glt-fill);
	box-shadow: inset 0 0 0 .5px var(--glt-line);
	color: var(--glt-fg) !important;
	font-size: 13px;
	font-weight: 620;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .2s ease, transform .2s ease;
}
.omsag-glt__more:hover { background: color-mix(in srgb, var(--glt-fg) 10%, transparent); }
.omsag-glt__more:active { transform: scale(.97); }
.omsag-glt__more svg { width: 13px; height: 13px; transition: transform .25s cubic-bezier(.32, .72, 0, 1); }
.omsag-glt__more:hover svg { transform: translateX(2px); }

/* Schließen (Touch, Klick-Modus, Sheet) */
.omsag-glt__x {
	position: absolute;
	top: 9px;
	right: 9px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--glt-fill);
	color: var(--glt-muted);
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.omsag-glt__x:hover { color: var(--glt-fg); background: color-mix(in srgb, var(--glt-fg) 12%, transparent); }
.omsag-glt__x:active { transform: scale(.92); }
.omsag-glt__x svg { width: 12px; height: 12px; }
.omsag-glt.has-media .omsag-glt__x { top: 14px; right: 14px; background: color-mix(in srgb, var(--glt-solid) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ── Mobil: von unten einblenden ─────────────────────────────────────── */
.omsag-glt-scrim {
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	background: rgba(10, 12, 14, .28);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .3s ease;
	-webkit-tap-highlight-color: transparent;
}
.omsag-glt-scrim.is-in { opacity: 1; }
.omsag-glt.is-sheet {
	left: 8px !important;
	right: 8px;
	top: auto !important;
	bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	width: auto;
	max-width: 560px;
	max-height: calc(100vh - 80px);
	max-height: calc(100dvh - 80px);
	margin: 0 auto;
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: 24px;
	font-size: 15.5px;
	transform: translate3d(0, calc(100% + 24px), 0);
	transform-origin: 50% 100%;
	transition: opacity .2s ease, transform .45s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .45s;
}
.omsag-glt.is-sheet.is-in { transform: translate3d(0, var(--drag, 0px), 0); transition: opacity .2s ease, transform .45s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
.omsag-glt.is-sheet.is-drag { transition: none; }
.omsag-glt.is-sheet .omsag-glt__arrow { display: none; }
.omsag-glt.is-sheet .omsag-glt__grab { display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--glt-line); background: color-mix(in srgb, var(--glt-fg) 22%, transparent); }
.omsag-glt__grab { display: none; }
.omsag-glt.is-sheet .omsag-glt__inner { padding: 14px 20px 20px; }
.omsag-glt.is-sheet .omsag-glt__media { margin: 10px 10px 0; border-radius: 16px; }
.omsag-glt.is-sheet .omsag-glt__title { font-size: 19px; }
.omsag-glt.is-sheet .omsag-glt__x { top: 14px; right: 14px; width: 30px; height: 30px; }
.omsag-glt.is-sheet.has-media .omsag-glt__x { top: 24px; right: 24px; }
.omsag-glt.is-sheet .omsag-glt__more { margin-top: 14px; padding: 9px 16px; font-size: 14px; }
.omsag-glt.is-sheet:not(.is-dark):not(.is-brand) { --glt-bg: rgba(255, 255, 255, .94); }

/* Vorschau im OMSAG Hub */
.omsag-glt.is-preview { position: absolute; transition: none; }

@media (prefers-reduced-motion: reduce) {
	.omsag-glt, .omsag-glt.is-in, .omsag-glt.is-sheet, .omsag-glt.is-sheet.is-in { transition: opacity .12s ease, visibility 0s; transform: none !important; }
	.omsag-gl, .omsag-gl::after { transition: none; }
}
@media print {
	.omsag-gl { text-decoration: none; background: none; }
	.omsag-gl::after, .omsag-glt, .omsag-glt-scrim { display: none !important; }
}
