:root {
  --rand: #d9d9d9;
  --hell: #f5f5f2;
  --papier: #fffdf8;
  --tinte: #1a1a1a;
  --grau: #666;
  --akzent: #2d5fb3;
  --schrift: 17px;
  --randbreite: 190px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--tinte);
  background: var(--hell);
  display: grid;
  grid-template-columns: 280px 1fr 230px;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "kopf kopf kopf"
    "hinweis hinweis hinweis"
    "inhalt haupt werkzeuge";
  height: 100vh;
  overflow: hidden;
}
button, select, input[type=text], textarea { font: inherit; font-size: 13px; }
button { padding: 4px 9px; border: 1px solid #bbb; background: #fff; border-radius: 4px; cursor: pointer; }
button:hover { background: #eef2f8; }
button:disabled { opacity: .4; cursor: default; }
button.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }

#kopf {
  grid-area: kopf;
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  padding: 6px 12px; background: #fff; border-bottom: 1px solid var(--rand);
}
.gruppe { display: flex; gap: 6px; align-items: center; }
.zoom { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; }
.zoom button { padding: 2px 8px; }
#zoomAnzeige { min-width: 48px; text-align: center; font-size: 12px; color: #333; cursor: pointer; }
.schalter { font-size: 13px; display: flex; gap: 3px; align-items: center; cursor: pointer; }
.status { margin-left: auto; font-size: 12px; color: var(--grau); }
.status.fehler { color: #c00; font-weight: 600; }

#hinweisleiste {
  grid-area: hinweis; padding: 8px 14px; background: #fff3c4; border-bottom: 1px solid #e8d48a; font-size: 14px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

#inhalt { grid-area: inhalt; border-right: 1px solid var(--rand); background: #fff; display: flex; flex-direction: column; min-height: 0; }
#inhaltFilter { margin: 8px; padding: 5px 8px; border: 1px solid #bbb; border-radius: 4px; }
#inhaltListe { overflow-y: auto; flex: 1; padding-bottom: 20px; }
.iv-gliederung { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); padding: 10px 12px 3px; }
.iv-eintrag { display: flex; align-items: stretch; cursor: pointer; font-size: 13px; }
.iv-eintrag:hover { background: #f0f4fa; }
.iv-eintrag.aktuell { background: #e4ecf8; }
.iv-eintrag .iv-enbez { flex: 0 0 66px; padding: 3px 6px 3px 10px; font-weight: 600; white-space: nowrap; }
.iv-eintrag .iv-titel { padding: 3px 8px 3px 0; color: #333; }

#haupt { grid-area: haupt; overflow-y: auto; padding: 24px 24px 80px; background: var(--hell); }
#text {
  position: relative;
  --randbreite: var(--rb-screen, 190px);
  --rb-links: 40px; --rb-rechts: 40px;
  max-width: calc(860px + var(--rb-links) + var(--rb-rechts)); margin: 0 auto; background: var(--papier);
  padding: 36px var(--rb-rechts) 48px var(--rb-links);
  box-shadow: 0 1px 4px rgba(0,0,0,.12); border-radius: 3px;
  font-family: Georgia, "Times New Roman", serif; font-size: var(--schrift); line-height: 1.55;
  text-align: left;
}
#text h2 { font-size: 1.1em; margin: 0 0 10px; }
#text h2 .titel { font-weight: 700; }
/* Überschrift (§ bzw. Abschnitt mit Titel) bleibt beim Scrollen oben sichtbar */
#text h2 { position: sticky; top: -24px; z-index: 5; background: var(--papier); padding: 24px 0 6px; margin-top: -24px; }
#text h2.haftet { box-shadow: 0 6px 6px -6px rgba(0,0,0,.3); }
#text h2 .satz .w { cursor: pointer; }
.zwischen .w { cursor: pointer; }
/* Fundstellen im Wortlaut (verweise.js): dem Text sieht man nichts an, nur der Mauszeiger wird zur Hand */
.zv { cursor: pointer; }
/* Anhänge der Handbücher: der volle amtliche Titel des Schreibens steht unter der (kurzen, haftenden) Überschrift */
.zwischen.amtlich { font-family: Georgia, "Times New Roman", serif; font-size: .95em; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: #3a3a3a; margin: .1em 0 .7em; padding: 2px 0 2px 12px; border-left: 3px solid #cdbf9a; }
.zwischen.amtlich::before { content: "Amtlicher Titel"; display: block; font-family: "Segoe UI", system-ui, sans-serif; font-size: .62em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); margin-bottom: 1px; }
#text .gliederung { font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px; color: var(--grau); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
#text .stand { font-family: "Segoe UI", system-ui, sans-serif; font-size: 11px; color: var(--grau); margin-top: 28px; border-top: 1px solid #e3e3e3; padding-top: 6px; }
#text .fussnoten { font-family: "Segoe UI", system-ui, sans-serif; font-size: 11px; color: #555; white-space: pre-wrap; margin-top: 14px; }

.abs { margin: 0 0 .55em; }
.tok { cursor: pointer; border-radius: 3px; padding: 0 1px; }
.tok:hover { outline: 1px dashed #999; }
.absnr { font-weight: 700; margin-right: .3em; }
.satznr { font-size: .62em; vertical-align: super; line-height: 0; margin-right: 1px; font-weight: 700; color: #333; }
body.ohne-satznr .satznr { display: none; }
.w { white-space: pre-wrap; }
.liste { margin: .15em 0 .15em 0; }
.item { display: flex; gap: .45em; margin: .1em 0; }
.item > .nr-spalte { flex: 0 0 2.3em; align-self: flex-start; text-align: right; white-space: nowrap; }
.item > .item-inhalt { flex: 1; min-width: 0; }
.liste .liste .item > .nr-spalte { flex-basis: 2.6em; }
.iv-gliederung.ebene-2 { padding-left: 10px; } .iv-gliederung.ebene-3 { padding-left: 20px; } .iv-gliederung.ebene-4 { padding-left: 30px; } .iv-gliederung.ebene-5 { padding-left: 40px; }
table.tab { border-collapse: collapse; margin: .6em 0; font-size: .92em; width: 100%; }
table.tab td, table.tab th { border: 1px solid #ccc; padding: 3px 6px; vertical-align: top; text-align: left; }
.leer { color: var(--grau); font-style: italic; }
table.tab.rechnung { width: auto; min-width: 60%; margin: .4em 0 .4em 1.6em; }
table.tab.rechnung td { border: none; padding: 1px 10px 1px 4px; }
table.tab.rechnung td.rechts { text-align: right; white-space: nowrap; }
table.tab.rechnung td.summe { border-top: 1px solid #333; }
table.tab.rechnung td.summe2 { border-top: 3px double #333; }
.zeichnung { position: relative; display: block; margin: .6em auto; font-size: 1em; }
.zeichnung svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.zeichnung .satz { display: block; }
.zeichnung .w { position: absolute; white-space: nowrap; line-height: 1; }
.zeichnung .sp { display: none; }
.zeichnung .kasten { position: static; outline: none; }
.beispiel { margin: .35em 0 .35em 1.6em; padding: .1em 0 .1em .7em; border-left: 2px solid #d8d8d8; font-size: .95em; }
.beispiel > .bsplabel { display: inline-block; font-weight: 700; margin-bottom: .1em; }
.zwischen { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: .85em; margin: .9em 0 .25em; letter-spacing: .02em; }
.iv-eintrag.iv-ustae .iv-enbez { flex-basis: 78px; }
.iv-eintrag.iv-anhang .iv-enbez { flex-basis: 108px; }
/* Fundstelle in den Beck'schen Steuererlassen: im Inhaltsverzeichnis unter der Adresse, in der Überschrift an zweiter Stelle */
.iv-eintrag .iv-beck { display: block; font-weight: 400; font-size: .85em; color: #7a6a4a; white-space: nowrap; }
#text h2 .beck { font-size: .62em; font-weight: 600; color: #7a6a4a; vertical-align: .28em; white-space: nowrap; }

/* Markierungen: Klassen werden aus palette.json erzeugt (f-, u-, d-, ka-, kr-) */
body.ohne-markierungen [class*="f-"], body.ohne-markierungen [class*="u-"], body.ohne-markierungen [class*="d-"],
body.ohne-markierungen [class*="we-"], body.ohne-markierungen [class*="zz-"], body.ohne-markierungen [class*="gp-"],
body.ohne-markierungen [class*="ka-"], body.ohne-markierungen [class*="kr-"] { background: none !important; border: none !important; outline: none !important; text-decoration: none !important; padding-bottom: 0 !important; }
.lg-taste { color: var(--grau); font-size: 11px; white-space: nowrap; }
.wz.umschalter { font-style: italic; }
.kasten { outline-offset: 1px; border-radius: 2px; padding: 0 1px; }
.tok.kreis { border-radius: 50%; padding: 0 4px; }
.tok.kastenTok { border-radius: 2px; padding: 0 3px; }
.tok.kreis.kastenTok { border-radius: 40%; }

/* Randspalten: Querverweise links, Notizen rechts */
.rand-item {
  position: absolute; width: calc(var(--randbreite) - 22px);
  font-family: "Segoe UI", system-ui, sans-serif; font-size: calc(var(--schrift) * 0.72); line-height: 1.3;
  border-radius: 4px; cursor: pointer; user-select: none; overflow-wrap: anywhere;
}
body.praesentation .rand-item { font-size: calc(var(--schrift) * 0.78); }
.rand-item.links { left: 12px; }
.rand-item.rechts { right: 12px; }
.rand-item.ri-offen { outline: 2px dashed #e08a00; }
.rand-item .ri-knoepfe { position: absolute; top: -9px; right: -4px; display: none; gap: 2px; }
.rand-item:hover .ri-knoepfe { display: flex; }
.rand-item .ri-knoepfe button { padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 3px; background: #fff; }
.rand-item .ri-knoepfe button:hover { background: #dbe6ff; }
.qv { color: var(--akzent); padding: 2px 6px; border: 1px solid #c9d6ee; background: #f3f7ff; }
.qv:hover { background: #e4ecf8; }
.qv .qv-label { font-weight: 600; }
.qv .qv-zusatz { color: #444; font-weight: 400; }
.qv.qv-tot { color: #777; border-style: dashed; background: #f6f6f6; }
.nz { border: 1px solid #ddd; background: var(--nzfarbe, #fff8c4); padding: 2px 6px; }
.nz .nz-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .nz-titel::before { content: "▸ "; color: #666; }
.nz.offen .nz-titel::before { content: "▾ "; }
.nz .nz-inhalt { display: none; white-space: pre-wrap; margin-top: 3px; user-select: text; cursor: text; }
.nz.offen .nz-titel { white-space: normal; }
.nz.offen .nz-inhalt { display: block; }
body.ohne-qv .rand-item.links { display: none; }
body.ohne-nz .rand-item.rechts { display: none; }
.rand-anker { box-shadow: 0 0 0 2px #f5a623; border-radius: 2px; }

/* Änderungen seit letzter Fassung */
body.zeige-aend .satz.aend-neu { box-shadow: inset 0 -0.15em 0 #ffb3b3; background: #ffecec; }
body.zeige-aend .satz.aend-geaendert { background: #fff0d6; box-shadow: inset 0 -0.15em 0 #ffd28a; }
body.zeige-aend .aend-hinweis { display: block; }
.aend-hinweis { display: none; font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px; color: #a34; margin: 4px 0 8px; }

#werkzeuge { grid-area: werkzeuge; border-left: 1px solid var(--rand); background: #fff; overflow-y: auto; padding: 8px; font-size: 13px; }
.wz-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); margin: 10px 0 4px; }
.wz { display: block; width: 100%; text-align: left; margin: 2px 0; padding: 4px 8px; }
.wz-gruppe.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
.wz-gruppe.zweispaltig .wz-titel { grid-column: 1 / -1; }
.wz-gruppe.zweispaltig .wz { margin: 0; padding: 3px 5px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-gruppe.zweispaltig .wz .muster { width: 22px; margin-right: 4px; }
.wz .muster { display: inline-block; width: 34px; height: 14px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.wz .taste { float: right; color: #999; font-size: 11px; }
.wz.aktiv .taste { color: #dbe6ff; }
.wz-hilfe { font-size: 11px; color: var(--grau); margin-top: 14px; line-height: 1.4; }

#legende, #pruefliste, #suche, #uebersicht, #einstellungen, #bmfpanel {
  position: fixed; top: 60px; right: 240px; width: 400px; max-height: calc(100vh - 80px); overflow-y: auto;
  background: #fff; border: 1px solid #bbb; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 20; font-size: 13px;
}
#suche, #uebersicht { width: 620px; }
#bmfpanel { width: 720px; right: 60px; }
#einstellungen { width: 780px; right: 60px; }
.panel-inhalt { padding: 8px 12px 14px; }
/* Auf schmalen Bildschirmen füllen die Fenster die Breite */
@media (max-width: 1150px) {
  #legende, #pruefliste, #suche, #uebersicht, #einstellungen, #bmfpanel { left: 12px; right: 12px; width: auto; }
}
body.praesentation #legende { right: 20px; }
#pruefliste { width: 560px; }
.panel-kopf { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #ddd; font-weight: 600; position: sticky; top: 0; background: #fff; }
.schliessen { border: none; background: none; font-size: 18px; padding: 0 4px; }
#legendeInhalt, #prueflisteInhalt { padding: 8px 12px 14px; }
.lg-titel { font-size: 11px; text-transform: uppercase; color: var(--grau); margin: 10px 0 4px; }
.lg-zeile { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0; }
.lg-zeile .muster { flex: 0 0 34px; height: 14px; margin-top: 2px; border-radius: 2px; }
.lg-zeile .alt { color: #a05; }
.pl-abschnitt { margin: 10px 0; }
.pl-eintrag { border: 1px solid #e2e2e2; border-radius: 4px; padding: 6px 8px; margin: 6px 0; }
.pl-eintrag .pl-anker { font-weight: 600; cursor: pointer; color: var(--akzent); }
.pl-eintrag .pl-alt { color: #900; text-decoration: line-through; }
.pl-eintrag .pl-neu { color: #060; }
.pl-eintrag .pl-knoepfe { margin-top: 4px; display: flex; gap: 6px; }
.pl-anker { cursor: pointer; color: var(--akzent); }

/* Volltextsuche */
.such-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.such-kopf { font-weight: 600; margin: 10px 0 3px; border-bottom: 1px solid #eee; }
.such-zeile-treffer { display: flex; gap: 8px; margin: 3px 0; align-items: baseline; }
.such-zeile-treffer .pl-anker { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.tr-text { color: #333; }
.such-hinweis { color: var(--grau); margin: 4px 0; }
mark { background: #ffe08a; }
.satz.treffer { background: #fff6d6; }

/* Markierungsübersicht */
.ue-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.ue-kopf { color: var(--grau); margin-bottom: 6px; }
.ue-norm { font-weight: 600; margin: 8px 0 2px; cursor: pointer; }
.ue-zeile { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; }
.ue-zeile .muster { flex: 0 0 26px; height: 12px; border-radius: 2px; }
.ue-zeile .pl-anker { flex: 0 0 auto; white-space: nowrap; }
.ue-text { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ue-status { color: #a05; font-size: 11px; }
.ue-ohne { margin-top: 12px; color: var(--grau); }
.ue-ohne li { margin: 1px 0; }

/* ---------- Änderungsmelder: neue BMF-Schreiben ---------- */
#bmfKnopf.hat-neues { background: #fff3c4; border-color: #d8b24a; font-weight: 600; }
.bmf-zeile { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid #eee; }
.bmf-datum { flex: 0 0 74px; color: var(--grau); white-space: nowrap; }
.bmf-titel { flex: 1 1 320px; }
.bmf-pdf { flex: 0 0 auto; font-size: 11px; }
.bmf-ziel {
  flex: 0 0 auto; font-size: 11px; padding: 1px 6px; border-radius: 9px; cursor: pointer;
  background: #e8eefc; border: 1px solid #c3d0ee;
}
.bmf-ziel.ersetzt { background: #ffe0e0; border-color: #e6b0b0; }
.bmf-ziel.stichwort { background: #f1f1f1; border-color: #d5d5d5; }
.bmf-art { flex: 0 0 auto; font-size: 10px; color: var(--grau); border: 1px solid #ddd; border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.bmf-hinweis-text { flex: 1 1 100%; color: var(--grau); font-size: 11px; margin-left: 82px; }
.bmf-zeige { color: var(--grau); margin: 4px 0; }
.bmf-leer { padding: 10px 12px; color: var(--grau); }
/* Banner über der Vorschrift */
.bmf-banner {
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px; margin: 6px 0 10px;
  padding: 6px 10px; border-left: 4px solid #d8b24a; background: #fff8e2; border-radius: 3px;
}
.bmf-banner.ersetzt { border-left-color: #c05050; background: #fdeeee; }
.bmf-banner-kopf { font-weight: 600; margin-bottom: 3px; }
.bmf-banner-zeile { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 2px 0; }
.bmf-banner .bmf-datum { flex: 0 0 68px; }

/* Einstellungen */
.ein-hinweis, .ein-konflikte { margin-bottom: 8px; }
.ein-konflikte { color: #b00; border: 1px solid #f0c0c0; background: #fff5f5; padding: 6px 8px; border-radius: 4px; }
.ein-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); margin: 14px 0 4px; }
.ein-knoepfe { display: flex; gap: 8px; margin-bottom: 6px; }
.ein-tabelle { border-collapse: collapse; width: 100%; }
.ein-tabelle td, .ein-tabelle th { padding: 2px 4px; text-align: left; vertical-align: middle; font-weight: normal; }
.ein-tabelle th { font-size: 11px; color: var(--grau); }
.ein-tabelle .muster { display: inline-block; width: 30px; height: 12px; border-radius: 2px; }
.ein-klein { font-size: 11px; color: var(--grau); }
.ein-gruppe summary { cursor: pointer; padding: 3px 0; font-weight: 600; }
.ein-fav { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.ein-fav .muster { display: inline-block; width: 30px; height: 12px; border-radius: 2px; }
.ein-fav-name { flex: 1 1 auto; }
input.taste-feld { width: 2.4em; text-align: center; }
input.taste-feld.konflikt { background: #ffe0e0; border-color: #c00; }

/* Hinweise (EStH) innerhalb einer Richtlinie: abgesetzt, mit Kennung davor */
.abs.hinweis { background: #f6f6f1; border-left: 3px solid #cfcfbf; padding: 4px 10px 4px 12px; margin: 4px 0 6px; border-radius: 0 3px 3px 0; }
.hinweis-kopf { font-weight: 600; color: #5a5a4a; margin: 16px 0 4px; font-size: .95em; letter-spacing: .02em; }
.hinweis-kopf.zurueck { color: #333; margin-top: 18px; }
.hinweis-kopf::before { content: "▸ "; color: #a0a08a; }

/* Favoriten und Notizverweise */
.wz-hinweis { text-transform: none; letter-spacing: 0; font-size: 10px; }
.wz-leer { font-size: 11px; color: var(--grau); margin: 2px 0 6px; }
.wz.ist-favorit::after { content: ' ★'; color: #e0a400; float: right; }
.zitat-link { color: var(--akzent); text-decoration: underline; cursor: pointer; }
.nur-markiert-hinweis { color: var(--grau); font-size: 12px; margin: 6px 0; font-style: italic; }

.kontextmenue {
  position: fixed; z-index: 30; background: #fff; border: 1px solid #aaa; border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.2);
  min-width: 260px; max-width: 420px; padding: 6px 0; font-size: 13px; font-family: "Segoe UI", system-ui, sans-serif;
}
.kontextmenue .km-titel { padding: 4px 12px; color: var(--grau); font-size: 11px; text-transform: uppercase; }
.kontextmenue .km-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 12px; }
.kontextmenue .km-zeile:hover { background: #f0f4fa; }
.kontextmenue .muster { width: 26px; height: 12px; border-radius: 2px; flex: 0 0 26px; }
.kontextmenue .km-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontextmenue button { padding: 2px 6px; font-size: 12px; }
.kontextmenue .km-leer { padding: 5px 12px; color: var(--grau); }

/* Dialog */
#dialog { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 40; display: flex; align-items: center; justify-content: center; }
.dlg { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.3); width: 460px; max-width: 95vw; padding: 16px 18px; font-size: 13px; }
.dlg h3 { margin: 0 0 6px; font-size: 15px; }
.dlg-hinweis { color: var(--grau); margin-bottom: 8px; white-space: pre-wrap; }
.dlg label { display: block; margin: 8px 0 3px; font-weight: 600; }
.dlg input[type=text], .dlg textarea { width: 100%; padding: 5px 8px; border: 1px solid #bbb; border-radius: 4px; }
.dlg textarea { min-height: 90px; resize: vertical; }
.dlg .farben { display: flex; gap: 6px; flex-wrap: wrap; }
.dlg .farbe { width: 30px; height: 22px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; }
.dlg .farbe.gewaehlt { border-color: #333; }
.dlg-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dlg .feld-hinweis { font-weight: 400; color: var(--grau); font-size: 12px; }

/* Präsentation */
body.praesentation { grid-template-columns: 0 1fr 0; }
body.praesentation #inhalt, body.praesentation #werkzeuge { display: none; }
body.praesentation #kopf .gruppe:not(.immer):not(.status) { display: none; }
body.praesentation #haupt { padding: 18px 20px 60px; }
body.praesentation #text { max-width: calc(1000px + var(--rb-links) + var(--rb-rechts)); }

/* Drucklayout: feste Breite, damit die Randeinträge auf der Seite auf derselben Zeilenhöhe stehen wie am Bildschirm */
body.drucklayout #text, #text.druck { --randbreite: 130px; }
body.drucklayout #text { width: 730px; max-width: 730px; margin: 0; }
.rand-item .ri-knoepfe { print-color-adjust: exact; }
@media print {
  @page { margin: 12mm 10mm; }
  body { display: block; height: auto; overflow: visible; background: #fff; }
  #kopf, #inhalt, #werkzeuge, #legende, #pruefliste, #suche, #uebersicht, #einstellungen, #bmfpanel, #hinweisleiste, #kontext, #dialog, .ri-knoepfe { display: none !important; }
  /* Markierungsübersicht drucken: nur das Fenster, über die ganze Seite */
  body.drucke-panel #haupt { display: none !important; }
  body.drucke-panel #uebersicht {
    display: block !important; position: static; width: auto; max-height: none; border: none; box-shadow: none; overflow: visible; font-size: 10pt;
  }
  body.drucke-panel .ue-filter, body.drucke-panel .panel-kopf .schliessen, body.drucke-panel .ue-ohne summary { display: none; }
  body.drucke-panel .ue-ohne[open] ul { display: block; }
  body.drucke-panel .ue-norm { break-after: avoid; }
  body.drucke-panel .ue-zeile { break-inside: avoid; }
  #haupt { overflow: visible; padding: 0; }
  #text { box-shadow: none; width: 730px; max-width: 730px; margin: 0; --randbreite: 130px; border-radius: 0; }
  .tok:hover { outline: none; }
  /* Randeinträge im Druck: schlicht, ohne Rahmen und Hintergrund, mit dünner Linie zum Text */
  .rand-item { box-shadow: none; width: calc(var(--randbreite) - 14px); font-size: 9.5pt; line-height: 1.25; border-radius: 0; }
  .rand-item.links { left: 4px; }
  .rand-item.rechts { right: 4px; }
  .qv, .qv:hover { border: none; background: none; padding: 0 6px 0 0; color: #000; border-right: 1px solid #999; }
  .qv .qv-zusatz { color: #333; }
  .nz { border: none; background: none !important; padding: 0 0 0 6px; border-left: 1px solid #999; }
  .nz .nz-titel::before, .nz.offen .nz-titel::before { content: ""; }
  .nz .nz-inhalt { display: block; }
  .nz .nz-titel { white-space: normal; }
  [class*="f-"], .nz, .qv { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #text h2 { position: static; box-shadow: none; }
}

/* Konto (nur im Serverbetrieb sichtbar) und alles, was Admins vorbehalten ist */
#kopf:has(#konto:not([hidden])) .status { margin-left: 0; flex: 1; justify-content: flex-end; }
#konto { margin-left: 0; align-items: center; gap: 8px; font-size: 12px; color: var(--grau); }
#konto .konto-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#konto .konto-link { color: var(--akzent); }
body.kein-admin .nur-admin { display: none !important; }
@media print { #konto { display: none !important; } }

/* Laserpointer (laser.js): Zeichenfläche über allem, ohne Mausereignisse abzufangen; Optik wie im Unterrichtstool des Nutzers */
#laserFlaeche { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
#laserPunkt { position: fixed; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; will-change: transform; border-radius: 50%; pointer-events: none; z-index: 61;
  background: radial-gradient(circle, #fff 0, #ff3b30 38%, rgba(255,59,48,.6) 70%, rgba(255,59,48,0) 100%); box-shadow: 0 0 14px 5px rgba(255,59,48,.45); }
#laserPunkt.klick::after { content: ""; position: absolute; inset: -4px; border: 3px solid #ff3b30; border-radius: 50%; animation: laser-klick .45s ease-out forwards; }
@keyframes laser-klick { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
body.laser #haupt { user-select: none; cursor: none; }
body.laser #haupt * { cursor: none !important; }
body.laser #laserKnopf { background: #ff3b30; border-color: #ff3b30; color: #fff; }
#teilnehmerKnopf.aktiv { background: #f5c400; border-color: #d9ad00; color: #1a1a1a; }
@media print { #laserFlaeche, #laserPunkt { display: none !important; } }

/* Teilnehmerfenster (unterricht.js): nur der Text, keine Eingaben, Mauszeiger und Laserpunkt kommen vom Dozentenfenster */
body.teilnehmer { grid-template-columns: 280px 1fr 0; cursor: none; }
body.teilnehmer #kopf, body.teilnehmer #hinweisleiste, body.teilnehmer #inhaltFilter, body.teilnehmer #werkzeuge, body.teilnehmer #legende, body.teilnehmer #konto { display: none !important; }
body.teilnehmer #haupt { pointer-events: none; overflow-y: hidden; }
body.teilnehmer #inhalt { pointer-events: none; }
#teilnehmerTitel { padding: 12px 12px 10px; border-bottom: 1px solid var(--rand); background: #f7f7f4; }
#teilnehmerTitel .tt-name { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 700; }
#teilnehmerTitel .tt-titel { display: block; font-size: 12px; color: var(--grau); margin-top: 2px; line-height: 1.3; }
body.teilnehmer #haupt * { cursor: none !important; }
#teilnehmerZeiger { position: fixed; left: 0; top: 0; width: 22px; height: 22px; margin: -2px 0 0 -2px; will-change: transform; pointer-events: none; z-index: 61;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M3 2 L3 18 L7.5 13.8 L10.6 20.2 L13.4 18.9 L10.4 12.6 L16.6 12.4 Z" fill="%23111" stroke="%23fff" stroke-width="1.4" stroke-linejoin="round"/></svg>') no-repeat; }