/* Konto (accounts.flixtake.app) nach dem Flixtake-Designsystem.
   Werte nur aus tokens.css: Abstaende --abstand-s/m/l, Hoehen --hoehe-*,
   Auswahl --auswahl-*, Dauern --dur-*. Die Musterklassen .ft-* (Symbolknopf,
   Hauptknopf, Navigation, Menue, Blatt) bringt flixtake-tooltip.js mit. */

:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
html::-webkit-scrollbar-track { background: transparent; }

body {
  min-height: 100dvh;
  font-size: 14px;
  line-height: 1.4;
  background: var(--bg-page);
  color: var(--text-primary);
}

/* hidden gilt immer, auch gegen display aus einer Klasse (.feld, .hinweis ...). */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-weight: 600; line-height: 1.4; letter-spacing: var(--tracking-normal); }
.sym { display: block; flex: none; }
.mono { font-family: var(--font-mono); }
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.link { color: var(--accent); text-decoration: none; border-radius: var(--radius-sm); }
.link:hover { text-decoration: underline; }
button.link { background: none; border: 0; padding: 0; font-size: inherit; }

/* ---- Leiste ---------------------------------------------------------------
   <flixtake-bar> aus @flixtake/bar-element. Platz und Farbe stehen schon, bevor
   das Skript laeuft, damit nichts springt. */
flixtake-bar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hoehe-kopf);
  background: var(--bar-bg);
}

/* ---- Knoepfe ---------------------------------------------------------------- */
/* .ft-knopf (Nebenknopf mit Text, "Abbrechen" im Dialogfuss) bringt die Grundschicht
   (flixtake-tooltip.js, seit dem Nachtrag vom 25.09.2026) schon mit. Hier bleibt nur
   die Breiten-Verbindung, die die Grundschicht nicht kennt. */
.ft-hauptknopf.breit, .ft-knopf.breit { width: 100%; }
.ft-hauptknopf[aria-busy="true"], .ft-symbolknopf[aria-busy="true"] { cursor: progress; }
[aria-busy="true"] > .sym.lade { animation: drehen var(--dur-dreh) linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.ft-symbolknopf.klein { --ft-knopf: var(--hoehe-steuer); }

/* ---- Seitenaufbau mit Seitenleiste ----------------------------------------- */
.konto {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: calc(100dvh - var(--hoehe-kopf));
}
.seitenleiste {
  position: sticky;
  top: var(--hoehe-kopf);
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--hoehe-kopf));
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg-page);
}
.seitenleiste-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-m) var(--abstand-m) var(--abstand-s);
}
.seitenleiste-kopf-text { display: flex; flex-direction: column; min-width: 0; }
.seitenleiste-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seitenleiste-mail { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seitenleiste-fuss { margin-top: auto; }
.trenner { height: 1px; margin: var(--abstand-s) 0; border: 0; background: var(--border); }
.ft-nav-eintrag.gefahr, .ft-nav-eintrag.gefahr .sym { color: var(--danger); }
.ft-nav-eintrag.gefahr:hover { background: var(--danger-quiet); }

.hauptbereich { min-width: 0; padding: 0 var(--abstand-l) var(--abstand-l); }
.ansicht { max-width: 960px; }
.js .ansicht { display: none; }
.js[data-bereich="uebersicht"] .ansicht[data-bereich="uebersicht"],
.js[data-bereich="profil"] .ansicht[data-bereich="profil"],
.js[data-bereich="sicherheit"] .ansicht[data-bereich="sicherheit"],
.js[data-bereich="geraete"] .ansicht[data-bereich="geraete"],
.js[data-bereich="abrechnung"] .ansicht[data-bereich="abrechnung"],
.js[data-bereich="apps"] .ansicht[data-bereich="apps"],
.js[data-bereich="daten"] .ansicht[data-bereich="daten"] { display: block; }

.ansicht-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--hoehe-kopf);
  margin-top: var(--abstand-l);
  margin-bottom: var(--abstand-m);
}
.ansicht-kopf-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ansicht-titel { margin: 0; font-size: 20px; font-weight: 600; }
/* Beim Wechsel des Bereichs springt der Fokus auf den Titel, fuer Screenreader.
   Der Titel ist kein Bedienelement und bekommt deshalb keinen Ring. */
.ansicht-titel:focus { outline: none; }
.ansicht-unter { margin: 0; font-size: 12px; color: var(--text-muted); }
.menue-knopf { display: none; }
.stapel { display: flex; flex-direction: column; gap: var(--abstand-m); }

/* ---- Karten und Zeilen ------------------------------------------------------ */
.karte {
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.karte-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--hoehe-kopf);
  padding: 0 var(--abstand-s) 0 var(--abstand-m);
}
.karte-kopf > .sym { color: var(--text-muted); }
.karte-kopf-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.karte-titel { margin: 0; font-size: 14px; font-weight: 600; }
.karte-unter { font-size: 12px; color: var(--text-dim); }
.karte-inhalt { display: flex; flex-direction: column; gap: var(--abstand-m); padding: 0 var(--abstand-m) var(--abstand-m); }
.karte-liste { display: flex; flex-direction: column; margin: 0; padding: 0 0 var(--abstand-s); list-style: none; }
.karte-text { margin: 0; color: var(--text-muted); line-height: 1.55; }
.liste { display: flex; flex-direction: column; gap: var(--abstand-s); padding: 0 0 0 var(--abstand-m); }

.zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--hoehe-steuer);
  margin: 0 var(--abstand-s);
  padding: 0 0 0 var(--abstand-s);
  border-radius: var(--radius-sm);
}
.zeile:has(.zeile-wert) { min-height: var(--hoehe-kopf); }
.zeile.klickbar { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.zeile.klickbar:hover { background: var(--overlay-hover); }
.zeile > .sym { color: var(--text-muted); }
.zeile-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.zeile-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-wert { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-zeit { flex: none; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.zeile.fehler .zeile-titel, .zeile.fehler > .sym { color: var(--danger); }
.zeile .ft-knopfgruppe { flex: none; }
.zeile-ende { display: flex; align-items: center; flex: none; gap: 0; }
.zeile-ende .zeile-zeit { padding-right: var(--abstand-s); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-s);
  flex: none;
  height: var(--hoehe-klein);
  padding: 0 var(--abstand-s);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--chip-farbe, var(--text-dim)); }
.chip.gut { --chip-farbe: var(--positive); }
.chip.warnung { --chip-farbe: var(--warning); }
.chip.schlecht { --chip-farbe: var(--danger); }
.zeile.text-ende { padding-right: var(--abstand-s); }
.zeile > .chip:last-child { margin-right: var(--abstand-s); }

.hinweis { display: flex; align-items: flex-start; gap: var(--abstand-s); margin: 0; color: var(--text-muted); line-height: 1.55; }
.hinweis > .sym { margin-top: 0; color: var(--text-dim); }
.hinweis.warnung > .sym { color: var(--warning); }
.hinweis.gut > .sym { color: var(--positive); }
.hinweis.fehler { color: var(--text-primary); }
.hinweis.fehler > .sym { color: var(--danger); }
.hinweis[hidden] { display: none; }

/* ---- Avatar -------------------------------------------------------------- */
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--hoehe-steuer);
  height: var(--hoehe-steuer);
  overflow: hidden;
  border-radius: 999px;
  background: var(--avatar-farbe, var(--accent));
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 600;
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.gross { width: var(--hoehe-kopf); height: var(--hoehe-kopf); font-size: 20px; }
.avatar.riesig { width: 96px; height: 96px; font-size: 20px; }

/* ---- Uebersicht als Kachelraster -------------------------------------------- */
.kacheln { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--abstand-m); }
.kachel-profil { grid-column: span 5; }
.kachel-apps { grid-column: span 7; }
.kachel-sicherheit { grid-column: span 7; }
.kachel-abo { grid-column: span 5; }
.kachel-aktivitaet { grid-column: span 12; }
.profil-kurz { display: flex; align-items: center; gap: var(--abstand-m); }
.profil-kurz-text { display: flex; flex-direction: column; min-width: 0; }
.profil-name { margin: 0; font-size: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-mail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-plan { font-size: 12px; color: var(--text-dim); }
.abo-name { margin: 0; font-size: 20px; font-weight: 600; }

.app-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0;
  padding: 0 var(--abstand-s) var(--abstand-s);
}
.app-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-s);
  min-width: 0;
  padding: var(--abstand-m) var(--abstand-s);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.app-kachel:hover { background: var(--overlay-hover); }
.app-kachel:active { background: var(--overlay-press); }
.app-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--text-on-accent);
  background: var(--app-farbe, var(--bar-app-id));
}
.app-name { max-width: 100%; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--abstand-m); }
.app-karte {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  padding: var(--abstand-m);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.app-karte:hover { background: var(--overlay-hover); }
.app-karte-text { display: flex; flex-direction: column; min-width: 0; }
.app-karte-name { font-weight: 600; }
.app-karte-text .zeile-wert { white-space: normal; }

/* ---- Leerer Zustand --------------------------------------------------------- */
.leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-m);
  padding: var(--abstand-l);
  text-align: center;
  color: var(--text-muted);
}
.leer > .sym { color: var(--text-dim); }

/* ---- Dialoge ------------------------------------------------------------------ */
.dlg {
  width: 480px;
  max-width: calc(100vw - 2 * var(--abstand-m));
  max-height: calc(100dvh - 2 * var(--abstand-m));
  margin: auto;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-panel);
  scrollbar-width: none;
}
.dlg::-webkit-scrollbar { display: none; }
.dlg[open] { animation: dialog-ein var(--dur-slow) var(--ease-out) backwards; }
.dlg::backdrop { background: var(--scrim); }
.dlg[open]::backdrop { animation: blende var(--dur-slow) var(--ease-out) backwards; }
.dlg.breit { width: 640px; }
.dlg-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--hoehe-kopf);
  padding: 0 var(--abstand-m) 0 var(--abstand-l);
}
.dlg-titel { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.dlg-inhalt { display: flex; flex-direction: column; gap: var(--abstand-m); padding: 0 var(--abstand-l); }
.dlg .ft-dialog-fuss { padding: var(--abstand-l); }
.dlg-schritt { display: flex; flex-direction: column; gap: var(--abstand-m); }
@keyframes dialog-ein { from { opacity: 0; transform: scale(0.98); } }
@keyframes blende { from { opacity: 0; } }

/* ---- Formulare --------------------------------------------------------------- */
.feld { display: flex; flex-direction: column; gap: var(--abstand-s); margin: 0; }
.feld-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.feld-reihe { display: flex; align-items: center; gap: var(--abstand-s); }
.feld-reihe .eingabe { flex: 1; min-width: 0; }
.eingabe {
  width: 100%;
  height: var(--hoehe-steuer);
  padding: 0 var(--abstand-s);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: 14px;
}
.eingabe::placeholder { color: var(--text-dim); }
.eingabe:focus-visible { outline: 2px solid var(--indigo-400); outline-offset: 2px; }
.eingabe[aria-invalid="true"] { border-color: var(--danger); }
.eingabe.code { font-family: var(--font-mono); letter-spacing: 0.16em; }
.feld-hinweis { font-size: 12px; color: var(--text-dim); }
.feld-fehler { font-size: 12px; color: var(--danger); }
.feld-fehler:empty { display: none; }
.haken { display: flex; align-items: flex-start; gap: var(--abstand-s); line-height: 1.55; cursor: pointer; }
.haken input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

.qr {
  display: grid;
  place-items: center;
  align-self: flex-start;
  padding: var(--abstand-m);
  border-radius: var(--radius-md);
  background: var(--paper-0);
}
.qr svg { display: block; width: 160px; height: 160px; }
.geheimnis { word-break: break-all; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-s) var(--abstand-m);
  margin: 0;
  padding: var(--abstand-m);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  list-style: none;
  font-family: var(--font-mono);
  font-size: 14px;
}
.werkzeuge { display: flex; align-items: center; gap: 0; margin-left: calc(-1 * var(--abstand-s)); }

.farben { display: flex; flex-wrap: wrap; gap: var(--abstand-s); }
.farbfeld {
  width: var(--hoehe-steuer);
  height: var(--hoehe-steuer);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--f);
}
.farbfeld[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--text-primary); }
.bild-reihe { display: flex; align-items: center; gap: var(--abstand-m); }

/* ---- Meldungen unten rechts ------------------------------------------------- */
.toasts {
  position: fixed;
  right: var(--abstand-l);
  bottom: var(--abstand-l);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--abstand-s);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  width: 360px;
  max-width: calc(100vw - 2 * var(--abstand-l));
  min-height: var(--hoehe-kopf);
  padding: 0 var(--abstand-s) 0 var(--abstand-m);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
  animation: toast-ein var(--dur) var(--ease-out) backwards;
}
.toast-text { flex: 1; min-width: 0; line-height: 1.4; }
.toast > .sym { color: var(--positive); }
.toast.fehler > .sym { color: var(--danger); }
.toast.info > .sym { color: var(--text-muted); }
.toast.weg { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
@keyframes toast-ein { from { opacity: 0; transform: translateY(8px); } }

/* ---- Kontextmenue --------------------------------------------------------- */
.kontextmenue { position: fixed; z-index: 1200; width: 240px; }

/* ---- Anmeldeseiten ------------------------------------------------------------ */
.anmeldung {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--hoehe-kopf) - var(--hoehe-kopf));
  padding: var(--abstand-l) var(--abstand-m);
}
.anmelde-karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  width: 100%;
  max-width: 400px;
  padding: var(--abstand-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.anmelde-kopf { display: flex; flex-direction: column; gap: var(--abstand-s); }
.anmelde-titel { margin: 0; font-size: 20px; font-weight: 600; }
.anmelde-unter { margin: 0; color: var(--text-muted); line-height: 1.55; }
.anmelde-form { display: flex; flex-direction: column; gap: var(--abstand-m); }
.anmelde-form[hidden] { display: none; }
.anmelde-links { display: flex; flex-direction: column; gap: var(--abstand-s); color: var(--text-muted); }
.schritte { display: flex; gap: var(--abstand-s); }
.schritt { flex: 1; height: 4px; border-radius: 999px; background: var(--border-strong); transition: background var(--dur) var(--ease-out); }
.schritt.aktiv { background: var(--accent); }
.schritt.fertig { background: var(--positive); }
.klein-text { font-size: 12px; color: var(--text-dim); line-height: 1.55; }

.seitenfuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  min-height: var(--hoehe-kopf);
  padding: 0 var(--abstand-l);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.seitenfuss nav { display: flex; flex-wrap: wrap; gap: var(--abstand-m); }
.seitenfuss a { color: var(--text-dim); text-decoration: none; }
.seitenfuss a:hover { color: var(--text-primary); }

.fehlerseite { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-m); text-align: center; }
.fehlerseite > .sym { color: var(--text-dim); }
.fehler-code { font-size: 12px; color: var(--text-dim); }

.offline {
  position: fixed;
  left: 50%;
  top: calc(var(--hoehe-kopf) + var(--abstand-s));
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  height: var(--hoehe-steuer);
  padding: 0 var(--abstand-m);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-card);
  box-shadow: var(--shadow-pop);
  transform: translateX(-50%);
  animation: blende var(--dur) var(--ease-out) backwards;
}
.offline[hidden] { display: none; }
.offline > .sym { color: var(--warning); }

/* ---- Handy ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .kachel-profil, .kachel-apps, .kachel-sicherheit, .kachel-abo, .kachel-aktivitaet { grid-column: span 12; }
}

@media (max-width: 767px) {
  .ft-symbolknopf { --ft-knopf: var(--hoehe-touch); }
  .ft-hauptknopf, .ft-knopf, .eingabe { height: var(--hoehe-touch); font-size: 16px; }
  .konto { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste {
    position: fixed;
    top: var(--hoehe-kopf);
    left: 0;
    bottom: 0;
    z-index: 900;
    width: 248px;
    height: auto;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .offen .seitenleiste { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out); }
  .seitenleiste .ft-nav-eintrag { height: var(--hoehe-touch); font-size: 16px; }
  .schleier { position: fixed; inset: var(--hoehe-kopf) 0 0 0; z-index: 890; background: var(--scrim); animation: blende var(--dur-slow) var(--ease-out) backwards; }
  .hauptbereich { padding: 0 var(--abstand-m) var(--abstand-m); }
  .ansicht-kopf { margin-top: var(--abstand-m); }
  .menue-knopf { display: inline-flex; margin-left: calc(-1 * var(--abstand-s)); }
  .zeile { min-height: var(--hoehe-touch); }
  .zeile:has(.zeile-wert) { min-height: var(--hoehe-kopf); }
  .toasts { left: var(--abstand-m); right: var(--abstand-m); bottom: calc(var(--abstand-m) + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  .toast { width: auto; max-width: none; }
  .dlg { width: auto; }
  .dlg-kopf { padding: 0 var(--abstand-s) 0 var(--abstand-m); }
  .dlg-inhalt { padding: 0 var(--abstand-m); }
  .dlg .ft-dialog-fuss { padding: var(--abstand-m); }
  .anmeldung { justify-content: flex-start; padding: var(--abstand-m); }
  .anmelde-karte { padding: var(--abstand-m); }
  .seitenfuss { padding: var(--abstand-m); }
  .codes { grid-template-columns: minmax(0, 1fr); }
  .app-karten { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .schleier { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dlg[open], .dlg[open]::backdrop, .toast, .schleier, .offline { animation: blende var(--dur-fast) var(--ease-out) backwards; }
  .seitenleiste, .offen .seitenleiste { transition: visibility 0s; }
  [aria-busy="true"] > .sym.lade { animation: none; }
}

/* ---- Druck der Wiederherstellungscodes ---------------------------------------- */
.druckbereich { display: none; }
@media print {
  body > *:not(.druckbereich) { display: none !important; }
  .druckbereich { display: block; color: var(--ink-text); background: var(--paper-0); }
  .druckbereich .codes { border-color: var(--ink-dim); }
}

/* Symbolknopf am Ende eines Feldes: seine Flaeche ragt S ueber die Inhaltskante. */
.zeigen-reihe { margin-right: calc(-1 * var(--abstand-s)); }