/* PSE – Periodensystem der Elemente
   Kontrastreiches Design mit Kategorie-Farben, Standard: Hell */

/* ---------- Ansichtsmodi (data-theme auf <html>) ----------
   :root ist der Default = „Hell“ (frühere Hochkontrast-Hell-Optik, farbig);
   „Dunkel“ wirkt per data-theme. „Dunkel Kontrast“/„Hell Kontrast“ sind
   rein Schwarz-Weiß (auch die Kategorie-Farben). Kategorien-Farben gibt es
   deshalb im hellen Standard-Set und im dunklen Set; die beiden
   Kontrast-Blöcke sind monochrom. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #ffffff;
  --card: #ffffff;
  --border: #3d4a63;
  --text: #000000;
  --muted: #2b3448;
  --focus: #000000;
  /* Fokus-Ring-Breite: 4 px in allen Zuständen */
  --focus-w: 4px;
  /* Fokus-Halo + lesbare Schrift auf Fokus-Hintergrund: pro Theme anpassbar */
  --focus-shadow: rgba(0, 0, 0, .15);
  --focus-text: #ffffff;
  /* Kategorie-Farben (Hell): leuchtend und kräftig, klarer Hue-Abstand
     zwischen ähnlichen Bereichen (Erdalkali Orange ≠ Lanthanoid Pink ≠
     Actinoid Purpur; Übergang Indigo-Blau (230°) ≠ Postmetall Cyan
     (189°, ~41° Abstand) ≠ Halbmetall Grün (135°, ~55° Abstand) ≠
     Nichtmetall Gelb). Grund-Tokens für Kacheln, Legende und Chips;
     Hue-Vergabe orientiert an periodictable.one, nicht kopiert.
     --c-*-text: dunklere Text-Varianten für Stellen, wo die Farbe als
     Text gelesen wird (Symbol-Spalte der Elementliste, Links) — alle
     ≥ 4,5:1 auf Weiß (die leuchtenden Grund-Tokens erreichen das nicht). */
  --c-alkali: #f03e3e;
  --c-alkaline: #f76707;
  --c-transition: #99abf8;
  --c-post: #15aabf;
  --c-metalloid: #40c057;
  --c-nonmetal: #ffff37;
  --c-noble: #7048e8;
  --c-lanthanoid: #f983ac;
  --c-actinoid: #ae3ec9;
  --c-unknown: #868e96;
  --c-alkali-text: #e03131;
  --c-alkaline-text: #cf4808;
  --c-transition-text: #364fc7;
  --c-post-text: #0b7285;
  --c-metalloid-text: #237032;
  --c-nonmetal-text: #8a6100;
  --c-noble-text: #6741d9;
  --c-lanthanoid-text: #c2255c;
  --c-actinoid-text: #9c36b5;
  --c-unknown-text: #5c6675;
}

/* Dunkel (frühere Hochkontrast-Dunkel-Optik, farbig) */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-soft: #05070d;
  --card: #0a0f1c;
  --border: #7d93c4;
  --text: #ffffff;
  --muted: #cfd9ec;
  --focus: #ffe066;
  --focus-w: 4px;
  --focus-shadow: rgba(255, 224, 102, .2);
  --focus-text: #000000;
  /* Kategorie-Farben (Dunkel): noch heller/leuchtender als Hell-Set
     (Kacheln, Legende, Chips). --c-*-text: Text-Varianten für
     Symbol-Spalte und Links — alle ≥ 4,5:1 auf #0a0f1c und #000
     (Nichtmetall #ffff37: 17,9:1 auf #0a0f1c). */
  --c-alkali: #ff8787;
  --c-alkaline: #ffc078;
  --c-transition: #5c7cfa;
  --c-post: #66d9e8;
  --c-metalloid: #69db7c;
  --c-nonmetal: #ffff37;
  --c-noble: #d0bfff;
  --c-lanthanoid: #faa2c1;
  --c-actinoid: #da77f2;
  --c-unknown: #adb5bd;
  --c-alkali-text: #ff6b6b;
  --c-alkaline-text: #ffa94d;
  --c-transition-text: #748ffc;
  --c-post-text: #66d9e8;
  --c-metalloid-text: #69db7c;
  --c-nonmetal-text: #ffff37;
  --c-noble-text: #b197fc;
  --c-lanthanoid-text: #f783ac;
  --c-actinoid-text: #da77f2;
  --c-unknown-text: #868e96;
}

/* Dunkel Kontrast: rein Schwarz-Weiß (weiße Schrift auf schwarzem BG) */
[data-theme="dark-hc"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-soft: #000000;
  --card: #000000;
  --border: #ffffff;
  --text: #ffffff;
  --muted: #ffffff;
  --focus: #ffffff;
  --focus-text: #000000;
  --focus-w: 4px;
  --focus-shadow: rgba(255, 255, 255, .3);
  --c-alkali: #ffffff;
  --c-alkaline: #ffffff;
  --c-transition: #ffffff;
  --c-post: #ffffff;
  --c-metalloid: #ffffff;
  --c-nonmetal: #ffffff;
  --c-noble: #ffffff;
  --c-lanthanoid: #ffffff;
  --c-actinoid: #ffffff;
  --c-unknown: #ffffff;
  /* Text-Farben (Tabelle-Symbole, Footer-Links, Dialog-✕-Hover):
     rein weiß, wie der Rest des Schemas. */
  --c-alkali-text: #ffffff;
  --c-alkaline-text: #ffffff;
  --c-transition-text: #ffffff;
  --c-post-text: #ffffff;
  --c-metalloid-text: #ffffff;
  --c-nonmetal-text: #ffffff;
  --c-noble-text: #ffffff;
  --c-lanthanoid-text: #ffffff;
  --c-actinoid-text: #ffffff;
  --c-unknown-text: #ffffff;
}

/* Hell Kontrast: rein Schwarz-Weiß (schwarze Schrift auf weißem BG) */
[data-theme="light-hc"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #ffffff;
  --card: #ffffff;
  --border: #000000;
  --text: #000000;
  --muted: #000000;
  --focus: #000000;
  --focus-w: 4px;
  --focus-shadow: rgba(0, 0, 0, .25);
  --focus-text: #ffffff;
  --c-alkali: #000000;
  --c-alkaline: #000000;
  --c-transition: #000000;
  --c-post: #000000;
  --c-metalloid: #000000;
  --c-nonmetal: #000000;
  --c-noble: #000000;
  --c-lanthanoid: #000000;
  --c-actinoid: #000000;
  --c-unknown: #000000;
  /* Text-Farben (Tabelle-Symbole, Footer-Links, Dialog-✕-Hover):
     rein schwarz, wie der Rest des Schemas. */
  --c-alkali-text: #000000;
  --c-alkaline-text: #000000;
  --c-transition-text: #000000;
  --c-post-text: #000000;
  --c-metalloid-text: #000000;
  --c-nonmetal-text: #000000;
  --c-noble-text: #000000;
  --c-lanthanoid-text: #000000;
  --c-actinoid-text: #000000;
  --c-unknown-text: #000000;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

/* Fehler-Bootschirm (sichtbar nur, wenn die Tabelle nicht gebaut werden konnte) */
.boot-error {
  max-width: 42rem;
  margin: 2.5rem auto;
  padding: 1.25rem 1.5rem;
  border: 2px solid color-mix(in srgb, var(--c-actinoid) 60%, var(--border));
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--text);
  text-align: center;
}
.boot-error .boot-msg { font-size: 1.15rem; }
.boot-error #boot-reload {
  padding: 0.6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--focus-text);
  background: var(--focus);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.boot-error #boot-reload:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 3px;
}
.boot-error #boot-wipe {
  margin-left: 0.5rem;
  padding: 0.6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.boot-error #boot-wipe:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 3px;
}
.boot-error .boot-hint { font-size: 0.9rem; opacity: 0.85; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  top: -60px; left: 12px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--focus);
  color: var(--focus-text);
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Kopf ---------- */
.topbar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 8px;
}
.topbar h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tagline {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.toolbar { margin: 14px 0 0; }
/* Ansichts-Schalter (#theme-btn) hat exakt die Optik der übrigen
   Toolbar-Buttons; in der Hauptapp steht er am rechten Ende (nach den
   Links), in der Prüfungs-PWA an derselben Stelle wie bisher. */
#btn-neben,
#theme-btn {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  min-height: 44px;
}
#btn-neben:hover,
#theme-btn:hover { border-color: var(--c-transition); }
#btn-neben[aria-expanded="false"] {
  background: color-mix(in srgb, var(--c-transition) 14%, var(--card));
  border-color: color-mix(in srgb, var(--c-transition) 55%, var(--border));
}

/* ---------- Legende ---------- */
.legend {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 20px 0;
}
.legend ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.85rem;
  color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------- Tabelle ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 14px 20px 40px; }

.table-wrap {
  overflow-x: auto;
  padding-bottom: 6px;
}
.table-wrap:focus { outline: none; }
.table-wrap:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 4px; }

.grid {
  display: grid;
  gap: 5px;
  min-width: 640px;
}
.main-grid {
  grid-template-columns: auto repeat(18, minmax(46px, 1fr));
}
.main-grid.compact {
  grid-template-columns: auto repeat(9, minmax(46px, 1fr));
}
/* f-Reihen: eigenes Grid mit exakt der Spaltenstruktur der Haupttabelle
   (auto + 18 Spalten), damit die 15 Kacheln dieselbe Breite wie die
   Haupt-Kacheln haben und unter dem †-Feld (Spalte 4) beginnen und unter
   Ts (Z 117, Spalte 18) enden – nicht breiter als die anderen. Das
   Label steht horizontal davor (Spalten 1–3). */
.frow {
  display: grid;
  grid-template-columns: auto repeat(18, minmax(46px, 1fr));
  gap: 5px;
  margin-top: 14px;
}
.frow-label {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  user-select: none;
}
/* Die Kacheln sind Grid-Items der .frow (Spalten 4–18, Inline-Style in
   app.js/pruefung.js) – die f-Reihe nimmt am Spalten-Raster nicht teil. */
.f-grid { display: contents; }

/* Gruppe-Kopfspalte + Periode-Kennzeichnung (dekorativ) */
/* Grid-Struktur: Zeilen-Wrapper (role=row) nehmen am Layout nicht teil,
   die Zellen (role=gridcell) sind die Grid-Items. */
.gridrow {
  display: contents;
}
.cell-corner {
  grid-column: 1;
  grid-row: 1;
}
.cell {
  position: relative;
  min-width: 46px;
  min-height: 50px;
  display: flex;
  /* Container für .el-name: Schriftgröße skaliert mit der Kachel-Breite
     (cqi-Einheit), damit lange Namen immer einzeilig hineinpassen. */
  container-type: inline-size;
}
.cell-marker {
  position: relative;
  min-width: 46px;
  min-height: 50px;
  display: flex;
}
.cell-ph {
  grid-column: 4;
  grid-row: 5 / 9;
  display: flex;
}
/* Element-Infofeld: dekoratives Grid-Item im freien Bereich über
   Gruppen 4–11 (Grid-Zeilen 2–3; Zeile 4 trägt die Gruppennummern 3–12).
   Name-Zeile in der Kachel-Kategoriefarbe, Werte zweispaltig.
   Im Kompaktmodus ausgeblendet. */
.el-info {
  grid-column: 5 / 13;
  grid-row: 2 / 4;
  margin: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}
.main-grid.compact .el-info {
  display: none;
}
/* Leerzustand-Beispiel („Legende“): Kachel (Eisen) mit
   Beschriftungs-Linien von den Werten nach außen. Die Demo passt sich
   an die Box-Breite an (max. 440 px): die Linien sind per calc()
   verankert und werden bei schmalerer Box (Zoom, kleiner Bildschirm)
   automatisch kürzer, statt aus der Box herauszuragen. Dekorativ
   (aria-hidden). */
/* WICHTIG: die Demo darf die Grid-Zeilen 2–3 (deren Höhe die übrigen
   Zeilen vorgeben: 58 px) NICHT strecken – deshalb bleibt die Bühne
   auf der Kachelhöhe (58 px). */
.el-info-demo {
  position: relative;
  width: 100%;
  max-width: 440px;
  /* Unteres Ende schiebt die Demo im (zentrierten) el-Info-Feld etwas
     nach oben: „Legende“ steht höher, unten bleibt mehr Luft. */
  margin: 0 auto 8px;
  color: var(--muted);
}
.el-info-demo-title {
  /* Mehr Abstand nach unten (zwischen „Legende“ und Beispiel-Kachel). */
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}
.el-info-demo-stage {
  position: relative;
  height: 58px;
}
/* Linien: Außenende am Label, Innenende auf der Kachel – die Enden
   stoppen unmittelbar vor den jeweiligen Werten (Ordnungszahl,
   Elektronegativität, Kürzel, Atommasse). Linien und Punkte liegen in
   einer Ebene ÜBER der Kachel (z-index): die Kachel steht im DOM nach
   den Linien und würde ohne z-index deren Enden verdecken. Bei
   schmalerer Bühne wird nur der Lücken-Bereich kürzer. */
.el-info-demo-stage .demo-ln {
  position: absolute;
  height: 1px;
  background: currentColor;
  z-index: 2;
  /* Linien bei Druck sichtbar halten: sie sind Hintergrundgrafik und
     würden ohne exact andernfalls vom Drucker (Standard:
     „Hintergründe“ aus) weggelassen. */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.el-info-demo-stage .demo-ln-left  { left: 112px; }
.el-info-demo-stage .demo-ln-right { right: 112px; }
/* Innenenden: unmittelbar vor den Werten (Masse 440 px Bühne, Kachel
   192–248; Werte: Z 199–212, EN 217–242, Kürzel 210–230, Masse
   201–239). Die Linien laufen über die Kachel, die Enden bleiben vor
   den Wert-Zeichen stehen. */
.el-info-demo-stage .demo-ln-left.demo-y-z     { right: calc(50% + 24px); }
.el-info-demo-stage .demo-ln-left.demo-y-sym   { right: calc(50% + 13px); }
.el-info-demo-stage .demo-ln-right.demo-y-z    { left: calc(50% + 25px); }
.el-info-demo-stage .demo-ln-right.demo-y-name { left: calc(50% + 16px); }
.el-info-demo-stage .demo-ln-right.demo-y-mass { left: calc(50% + 22px); }
.el-info-demo-stage .demo-y-z    { top: 8px; }
.el-info-demo-stage .demo-y-sym  { top: 25px; }
.el-info-demo-stage .demo-y-name { top: 35px; }
.el-info-demo-stage .demo-y-mass { top: 48px; }
.el-info-demo-stage .demo-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  z-index: 2;
  /* Wie .demo-ln: Punkt muss beim Druck erscheinen (Hintergrundgrafik). */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* Punkte: am Innenende der Linien (Mittelpunkt am Linien-Ende), also
   ebenfalls auf der Kachel – über z-index sichtbar. */
.el-info-demo-stage .demo-dot-left.demo-y-z    { right: calc(50% + 22px); }
.el-info-demo-stage .demo-dot-left.demo-y-sym  { right: calc(50% + 11px); }
.el-info-demo-stage .demo-dot-right.demo-y-z   { left: calc(50% + 23px); }
.el-info-demo-stage .demo-dot-right.demo-y-name { left: calc(50% + 14px); }
.el-info-demo-stage .demo-dot-right.demo-y-mass { left: calc(50% + 20px); }
.el-info-demo-stage .demo-dot.demo-y-z    { top: 6px; }
.el-info-demo-stage .demo-dot.demo-y-sym  { top: 23px; }
.el-info-demo-stage .demo-dot.demo-y-name { top: 33px; }
.el-info-demo-stage .demo-dot.demo-y-mass { top: 46px; }
/* .el-info [hidden]: das UA-[hidden]-display:none würde vom Autor-
   display (grid/flex) überboten – aus- und eingeblendete Zeilen
   müssen garantiert verschwinden. */
.el-info [hidden] {
  display: none !important;
}
.el-info-demo-stage .el-info-demo-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 57px;
  height: 58px;
  min-height: 0;
  cursor: default;
  pointer-events: none;
  /* Ebene unter den Beschriftungs-Linien/Punkten (z-index: 2), damit
     deren Enden auf der Kachel sichtbar bleiben. */
  z-index: 1;
}
.el-info-demo-tile .el-sym { font-size: 0.95rem; }
.el-info-demo-tile .el-name { font-size: 0.6rem; }
.el-info-demo-tile .el-mass { font-size: 0.56rem; }
/* Labels: links/rechts an den Box-Rand – sie bleiben bei jeder
   Box-Breite vollständig sichtbar, die Linie füllt die Lücke. */
.el-info-demo-label {
  position: absolute;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--muted);
}
.el-info-demo-label.lbl-z    { left: 6px;   top: 2px;  width: 104px; text-align: right; }
.el-info-demo-label.lbl-en   { right: 6px;  top: 2px;  width: 104px; }
.el-info-demo-label.lbl-sym  { left: 6px;   top: 19px; width: 104px; text-align: right; }
.el-info-demo-label.lbl-name { right: 6px;  top: 29px; width: 104px; }
.el-info-demo-label.lbl-mass { right: 6px;  top: 42px; width: 104px; }
.el-info-name {
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 1.4rem;
  font-weight: 700;
}
/* Name-Zeile: gleiche Kategoriefarbe wie die Kachel (40-%-Mix auf --card) */
.el-info-name.c-alkali     { background: color-mix(in srgb, var(--c-alkali) 40%, var(--card)); }
.el-info-name.c-alkaline   { background: color-mix(in srgb, var(--c-alkaline) 40%, var(--card)); }
.el-info-name.c-transition { background: color-mix(in srgb, var(--c-transition) 40%, var(--card)); }
.el-info-name.c-post       { background: color-mix(in srgb, var(--c-post) 40%, var(--card)); }
.el-info-name.c-metalloid  { background: color-mix(in srgb, var(--c-metalloid) 40%, var(--card)); }
.el-info-name.c-nonmetal   { background: color-mix(in srgb, var(--c-nonmetal) 40%, var(--card)); }
.el-info-name.c-noble      { background: color-mix(in srgb, var(--c-noble) 40%, var(--card)); }
.el-info-name.c-lanthanoid { background: color-mix(in srgb, var(--c-lanthanoid) 40%, var(--card)); }
.el-info-name.c-actinoid   { background: color-mix(in srgb, var(--c-actinoid) 40%, var(--card)); }
.el-info-name.c-unknown    { background: color-mix(in srgb, var(--c-unknown) 40%, var(--card)); }
.el-info-values {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  font-size: 0.85rem;
  color: var(--muted);
}
.el-info-value {
  display: flex;
  flex-direction: column;
}
.el-info-vlabel {
  font-size: 0.72rem;
}
.el-info-vvalue {
  font-weight: 700;
}
.g-head {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  min-height: 22px;
  /* Nummer an das Zeilenende: so dicht über dem ersten Element der
     Spalte wie möglich (wie bei H/He, deren Kopfzeile-Zeile nur so
     hoch wie die Nummer ist) – auch wenn die Zeile durch Kacheln
     höher ist (z. B. „2“ neben H/He, „3–12“ in der Na-Zeile). */
  align-self: end;
}
.p-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 20px;
  user-select: none;
}

/* ---------- Element-Kachel ---------- */
.el {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  /* Top-Reserve für die Z-/EN-Zeile: Symbol überlappt nicht mehr mit
     der Ordnungszahl (vorher padding: 2px). */
  padding: 11px 2px 2px;
  transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease;
}
.el-z {
  position: absolute;
  top: 3px; left: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.el-sym {
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.1;
  z-index: 1;
}
.el-name {
  /* Alle Namen einzeilig, so groß wie möglich: Die Seiten-Logik
     (PSE_LIB.nameFit in lib.js) misst den breitesten Namen im aktuellen
     System-Font und setzt --elname-a/--elname-b. calc(a×1cqi − bpx) ist
     exakt die größte Größe, die in jeder Kachelbreite in 96 % der
     Kachel-Fläche einzeilig bleibt (b = 6 px .el-Border/Padding, die
     nicht mit cqi skalieren; der Text füllt 98 % dieser Fläche –
     fast bis an den Kachel-Rand), gedeckelt bei 0.58rem. Die erste
     Deklaration ist nur ein Fallback ohne Container-Query-Unter-
     stützung. */
  font-size: 0.34rem;
  font-size: min(0.58rem, calc(var(--elname-a, 13.5) * 1cqi - var(--elname-b, 0.81px)));
  color: var(--muted);
  max-width: 96%;
  white-space: nowrap;
  margin-top: 1px;
  z-index: 1;
}
/* Sichtwerte (klassisches Layout): EN oben rechts in der Kachel
   (gleiche Höhe wie die Ordnungszahl links), mittlere relative
   Atommasse unten. Top-Padding hält das Symbol aus der Z-/EN-Zeile. */
.el-en {
  position: absolute;
  top: 3px; right: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.el-mass {
  font-size: 0.58rem;
  color: var(--muted);
  margin-top: 1px;
  z-index: 1;
}

.el:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 2; }
.el:active { transform: translateY(0); }

.el:focus { outline: none; }
.el:focus-visible, .el:focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
  z-index: 3;
  box-shadow: 0 0 0 6px var(--focus-shadow);
}

/* Kategorie-Farben */
.el.c-alkali        { background: color-mix(in srgb, var(--c-alkali) 40%, var(--card));      border-color: color-mix(in srgb, var(--c-alkali) 60%, var(--border)); }
.el.c-alkaline      { background: color-mix(in srgb, var(--c-alkaline) 40%, var(--card));    border-color: color-mix(in srgb, var(--c-alkaline) 60%, var(--border)); }
.el.c-transition    { background: color-mix(in srgb, var(--c-transition) 40%, var(--card));  border-color: color-mix(in srgb, var(--c-transition) 60%, var(--border)); }
.el.c-post          { background: color-mix(in srgb, var(--c-post) 40%, var(--card));        border-color: color-mix(in srgb, var(--c-post) 60%, var(--border)); }
.el.c-metalloid     { background: color-mix(in srgb, var(--c-metalloid) 40%, var(--card));   border-color: color-mix(in srgb, var(--c-metalloid) 60%, var(--border)); }
.el.c-nonmetal      { background: color-mix(in srgb, var(--c-nonmetal) 40%, var(--card));    border-color: color-mix(in srgb, var(--c-nonmetal) 60%, var(--border)); }
.el.c-noble         { background: color-mix(in srgb, var(--c-noble) 40%, var(--card));       border-color: color-mix(in srgb, var(--c-noble) 60%, var(--border)); }
.el.c-lanthanoid    { background: color-mix(in srgb, var(--c-lanthanoid) 40%, var(--card));  border-color: color-mix(in srgb, var(--c-lanthanoid) 60%, var(--border)); }
.el.c-actinoid      { background: color-mix(in srgb, var(--c-actinoid) 40%, var(--card));    border-color: color-mix(in srgb, var(--c-actinoid) 60%, var(--border)); }
.el.c-unknown       { background: color-mix(in srgb, var(--c-unknown) 40%, var(--card));     border-color: color-mix(in srgb, var(--c-unknown) 60%, var(--border)); }

.el:hover { border-color: color-mix(in srgb, var(--focus) 60%, var(--border)); }

/* Marker-Kachel (57/89 in Haupttabelle) */
.el-marker {
  cursor: default;
  border-style: dashed;
  background: transparent;
}
.el-marker .el-sym { font-size: 0.7rem; color: var(--muted); font-weight: 600; }

/* Platzhalter für ausgeblendete Nebengruppen */
.el-placeholder {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  border: 2px dashed color-mix(in srgb, var(--c-transition) 60%, var(--border));
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--c-transition) 10%, var(--card)) 0 10px,
    color-mix(in srgb, var(--c-transition) 18%, var(--card)) 10px 20px);
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 8px;
  text-align: center;
}
.el-placeholder .ph-inner {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  line-height: 1.9;
}
.el-placeholder .ph-arrow { font-size: 1.4rem; }
.el-placeholder:hover { border-color: var(--c-transition); }
.el-placeholder:focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
  z-index: 3;
}

/* ---------- Hinweis ---------- */
.hint {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 70ch;
}
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
}

/* Impressum/Datenschutz: Adress-Block in der Fließtext-Optik */
.hilfe address {
  font-style: normal;
  margin: 0 0 10px;
  line-height: 1.6;
}

/* ---------- Fußzeile ---------- */
.foot {
  border-top: 1px solid var(--border);
  padding: 18px 20px 30px;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
}
.foot a { color: var(--c-transition-text); }
.nojs {
  background: color-mix(in srgb, var(--c-alkaline) 18%, var(--card));
  border: 1px solid var(--c-alkaline);
  padding: 12px 16px;
  border-radius: 10px;
  margin: 20px auto;
  max-width: 700px;
}

/* ---------- Dialog (natives <dialog>/showModal(): Zentrierung im Top
   Layer, Fokusfalle, Inert im Hintergrund und Esc übernimmt der Browser) ---------- */
/* WICHTIG: showModal() entfernt das Autor-Attribut `hidden` am Markup NICHT
   (es bleibt auch im offenen Zustand stehen). Chrome rendert ein offenes
   <dialog> mit `hidden` per UA-Regel als display:none → unsichtbarer Dialog
   mit inertem Hintergrund (= "Seite hängt"). Die Autor-Regel erzwingt
   Sichtbarkeit im offenen Zustand; ihre Spezifität (1,1,1) schlägt zugleich
   die `#dialog[hidden]`-Regeln aller älteren gecachten CSS-Generationen
   (1,1,0), die das geschlossene Markup sonst als Overlay rendern würden. */
dialog#dialog[open] {
  display: block;
}
dialog#dialog {
  /* Breite wächst mit dem Dialog-Zoom (560 px × Faktor, ab 100 %);
     max() clamped, damit 50–75 % die Karte nicht schmaler machen. */
  width: min(calc(560px * max(var(--dz, 1), 1)), 100%);
  max-width: calc(100% - 40px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
dialog#dialog::backdrop {
  background: rgba(5, 8, 18, .72);
  backdrop-filter: blur(3px);
}
dialog#dialog[open] { animation: dlg-in .16s ease; }
@keyframes dlg-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Dialog-Overlay + Karte der Prüfungs-PWA (pruefung/index.html): nutzt
   noch div#dialog + .dlg-card im geteilten styles.css; die Haupt-App
   verwendet stattdessen das native <dialog> (Regeln: dialog#dialog). */
div#dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 8, 18, .72);
  backdrop-filter: blur(3px);
}
div#dialog[hidden] { display: none; }

.dlg-card {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: dlg-in .16s ease;
}

.dlg-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 18px 12px;
}
.dlg-sym {
  width: 64px; height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.7rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--card);
}
.dlg-tt { flex: 1; min-width: 0; }
#dlg-h { margin: 0; font-size: 1.25rem; font-weight: 700; }
/* Bewusst kein Fokus-Ring am Dialog-Titel: Er ist nur programmatisch
   fokussierbar (tabindex="-1") und kein interaktives Element – der
   offene Dialog wird durch seine Position und den Inert-Zustand
   getragen, ein Ring um den Namen wäre nur optisches Rauschen. */
.dlg-sub { margin: 5px 0 0; color: var(--muted); font-size: 0.9rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--text);
}
.chip.c-alkali      { border-color: var(--c-alkali);      background: color-mix(in srgb, var(--c-alkali) 16%, transparent); }
.chip.c-alkaline    { border-color: var(--c-alkaline);    background: color-mix(in srgb, var(--c-alkaline) 16%, transparent); }
.chip.c-transition  { border-color: var(--c-transition);  background: color-mix(in srgb, var(--c-transition) 16%, transparent); }
.chip.c-post        { border-color: var(--c-post);        background: color-mix(in srgb, var(--c-post) 16%, transparent); }
.chip.c-metalloid   { border-color: var(--c-metalloid);   background: color-mix(in srgb, var(--c-metalloid) 16%, transparent); }
.chip.c-nonmetal    { border-color: var(--c-nonmetal);    background: color-mix(in srgb, var(--c-nonmetal) 16%, transparent); }
.chip.c-noble       { border-color: var(--c-noble);       background: color-mix(in srgb, var(--c-noble) 16%, transparent); }
.chip.c-lanthanoid  { border-color: var(--c-lanthanoid);  background: color-mix(in srgb, var(--c-lanthanoid) 14%, transparent); }
.chip.c-actinoid    { border-color: var(--c-actinoid);    background: color-mix(in srgb, var(--c-actinoid) 14%, transparent); }
.chip.c-unknown     { border-color: var(--c-unknown);     background: color-mix(in srgb, var(--c-unknown) 14%, transparent); }

#dlg-close {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
}
#dlg-close:hover { border-color: var(--c-alkali); color: var(--c-alkali-text); }
#dlg-close:focus { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }

/* Zoom-Steuerung in der Kopfzeile: nur die Werte-Liste skaliert
   (#dialog .dlg-dl); Buttons bleiben in jeder Zoom-Stufe groß genug. */
.dlg-zoom {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.dlg-zoom button {
  font: inherit;
  font-weight: 700;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
#dlg-zoom-reset {
  font-size: 0.75rem;
  padding: 0 8px;
}
.dlg-zoom button:hover { border-color: var(--c-transition); }
.dlg-zoom button:focus { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }

/* Dialog-Zoom: CSS zoom auf die Werte-Liste; --dz wird von dialog.js am
   Dialog-Element gesetzt (0.5–1.5 in 0.25-Schritten; Default 1). Das
   Fenster wird ab 100 % entsprechend verbreitert (dialog#dialog), die
   Layout-Breite der Liste = 100 % / Faktor, damit das gerenderte Maß
   (Layout-Breite × Faktor) exakt die Karten-Innenbreite füllt —
   kein Horizontal-Overflow. Unter 100 % bleibt beides auf 100 %. */
dialog#dialog .dlg-dl {
  zoom: var(--dz, 1);
  width: calc(100% / max(var(--dz, 1), 1));
}

.dlg-dl {
  margin: 0;
  padding: 6px 18px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 18px;
}
.dlg-dl > div {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.dlg-dl dt {
  color: var(--muted);
  font-size: 0.85rem;
  min-width: 130px;
  flex: 0 0 130px;
}
.dlg-dl dd { margin: 0; font-size: 0.95rem; font-weight: 600; }

.dlg-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 16px;
}
.dlg-nav button {
  font: inherit;
  font-weight: 700;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  min-height: 44px;
}
.dlg-nav button:hover { border-color: var(--c-transition); }
.dlg-nav button:focus { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }

@media (max-width: 560px) {
  .dlg-dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Elementliste (elements.html) ---------- */

.link-list {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  min-height: 44px;
  text-decoration: none;
}
.link-list:hover { border-color: var(--c-transition); }
.link-list:focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
}

.list-controls { margin-bottom: 6px; }
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.search-row label { font-weight: 700; }
#q {
  min-height: 44px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 440px;
  padding: 8px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
#q::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
#q:focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
/* Filter als native Ausklapplisten (früher 41 sichtbare Radios):
   Beschriftung oben, Select mit 44-px-Flächenberührung darunter. */
.filter-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-select label {
  padding: 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.filter-select select {
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 34px 0 12px;
  min-height: 44px;
  cursor: pointer;
}
.filter-select select:hover { border-color: var(--c-alkaline); }
.filter-select select:focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
}

#reset-filters {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  min-height: 44px;
  cursor: pointer;
}
#reset-filters:hover { border-color: var(--c-alkaline); }
#reset-filters:focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
}

.list-status {
  margin: 14px 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Tabelle */
.eltab {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.eltab caption {
  caption-side: top;
  text-align: left;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0 0 8px;
}
.eltab th, .eltab td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.eltab thead th {
  background: var(--card);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.eltab tbody tr { transition: background .1s ease; }
.eltab tbody tr:hover { background: color-mix(in srgb, var(--c-transition) 7%, transparent); }
.eltab tbody tr:last-child td { border-bottom: 0; }

/* Name-Spalte: Zeilenkopf, visuell fixiert beim seitlichen Scrollen.
   Der opake Hintergrund verdeckt die darunter vorbeiscrollenden
   Spalten; Z-Index: Kopfzeile über den Zeilen.
   Die rechte Kante markiert die fixierte Spalte. */
.eltab thead th[data-col="name"],
.eltab tbody th[scope="row"] {
  position: sticky;
  left: 0;
  border-right: 1px solid var(--border);
}
.eltab thead th[data-col="name"] { z-index: 2; }
.eltab tbody th[scope="row"] {
  z-index: 1;
  background: var(--bg);
}
.eltab tbody tr:hover th[scope="row"] {
  background: color-mix(in srgb, var(--c-transition) 7%, var(--bg));
}

/* Werten-Spalten (inkl. Z) rechtsbündig */
.eltab th[data-col="z"],   .eltab td[data-col="z"],
.eltab th[data-col="mass"], .eltab td[data-col="mass"],
.eltab th[data-col="density"], .eltab td[data-col="density"],
.eltab th[data-col="en"],   .eltab td[data-col="en"],
.eltab th[data-col="mp"],   .eltab td[data-col="mp"],
.eltab th[data-col="bp"],   .eltab td[data-col="bp"],
.eltab th[data-col="ie1"],  .eltab td[data-col="ie1"] {
  text-align: right;
}
.eltab th, .eltab td { font-variant-numeric: tabular-nums; }

/* Symbol-Zelle: Kategorie-Farbcode (Bestandstokens) */
td[data-col="sym"] { white-space: nowrap; }
td[data-col="sym"] span {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
td[data-col="sym"] .c-alkali      { color: var(--c-alkali-text); }
td[data-col="sym"] .c-alkaline    { color: var(--c-alkaline-text); }
td[data-col="sym"] .c-transition  { color: var(--c-transition-text); }
td[data-col="sym"] .c-post        { color: var(--c-post-text); }
td[data-col="sym"] .c-metalloid   { color: var(--c-metalloid-text); }
/* Nichtmetall-Symbole: Text-Variante (Hell: dunkles Gelb, da #ffff37 auf
   Weiß nur 1,1:1 hat; Dunkel: leuchtendes Gelb, dort 17,9:1). */
td[data-col="sym"] .c-nonmetal    { color: var(--c-nonmetal-text); }
td[data-col="sym"] .c-noble       { color: var(--c-noble-text); }
td[data-col="sym"] .c-lanthanoid  { color: var(--c-lanthanoid-text); }
td[data-col="sym"] .c-actinoid    { color: var(--c-actinoid-text); }
td[data-col="sym"] .c-unknown     { color: var(--c-unknown-text); }

/* Zeilen-Button (Detailansicht) */
.row-btn {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 8px;
  min-height: 44px;
  border-radius: 8px;
  text-align: left;
}
.row-btn:hover {
  color: var(--focus);
  background: color-mix(in srgb, var(--c-transition) 10%, transparent);
}
.row-btn:focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 1px;
}

/* Kopf-Sortier-Buttons */
.eltab thead button[data-sort] {
  font: inherit;
  font-weight: 700;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 6px;
  min-height: 44px;
  border-radius: 6px;
}
.eltab thead button[data-sort]:hover { color: var(--focus); }
.eltab thead button[data-sort]:focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
}
.eltab thead button[data-sort]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.sort-ind {
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: 2px;
}
.eltab th[aria-sort="ascending"] .sort-ind,
.eltab th[aria-sort="descending"] .sort-ind {
  color: var(--focus);
}

/* 0-Treffer-Zeile */
.row-empty .cell-empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 28px 12px;
}

/* ---------- Hilfe-Seite (hilfe.html) ---------- */
.hilfe {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 20px 40px;
}
.hilfe h2 {
  margin: 30px 0 10px;
  font-size: 1.25rem;
}
.hilfe h2:first-child {
  margin-top: 6px;
}
.hilfe ul {
  margin: 0 0 8px;
  padding-left: 22px;
}
.hilfe li {
  margin: 8px 0;
  line-height: 1.55;
}
.hilfe a {
  color: var(--c-transition-text);
}
.hilfe code {
  font-family: ui-monospace, monospace;
    font-size: 0.92em;
  background: var(--bg-soft);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---------- Kontrast-Schemata: rein Schwarz-Weiß, keine Graustufen ----------
   Die color-mix()-Mischungen (Kategorie-Farbe × Fläche/Rand/transparent)
   würden in den beiden Kontrast-Zuständen Graustufen erzeugen. Hier werden
   alle betroffenen Flächen auf reine Schwarz/Weiß-Werte gesetzt. */
[data-theme="dark-hc"] .el:is(.c-alkali, .c-alkaline, .c-transition, .c-post,
  .c-metalloid, .c-nonmetal, .c-noble, .c-lanthanoid, .c-actinoid, .c-unknown) {
  background: var(--card);
}
[data-theme="light-hc"] .el:is(.c-alkali, .c-alkaline, .c-transition, .c-post,
  .c-metalloid, .c-nonmetal, .c-noble, .c-lanthanoid, .c-actinoid, .c-unknown) {
  background: var(--card);
}

/* f-Reihe-Platzhalter (La/Ac): Streifen-Muster -> einfarbig */
[data-theme="dark-hc"] .el-placeholder,
[data-theme="light-hc"] .el-placeholder {
  background: var(--card);
}

/* Element-Infofeld in den Kontrast-Schemata: Feld, Hinweis und Werte
   bleiben wie im Schema üblich (hell: weiß mit schwarzer Schrift,
   dunkel: schwarz mit weißer Schrift). Nur die Name-Zeile ist – analog
   zum Farbfeld im Normalmodus – hinterlegt, mit inverser Schriftfarbe
   (statt 40-%-Kategorie-Mischfarbe, die hier grau würde). */
[data-theme="light-hc"] .el-info .el-info-name {
  background: #000000;
  color: #ffffff;
}
[data-theme="dark-hc"] .el-info .el-info-name {
  background: #ffffff;
  color: #000000;
}

/* Filter-Chips (Elementliste): Tönung entfernen */
[data-theme="dark-hc"] .chip,
[data-theme="light-hc"] .chip {
  background: transparent;
}

/* Nebengruppen-Schalter (ausgeblendet) + nojs-Hinweis: Tönung entfernen */
[data-theme="dark-hc"] #btn-neben[aria-expanded="false"],
[data-theme="light-hc"] #btn-neben[aria-expanded="false"],
[data-theme="dark-hc"] .nojs,
[data-theme="light-hc"] .nojs {
  background: var(--card);
}

/* Dialog: Trennlinien rein, Überblendung ohne Blauton */
[data-theme="dark-hc"] .dlg-dl > div,
[data-theme="light-hc"] .dlg-dl > div {
  border-bottom-color: var(--border);
}
[data-theme="dark-hc"] dialog#dialog::backdrop,
[data-theme="light-hc"] dialog#dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: none;
}
[data-theme="dark-hc"] div#dialog,
[data-theme="light-hc"] div#dialog {
  background: rgba(0, 0, 0, .72);
}

/* Suchfeld-Placeholder-Text: Vollton statt 75-%-Mischton */
[data-theme="dark-hc"] #q::placeholder,
[data-theme="light-hc"] #q::placeholder {
  color: var(--muted);
}

/* Druckansicht (nur Raster-Seiten, markiert per <body class="page-raster">):
   interaktive Elemente entfallen – Toolbar (Ansichts-Schalter,
   Nebengruppen-Schalter, Links), Footer, Boot-Button, Skip-Link,
   Bedienhinweis (.hint) und das el-Info-Feld (dort nur die Legende,
   s. u.). WICHTIG: nicht „button“ pauschal – die Raster-Kacheln
   selbst sind <button class="el"> und blieben sichtbar. Die Ansicht
   wird beim Druck auf „Hell Kontrast“ gestellt (theme.js). */
@media print {
  .page-raster .skip-link,
  .page-raster .toolbar,
  .page-raster .foot,
  .page-raster .hint,
  .page-raster #boot-reload {
    display: none !important;
  }
  /* el-Info-Feld: bei Druck NUR die Legende (Beispiel-Kachel mit
     Beschriftungs-Linien) – die echte Anzeige (Name/Werte) bleibt
     ausgeblendet, die Legende wird erzwungen, selbst wenn auf dem
     Bildschirm gerade ein Element ausgewählt/fokussiert ist. */
  .page-raster .el-info .el-info-name,
  .page-raster .el-info .el-info-values {
    display: none !important;
  }
  .page-raster .el-info .el-info-demo {
    display: block !important;
  }
  /* Legende ohne Rahmen: das el-Info-Feld wird randlos gedruckt. */
  .page-raster .el-info {
    border: none;
  }
}