/* Griechisches Neues Testament — Reader
   Robinson-Pierpont 2018 Byzantine Textform
   Design language: Modern iOS. Griechisch: Gentium Book Plus (Latein + polytonisch,
   @font-face in style.css). */

/* --- Wider container override --- */
/* NTG-Reader nutzt die einheitliche Rahmenbreite (--container-max = 1240px);
   kein eigener max-width-Override mehr nötig. */

/* --- Tokens / fonts --- */
.ntg-page {
  --ntg-greek: 'Gentium Book Plus', 'Iowan Old Style', Georgia, serif;
  /* Nur echtes Griechisch nutzt --ntg-greek (Gentium); alles übrige Serif
     bleibt die normale Site-Serif (--font-serif), nicht überschrieben. */
  /* Kein Monospace im Reader: alles Chrom (G-Badges, Toolbar, Vers­zahlen,
     Section-Labels, Morph-Chips) auf Sans statt Recursive Mono. Scoped, damit
     jede var(--font-mono-ui)-Nutzung in diesem Subtree Sans auflöst. */
  --font-mono-ui: var(--font-sans);
  --ntg-variant: #F9AC4B;
  --src-byz: #30df81;
  --src-na: #ffae49;
  --src-ecm: #02a9ff;
  --src-multi: #fe303a;
  --src-tr: #fe303a;
  --src-combined: #b388ff;

  padding: 1.25rem 0 4rem;
  min-height: 100vh;
  position: relative;

  /* Kopf (Header + Toolbar) läuft exakt so breit wie die Textspalte;
     öffnet das Lexikon-Panel, wächst er auf Text + Panel mit (Desktop-Media
     unten koppelt die Variable an den Grid-Zustand). */
  --ntg-head-w: 720px;
}

/* --- Title page --- */
.ntg-header {
  max-width: min(var(--ntg-head-w), 100%);
  margin: 1rem auto 2.25rem;
  text-align: left;
  transition: max-width 0.35s ease;
}

.ntg-header h1 {
  /* Produkttitel in Site-Serif (buchhafter Auftakt der Titelseite);
     Gentium bleibt echtem Griechisch vorbehalten. */
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--text-bright);
  line-height: 1.05;
}

/* Typenschild statt Zeilenstapel: Label-Wert-Paare in einer Reihe */
.ntg-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  margin: 1.125rem 0 0;
}

.ntg-spec dt {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

.ntg-spec dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-dim);
}

/* --- Toolbar (Running Header) --- */
.ntg-toolbar {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.65rem 0 0.7rem;
  max-width: min(var(--ntg-head-w), 100%);
  margin-inline: auto;
  margin-bottom: 2rem;
  transition: max-width 0.35s ease;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  /* Die Toolbar IST der neue Header: sie klebt am Viewport-Oberrand, während der
     globale Header beim Scrollen hinausläuft (siehe .site-header-Override unten).
     Kein Andocken unter dem Header mehr → kein zweistufiges „Merge" aus zwei
     Leisten, die zusammenkleben. */
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 120;
  background: transparent;
}

/* Globaler Header scrollt weg statt sticky zu bleiben — sobald man den Reader
   nach unten scrollt, läuft er hinaus und die NTG-Toolbar übernimmt seinen Platz
   am oberen Rand. Scoped auf die NTG-Seite, da ntg.css nur dort geladen wird.
   z-index:auto, damit der Header keinen Stacking-Context bildet (sonst säße das
   mobile Menü unter der Toolbar). */
.site-header {
  position: relative;
  z-index: auto;
}

.site-header.is-hidden {
  transform: none;
}

.ntg-toolbar::before {
  content: "";
  position: absolute;
  /* -2px: deckt den 1px-Border-Top-Streifen (wird beim Sticky transparent) plus
     Sub-Pixel-Rundung ab, sonst blitzt oben ein Schlitz durch. */
  top: -2px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent) bottom / 100% 1px no-repeat,
    var(--material-bar);
  backdrop-filter: saturate(180%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.ntg-toolbar.is-stuck::before {
  opacity: 1;
}

.ntg-toolbar.is-stuck {
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.ntg-toolbar-spacer {
  flex: 1;
}

/* Book/Chapter-Dropdowns: Parität zum Design-System-<Dropdown>. Inline-Caret
   (rotiert beim Öffnen) statt Background-SVG; Accent-Häkchen auf der Auswahl
   statt Fill (Fill bleibt für Hover). Beide Selects identisch, Kapitel als
   vertikale Liste wie im Reader. */
.ntg-toolbar .pill-dropdown-btn {
  gap: var(--space-3);
  padding: 0 var(--space-3) 0 var(--space-4);
  background-image: none;
}
/* Sticky-Toolbar: Pill-Fill wird transparent. Das Frost-Material der Bar hat
   praktisch dieselbe Farbe wie der Pill-Fill (ink-2) — statt eines dritten Graus
   lösen sich die Pills ins Material auf; nur Border + Caret + Text definieren sie. */
.ntg-toolbar.is-stuck .pill-dropdown-btn {
  background-color: transparent;
}
.ntg-toolbar .pill-dropdown__value {
  flex: 1;
  text-align: left;
}
.ntg-chapter-pill .pill-dropdown__value {
  font-variant-numeric: tabular-nums;
}
.ntg-toolbar .pill-dropdown__caret {
  flex: none;
  color: var(--fg-3);
  transition: transform var(--dur) var(--ease);
}
.ntg-toolbar .pill-dropdown.open .pill-dropdown__caret {
  transform: rotate(180deg);
}

#ntg-book .pill-dropdown-item {
  padding: 0.5rem 0.85rem;
}

#ntg-chapters {
  min-width: 96px;
}

.ntg-toolbar .pill-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.ntg-chapter-pill .pill-dropdown-item {
  font-variant-numeric: tabular-nums;
}
/* Auswahl = semibold + Häkchen (kein Fill); Fill nur beim Hover. */
.ntg-toolbar .pill-dropdown-item.active {
  background: none;
}
.ntg-toolbar .pill-dropdown-item:hover {
  background: var(--fill-secondary);
  color: var(--fg-1);
}
.ntg-toolbar .pill-dropdown__check {
  flex: none;
  color: var(--accent);
  opacity: 0;
}
.ntg-toolbar .pill-dropdown-item.active .pill-dropdown__check {
  opacity: 1;
}

/* --- Plain text-style nav arrows (toolbar) --- */
.ntg-nav-round {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.ntg-nav-round:hover {
  color: var(--text-bright);
  background: var(--bg-hover);
}

.ntg-nav-round:active {
  transform: scale(var(--press-scale));
}

.ntg-nav-round:disabled {
  opacity: 0.25;
  cursor: default;
}

.ntg-nav-round:disabled:hover {
  color: var(--text-dim);
  background: none;
}

.ntg-nav-round svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* DE-Parallel-Toggle: gleicher runder IconButton; aktiv = Accent-Fill. */
.ntg-web-toggle.is-on {
  background: var(--fill-accent);
  color: var(--on-accent);
}

.ntg-web-toggle.is-on:hover {
  background: var(--fill-accent-press);
  color: var(--on-accent);
}

.ntg-toolbar-sep {
  flex: none;
  width: 1px;
  height: 22px;
  background: var(--separator);
  margin: 0 0.35rem;
}

/* --- Layout --- */
.ntg-layout {
  position: relative;
}

.ntg-text-col {
  min-width: 0;
}

.ntg-text {
  margin: 0 auto;
}

/* Desktop ≥1000px: 2-column grid. Panel grows in column 2 when opened, which
   shifts the (centered) grid left as a whole so the panel sits directly to the
   right of the text. Panel is position:sticky so it stays in view while the
   reader scrolls the chapter. */
@media (min-width: 1000px) {
  .ntg-layout {
    display: grid;
    grid-template-columns: minmax(0, 720px) 0px;
    /* Gap erst bei offenem Panel — sonst verschiebt er die (zentrierte)
       Textspalte um gap/2 nach links gegenüber Header/Toolbar. */
    column-gap: 0px;
    justify-content: center;
    align-items: start;
    transition: grid-template-columns 0.35s ease, column-gap 0.35s ease;
  }

  .ntg-layout:has(.ntg-panel.open) {
    grid-template-columns: minmax(0, 720px) 340px;
    column-gap: 1.5rem;
  }

  /* Kopf wächst synchron zum Grid: Text + column-gap + Panel */
  .ntg-page:has(.ntg-panel.open) {
    --ntg-head-w: calc(720px + 1.5rem + 340px);
  }

  .ntg-panel {
    position: sticky;
    /* Abstand nach oben, damit das Panel beim Scrollen nicht direkt unter der
       Toolbar klebt, sondern mit Luft darüber sitzt. */
    top: 184px;
    max-height: calc(100vh - 204px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    /* Container ist transparent — die beiden Teile sind je eigene Popups. */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    transform: translateX(20px);
    scrollbar-width: thin;
    scrollbar-color: var(--bg-surface) transparent;
  }

  /* Zwei getrennte Popups: Lesarten + Wort je eigene Karte (--bg-raised =
     #202024 Dark), mit Luft nach oben und dazwischen. */
  .ntg-panel-variant,
  .ntg-panel-word {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-1);
    padding: 1.1rem 1.3rem 1.4rem;
  }

  .ntg-panel-variant {
    margin: 0.75rem 0 0.8rem;
  }

  .ntg-panel-word {
    margin-bottom: 0.4rem;
  }

  /* Ohne Variante ist das Wort-Popup oben -> braucht denselben oberen Abstand. */
  #ntg-panel-content:not([data-tab]) .ntg-panel-word {
    margin-top: 0.75rem;
  }

  /* Das Lesarten-Popup ist jetzt selbst die Karte — innerer Highlight entfällt. */
  .ntg-panel-variant .ntg-variant-card {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  .ntg-panel.open {
    transform: translateX(0);
  }

  .ntg-panel::-webkit-scrollbar {
    width: 6px;
  }

  .ntg-panel::-webkit-scrollbar-thumb {
    background: var(--bg-surface);
    border-radius: 3px;
  }
}

/* --- Greek text --- */
.ntg-text {
  font-family: var(--ntg-greek);
  font-size: 1.35rem;
  line-height: 1.85;
  max-width: 720px;
  color: var(--text);
  text-align: justify;
  text-wrap: pretty;
  font-feature-settings: "kern", "liga";
  transition: opacity 0.35s ease;
}

.ntg-text--fading {
  opacity: 0;
}

/* --- Per-paragraph entrance animation --- */
@keyframes ntg-para-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.ntg-text--enter .ntg-para {
  opacity: 0;
  animation: ntg-para-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  /* animation-delay is set per-element via JS */
}

.ntg-loading {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
  color: var(--accent);
}

.ntg-error {
  font-family: var(--font-mono-ui);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #ff7878;
}

/* Tastatur-Kürzel-Hinweis im Panel — nur bei feinem Zeiger (Desktop). */
.ntg-kbd-hint {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .ntg-kbd-hint {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--text-dim);
  }
}

/* Reduced Motion: Chapter-Fade + Absatz-Einblendung + Panel-Grid-Shift werden
   sofort statt animiert (Design-Vorgabe: Motion respektiert prefers-reduced-motion).
   Der globale Block in style.css nullt nur --dur*-Tokens; diese Keyframe/Transitions
   sind hartkodiert und brauchen ihren eigenen Override. */
@media (prefers-reduced-motion: reduce) {
  .ntg-text { transition: none; }
  .ntg-text--fading { opacity: 1; }
  .ntg-text--enter .ntg-para { animation: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1000px) {
  .ntg-layout,
  .ntg-header,
  .ntg-toolbar { transition: none; }
}

/* --- Verses & words --- */
.ntg-para {
  display: block;
  margin: 0 0 1.05em;
}

.ntg-vnum {
  /* inline (nicht inline-block): eine atomare Inline-Box böte eine Umbruch-
     Stelle nach sich, sodass die Versnummer allein am Zeilenende landen könnte.
     Inline + kein Leerzeichen zum Folgewort -> Nummer klebt am Wort, Umbruch
     passiert davor. */
  display: inline;
  color: var(--text-muted);
  font-family: var(--font-mono-ui);
  font-size: 0.62em;
  font-weight: 600;
  margin-right: 0.2ch;
  vertical-align: 0.55em;
  letter-spacing: 0.02em;
  user-select: none;
  padding: 0.05em 0.2em;
}

.ntg-word {
  cursor: text;
  border-radius: 6px;
  padding: 0.05em 0.16em;
  margin: 0 -0.05em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  touch-action: manipulation;
}

.ntg-word:hover {
  background: var(--fill-secondary);
  color: var(--text-bright);
  cursor: pointer;
}

.ntg-word.active {
  background: var(--fill-secondary-press);
  color: var(--text-bright);
}

/* Hover über einem Varianten-Wort: schon ein Hauch Variantenfarbe (leichter als
   die Selektion) statt dem generischen --bg-raised — zeigt die Quelle vorab an. */
.ntg-variant .ntg-word:hover {
  background: color-mix(in srgb, var(--variant-color) 18%, transparent);
  color: var(--text-bright);
}

/* Wort mit Lesevariante: Selektion in der Variantenfarbe (hellerer Highlight als
   die 14%-Tönung des Bereichs), statt dem generischen --bg-surface. */
.ntg-variant .ntg-word.active {
  background: color-mix(in srgb, var(--variant-color) 32%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-color) 55%, transparent);
}

.ntg-punct {
  color: inherit;
}

/* --- Variant markers ---
   Wrapper provides decorative wavy underline across the range. A small
   superscript pin sits at the end of the range as the explicit click target,
   so word clicks inside the range stay reachable without ambiguity. */
.ntg-variant {
  --variant-color: var(--ntg-variant);
  /* Straight underline that skips around glyph descenders (default skip-ink). */
  text-decoration: underline;
  text-decoration-color: var(--variant-color);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 4px;
}

.ntg-variant.ntg-variant--src-byz {
  --variant-color: var(--src-byz);
}

.ntg-variant.ntg-variant--src-na {
  --variant-color: var(--src-na);
}

.ntg-variant.ntg-variant--src-ecm {
  --variant-color: var(--src-ecm);
}

.ntg-variant.ntg-variant--src-multi {
  --variant-color: var(--src-multi);
}

.ntg-variant.variant-active {
  background-color: color-mix(in srgb, var(--variant-color) 14%, transparent);
  border-radius: 2px;
}

/* Drop horizontal word padding inside a variant range: that padding is not
   covered by the underline, leaving gaps at the spaces between words. Vertical
   padding (tap height) is kept. */
.ntg-variant .ntg-word {
  padding-left: 0;
  padding-right: 0;
}

/* --- Panel tabs (mobile: choose varia lectio vs word; desktop: both shown) --- */
.ntg-panel-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 1.1rem;
}

.ntg-tab {
  flex: 1;
  padding: 0.55rem 0.4rem;
  background: var(--fill-secondary);
  border: 0;
  border-radius: var(--radius-2);
  color: var(--fg-2);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.ntg-tab.is-active {
  color: var(--accent);
  background: var(--accent-tint);
}

/* Desktop: tabs hidden, both sections stacked (variant first). */
@media (min-width: 1000px) {
  .ntg-panel-tabs {
    display: none;
  }
}

/* Mobile: tabs switch which section is visible. */
@media (max-width: 999px) {

  /* Mobil sind Lesarten + Wort gemerged (keine Tabs) — nur Abstand dazwischen. */
  .ntg-panel-variant {
    margin-bottom: 1.4rem;
  }
}

/* --- Panel (shared base, media queries set position/size) --- */
.ntg-panel {
  opacity: 0;
  transition: opacity 0.25s, transform 0.3s;
  pointer-events: none;
  font-family: var(--font-serif);
}

.ntg-panel.open {
  opacity: 1;
  pointer-events: auto;
}

.ntg-panel-close {
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
  z-index: 1;
}

.ntg-panel-close:hover {
  color: var(--text-bright);
}

/* --- Empty-state hint --- */
.ntg-panel-hint {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  letter-spacing: 0;
  padding-top: 0.5rem;
  max-width: 22em;
}

.ntg-panel-hint p {
  margin: 0;
}

/* Source-color swatches in the hint legend */
.ntg-src--na {
  color: var(--src-na);
}

.ntg-src--byz {
  color: var(--src-byz);
}

.ntg-src--ecm {
  color: var(--src-ecm);
}

.ntg-src--multi {
  color: var(--src-multi);
}

/* --- Panel content (consistent design system) --- */
.ntg-word-head {
  /* 1.6rem == Section-Label-Vorlauf (margin-top unten), damit Lemma→Morphologie
     und Morphologie→Lexikon denselben Rhythmus haben — beides gleichwertige
     Block-Starts, kein Sprung. */
  margin-bottom: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.ntg-lemma {
  display: block;
  font-family: var(--ntg-greek);
  font-size: 1.85rem;
  color: var(--text-bright);
  line-height: 1.1;
  /* Minimal negatives Tracking — gibt dem Lemma die Dichte/Autorität eines
     gedruckten Lexikon-Eintrags, ohne die Größe zu ändern. */
  letter-spacing: -0.01em;
  /* Lemma bleibt 400 (Gentium Book Plus hat echtes 700, aber die Hierarchie soll
     Größe + Farbe tragen, nicht Strichstärke). font-synthesis aus. */
  font-weight: 400;
  font-synthesis: none;
}

/* Besonders hervorgehoben: runde Pill (abgesetzt von den eckigen Morph-Chips),
   heller Mono-Text + Accent-Dot als Marker (Brand-Dot-Sprache; die Zahl selbst
   bleibt neutral, nicht accentfarben). */
.ntg-strong-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  background: var(--fill-secondary);
  border: 0;
  border-radius: var(--radius-full);
  padding: 0.25rem 0.7rem 0.25rem 0.55rem;
  line-height: 1.4;
}

.ntg-strong-badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.ntg-strong-badge i {
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Section label — clean iOS uppercase, Hairline-Top trennt die Abschnitte. */
.ntg-section-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 1.4rem 0 0.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--separator);
}

/* Erstes Label in einer Karte (z.B. "Lesarten") ist der Karten-Titel — kein
   Trenner darüber. */
.ntg-section-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Gloss — primary meaning */
.ntg-gloss {
  /* Etwas kleiner als das griechische Lemma — das Wort bleibt der primäre Anker,
     die Hauptbedeutung ordnet sich ihm unter. Schrift ist normale Site-Serif
     (--font-serif), nicht Gentium: nur echtes Griechisch nutzt Gentium. */
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-bright);
  line-height: 1.1;
  /* Eigene Atemzone unter der Hauptbedeutung, damit der Blick erst "Wort"
     fasst und dann in die Synonyme gleitet. */
  margin-bottom: 0.6rem;
}

.ntg-gloss-detail {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  /* Gleiche Farbe wie die Morphologie-Zeile (text-dim) — Synonyme und
     Grammatik sind dieselbe Sekundär-Ebene. Strafferes Leading bindet den
     15-Wort-Strom zu einem kompakten Wörterbuch-Block. */
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 0.4rem;
}

/* Morphologie — schlichte komma-getrennte Grammatik-Zeile (Serif, dim).
   Gleiche Größe wie die Lexikon-Alt-Liste (.ntg-gloss-detail) — beides
   Sekundär-Serif, soll konsistent sein. */
.ntg-morph-line {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin-top: 0.1rem;
}

/* Reference + NT-count — unified data style */
.ntg-occurrences {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.ntg-occurrences strong {
  font-family: var(--ntg-greek);
  color: var(--text-bright);
  font-weight: 600;
}

/* Senses toggle — proper UI button affordance */
.ntg-senses-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--fill-secondary);
  border: 0;
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.44rem 0.9rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  margin-top: 0.6rem;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

/* Chevron aus Border-Kanten (kein Glyph-Marker); dreht beim Aufklappen. */
.ntg-senses-toggle::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  flex: none;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}

.ntg-senses-toggle[aria-expanded="true"]::before {
  transform: rotate(45deg);
}

.ntg-senses-toggle:hover {
  background: var(--fill-secondary-press);
}

.ntg-senses-toggle:active {
  transform: scale(var(--press-scale));
}

.ntg-senses-body {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin-top: 0.7rem;
  padding-left: 0.95rem;
  border-left: 1px solid var(--hairline);
  white-space: pre-wrap;
  word-break: break-word;
}

.ntg-senses-body .grk {
  font-family: var(--ntg-greek);
  font-size: 1.06em;
  color: var(--text);
}

/* Lexicon sense entries (rendered by ntg.js renderSenses) */
.ntg-sense {
  margin-bottom: 0.35rem;
}

.ntg-sense-sub {
  margin-left: 0.9rem;
  margin-top: 0.25rem;
}

.ntg-sense-num {
  color: var(--text-muted);
  font-family: var(--font-mono-ui);
  font-size: 0.78em;
  margin-right: 0.35em;
}

/* --- Variant panel: eigene hervorgehobene Karte, abgekoppelt vom Wort-Teil --- */
.ntg-variant-card {
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 0.8rem 1rem 1rem;
}

/* "Lesarten" steht über der Karte (nicht drin), damit das Schließen-X im
   transparenten Label-Band sitzt statt auf der Karten-Ecke. */
.ntg-panel-variant>.ntg-section-label:first-child {
  margin-top: 0.2rem;
}

.ntg-variant-line {
  margin-top: 0.8rem;
}

.ntg-variant-line:first-child {
  margin-top: 0;
}

/* Quell-Name als kleines Sans-Eyebrow (Farbe über .ntg-variant-pill--<src>),
   Lesart darunter in Griechisch. */
.ntg-variant-src {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.18rem;
}

.ntg-variant-pill--byz {
  color: var(--src-byz);
}

.ntg-variant-pill--rp {
  color: var(--accent);
}

.ntg-variant-pill--na {
  color: var(--src-na);
}

.ntg-variant-pill--na27 {
  color: var(--src-na);
}

.ntg-variant-pill--na28 {
  color: var(--src-na);
}

.ntg-variant-pill--na27_28 {
  color: var(--src-na);
}

.ntg-variant-pill--ecm {
  color: var(--src-ecm);
}

.ntg-variant-pill--tr {
  color: var(--src-tr);
}

.ntg-variant-pill--combined {
  color: var(--src-combined);
}

.ntg-variant-reading {
  font-family: var(--ntg-greek);
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--text);
}

.ntg-variant-missing {
  font-style: italic;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: 0.92rem;
}

/* --- Narrow desktop & phone: panel becomes bottom sheet --- */
@media (max-width: 999px) {
  .ntg-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-raised);
    border-left: none;
    border-radius: 14px 14px 0 0;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(100%);
    box-shadow: 0 -8px 32px var(--shadow-strong);
    padding: 1.25rem 1.3rem calc(1.5rem + env(safe-area-inset-bottom));
  }

  .ntg-panel.open {
    transform: translateY(0);
  }

  .ntg-panel::before {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 1rem;
  }

  .ntg-panel-close {
    display: none;
  }

  .ntg-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
  }

  .ntg-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 700px) {
  .ntg-header {
    margin: 0.5rem 0 1.5rem;
  }

  .ntg-header h1 {
    font-size: 1.9rem;
  }

  .ntg-specs {
    flex-direction: column;
    gap: 0.75rem;
  }

  .ntg-spec dd {
    font-size: 0.875rem;
  }

  .ntg-page {
    padding-bottom: 1.5rem;
    min-height: 0;
  }

  .ntg-toolbar {
    gap: 0.4rem;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0.5rem 0;
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 120;
    background: transparent;
    margin-bottom: 1.5rem;
  }

  /* Raised bg must also cover the safe-area strip above the toolbar, else
     scrolling text shows through that gap once the toolbar is stuck. The
     extra 2px kills the sub-pixel seam from fractional device-pixel rounding. */
  .ntg-toolbar::before {
    top: calc(-1 * env(safe-area-inset-top) - 2px);
  }

  /* Stuck bg must be solid even mid-fade, otherwise the strip flickers
     see-through while the opacity transition runs. */
  .ntg-toolbar.is-stuck::before {
    transition: none;
  }

  .ntg-toolbar-spacer {
    display: block;
  }

  .ntg-toolbar #ntg-book {
    flex-shrink: 1;
    min-width: 0;
  }

  .ntg-toolbar #ntg-chapters {
    min-width: 0;
  }

  /* Anchor dropdowns to the toolbar (not the small pill) so they always stay
     within the viewport regardless of how far right the pill sits. */
  .ntg-toolbar .pill-dropdown {
    position: static;
  }

  .ntg-toolbar .pill-dropdown-list {
    left: 0;
    right: auto;
    max-width: calc(100vw - 1.5rem);
  }

  .ntg-toolbar #ntg-chapters .pill-dropdown-list {
    left: auto;
    right: 0;
  }

  .ntg-toolbar .pill-dropdown-btn {
    padding: 0.5rem 0.7rem;
    font-size: 1.05rem;
    min-height: 44px;
    max-width: 100%;
  }

  .ntg-toolbar #ntg-book .pill-dropdown-btn {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ntg-nav-round {
    padding: 0.55rem 0.5rem;
    font-size: 1.15rem;
    min-width: 40px;
    min-height: 44px;
    flex-shrink: 0;
  }

  /* Kein vertikales Padding: sonst ist die aktive Wort-Box höher als die
     Varianten-Tönung (die schlicht Texthöhe hat) und beide passen nicht zusammen.
     Wie auf Desktop nur horizontal etwas Tap-Breite. */
  .ntg-word {
    padding: 0 0.1em;
  }

  .ntg-vnum {
    font-size: 0.7em;
    padding: 0.1em 0.25em;
    margin-right: 0.15ch;
  }

  .ntg-lemma {
    font-size: 1.6rem;
  }

  .ntg-gloss {
    font-size: 1.3rem;
  }

  /* .site-header ist jetzt global (oben) relative statt sticky — kein
     mobil-spezifischer Override mehr nötig. */

  /* Expanded menu must sit above the reader toolbar (z-index 120). */
  .site-nav {
    z-index: 130;
  }
}

/* --- WEB-Parallel (interlinear) ------------------------------------- */
/* DE-Parallel-Toggle ist jetzt ein runder IconButton (languages-Glyph);
   Style + is-on-State stehen bei .ntg-nav-round oben. */

.ntg-vrow {
  margin: 0 0 1.15rem;
}

.ntg-text--interlinear .ntg-grk {
  font-family: var(--ntg-greek);
  font-size: 1.35rem;
  line-height: 1.7;
}

.ntg-web {
  margin-top: 0.2rem;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.ntg-web:empty {
  display: none;
}