/* ---------- Klick-Übersetzung (Wort und Satz) ---------- */
.gl-pop[hidden], .gl-btn[hidden], .gl-sent[hidden] { display: none !important; }
/* Klick-Übersetzung ohne Unterstreichung: Hover und Klick zeigen das Wort. */
html.gl-on .lesson .gw { cursor: pointer; border-radius: 3px; transition: background-color .15s ease; }
/* Markierung und Hand-Zeiger nur in Lektionen; sonst bleibt der Zeiger des Elements (Pfeil, bei Links und Knöpfen die Hand). */
html.gl-on .lesson .gw:hover, html.gl-on .lesson .gw:focus-visible, html.gl-on .lesson .gw.is-open { background: var(--green-soft); outline: none; }
.gw { cursor: inherit; }
.gw-group { display: inline; }
.gl-btn {
	display: inline-flex; align-items: center; height: 28px; padding: 0 10px; margin-inline-start: 4px;
	border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2);
	font: inherit; font-size: 1rem; min-height: 44px; font-weight: 700; cursor: pointer; vertical-align: middle;
}
.gl-btn:hover { background: var(--green-soft); color: var(--ink); }
.gl-btn[aria-expanded="true"] { background: var(--green-soft); color: var(--ink); }
.gl-sent {
	margin-top: 8px; padding: 8px 12px; border-inline-start: 3px solid var(--green); border-radius: var(--radius-sm);
	background: var(--bg-alt); color: var(--ink-2); font-size: 1rem; font-weight: 600; line-height: 1.5;
}
.gl-sent[dir="rtl"] { text-align: right; }
.gl-pop {
	position: absolute; z-index: 1000; box-sizing: border-box; width: max-content; max-width: 220px;
	padding: 6px 10px; background: var(--ink); color: var(--surface); border-radius: var(--radius-sm);
	box-shadow: var(--shadow); font-size: 1rem; font-weight: 700; line-height: 1.35;
}
.gl-pop::before {
	content: ""; position: absolute; top: -5px; left: var(--arrow-x, 12px); width: 10px; height: 10px;
	background: var(--ink); transform: rotate(45deg); border-radius: 2px;
}
.gl-pop[dir="rtl"] { text-align: right; }

/* Mehrere Varianten in einer Blase (Farsi und Dari) */
.gl-row { display: block; }
.gl-row + .gl-row { margin-top: 4px; }
.gl-row__lbl { display: inline-block; margin-inline-end: 6px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .875rem; font-weight: 700; vertical-align: 1px; }
.gl-sent .gl-row__lbl { background: var(--line); color: var(--ink-2); }
.gl-sent .gl-row[dir="rtl"], .gl-pop .gl-row[dir="rtl"] { text-align: right; }


/* Tabellenzellen mit Übersetzung (Klick auf die Zelle, .gw für einzelne Wörter) */
html.gl-on .gl-cell { cursor: pointer; }
html.gl-on .gl-cell:hover { background: var(--green-soft); }

.gl-go { display: inline-block; margin-top: 4px; color: var(--surface); font-weight: 800; text-decoration: underline; }
.gl-pop .gl-go[hidden] { display: none; }

/* Satzübersetzung (Doppelklick): breitere Blase */
.gl-pop--sent { max-width: min(360px, calc(100vw - 24px)); font-weight: 600; font-size: 1rem; line-height: 1.45; }
html.gl-on body { touch-action: manipulation; }

/* Handy: Doppeltipp soll den Satz übersetzen, nicht Text markieren oder das Kontextmenü öffnen. */
@media (hover: none) {
	html.gl-on .lesson .gw, html.gl-on .lesson [data-gs], html.gl-on .lesson p, html.gl-on .lesson li { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ---------- Igel-Geschichte: nur Deutsch, Übersetzung bei Hover, Klick, Doppelklick ---------- */
.dl-de-only [data-lang-notice], .dl-de-only [data-tr-toggle], .dl-de-only .tr-dual { display: none !important; }
/* Hover: kleiner Hinweis */
.gl-pop--tip { max-width: 200px; padding: 4px 9px; font-size: .95rem; font-weight: 700; pointer-events: none; opacity: .96; }
/* Klick: Sprechblase */
html.gl-on .dl-hover-gloss .gl-pop:not(.gl-pop--tip):not(.gl-pop--sent) { border-radius: 14px; padding: 8px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
/* Doppelklick: Kasten direkt unter dem Satz, so breit wie der Satz */
.gl-gap { display: inline-block; position: relative; width: 0; height: 0; vertical-align: top; overflow: visible; }
.gl-box--inline { display: block; position: absolute; box-sizing: border-box; margin: 0; max-width: 100vw; animation: gl-box-in .18s ease both; }
@keyframes gl-box-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gl-box--inline { animation: none; } }

/* Grammatik-Hinweis unter der Übersetzung (Igel-Seite) */
.gl-gram { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .875rem; font-weight: 600; opacity: .95; text-align: left; }
.gl-pop--tip { max-width: 260px; }

/* Satzteile mit liegender Klammer (Doppelklick auf den Satz, Igel-Seite) */
.gl-grp { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; margin: 0 2px; }
.gl-gtx { display: block; }
.gl-br { display: block; width: 100%; height: 8px; margin-top: 2px; box-sizing: border-box; border: 2px solid var(--c, #888780); border-top: 0; border-radius: 0 0 4px 4px; }
.gl-lb { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.25; font-weight: 600; text-align: center; color: var(--ink-2); white-space: nowrap; }
.gl-lb b { display: block; color: var(--ink); font-weight: 800; }

/* Zurück-Knopf (Igel-Seite) */
.back-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px 0 8px; margin-inline-end: 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; font-size: .9375rem; cursor: pointer; }
.back-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.back-btn:hover { background: var(--green-soft); }
@media (max-width: 560px) { .back-btn { padding: 0 8px; margin-inline-end: 6px; } .back-btn span { display: none; } }

.round-back { margin: 0 0 10px; height: 36px; }

/* Normaler Pfeil über Texten (kein Text-Cursor); Links, Knöpfe und Eingabefelder behalten ihren eigenen Zeiger. */
body { cursor: default; }
input, textarea, [contenteditable="true"] { cursor: text; }