@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

:root {
  --estg-accent: #b3001b;
  --estg-accent-dark: #7a0012;
  --estg-ink: #1f2328;
  --estg-muted: #5c6670;
  --estg-paper: #ffffff;
  --estg-bg: #f3f4f6;
  --estg-line: #e2e5e9;
  --estg-list-w: 320px;
}

html, body { height: 100%; }

body {
  --body-font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  background: var(--estg-bg);
  color: var(--estg-ink);
}

/* ---------- Kopfzeile ---------- */
.app-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.app-header { flex: 0 0 auto; }

.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: linear-gradient(100deg, var(--estg-accent-dark) 0%, var(--estg-accent) 55%, #d61f3a 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; margin-right: auto; color: inherit; text-decoration: none; border-radius: 10px; }
.brand:hover { color: inherit; text-decoration: none; }
/* Umschalter EStG | KStG im Kopf: zwischen Marke und Stichtag, nimmt den freien Platz */
.app-header .brand { margin-right: 10px; }
.law-switch { display: flex; gap: 2px; margin-right: auto; font-size: 12.5px; font-weight: 600; }
.law-switch-item { padding: 3px 8px; border-radius: 999px; color: rgba(255,255,255,.85); text-decoration: none; border: 1px solid rgba(255,255,255,.35); }
.law-switch-item:hover { background: rgba(255,255,255,.12); }
.law-switch-item.active { background: #fff; color: var(--estg-accent); border-color: #fff; }
.brand:hover .brand-mark { background: rgba(255,255,255,.24); }
.brand-mark {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.brand-title { font-size: 22px; font-weight: 700; letter-spacing: .3px; line-height: 1.1; white-space: nowrap; }
.brand-text { min-width: 0; }
.brand-subtitle { font-size: 12.5px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.date-control { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); padding: 6px 10px 6px 14px; border-radius: 10px; }
.date-label { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; opacity: .95; }
.quick-dates { display: flex; gap: 2px; }
.quick-dates fluent-button, .quick-dates button { color: #fff !important; }
.index-status { font-size: 11.5px; opacity: .75; margin-top: 2px; }
.menu-toggle {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.menu-toggle:hover { background: rgba(255,255,255,.24); }
.narrow-only, .list-backdrop { display: none; }

/* ---------- Arbeitsbereich ---------- */
.app-content-area { flex: 1 1 auto; min-height: 0; overflow: hidden; }

.workspace {
  display: grid;
  grid-template-columns: var(--estg-list-w) 1fr;
  height: 100%;
  overflow: hidden;
}

.para-list {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--estg-line);
  background: var(--estg-paper);
  min-height: 0;
}
.para-list-head { padding: 12px 12px 8px; border-bottom: 1px solid var(--estg-line); display: flex; flex-direction: column; gap: 6px; }
.para-list-head fluent-text-input { width: 100%; }
.search-form { display: flex; align-items: center; gap: 6px; background: #f3f4f6; border: 1px solid var(--estg-line); border-radius: 6px; padding: 2px 4px 2px 10px; }
.search-form:focus-within { border-color: var(--estg-accent); box-shadow: 0 0 0 2px rgba(179,0,27,.12); background: #fff; }
.search-input { flex: 1; min-width: 0; border: none; background: transparent; padding: 6px 4px; font: inherit; font-size: 13.5px; color: var(--estg-ink); outline: none; }
.search-submit { border: none; background: transparent; color: var(--estg-accent-dark); font-size: 15px; cursor: pointer; padding: 2px 8px; border-radius: 5px; }
.search-submit:hover { background: #fdf0f1; }
.para-list-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--estg-muted); margin-top: 2px; min-height: 18px; }
.para-items { overflow-y: auto; flex: 1; padding: 6px 0; }

.para-item {
  display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline;
  padding: 7px 14px; text-decoration: none; color: var(--estg-ink);
  border-left: 3px solid transparent;
}
.para-item:hover { background: #f6f7f9; }
.para-item.active { background: #fdf0f1; border-left-color: var(--estg-accent); }
.para-group { font-family: var(--body-font); font-size: 11.5px; color: var(--estg-muted); text-transform: uppercase; letter-spacing: .6px; padding: 10px 12px 4px; border-top: 1px dashed var(--estg-line); margin-top: 6px; }
.para-num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--estg-accent-dark); white-space: nowrap; }
.para-title { font-size: 13px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.para-view { overflow-y: auto; min-height: 0; padding: 20px 32px 60px; }

.empty-state { max-width: 640px; margin: 80px auto; text-align: center; color: var(--estg-muted); }
.empty-state h1 { color: var(--estg-ink); margin: 10px 0 6px; font-size: 1.5em; line-height: 1.25; }
.list-open-button { margin-top: 6px; padding: 8px 18px; border: none; border-radius: 8px; background: var(--estg-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.list-open-button:hover { background: var(--estg-accent-dark); }
.loading { display: flex; align-items: center; gap: 12px; color: var(--estg-muted); margin-top: 40px; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--estg-line); }
.legend-item::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.l-notyet { --dot: #d97706; } .l-retro { --dot: #7c3aed; } .l-suspended { --dot: #6b7280; }
.l-recent { --dot: transparent; font-style: normal; }
.legend-item.l-recent { display: block; border-radius: 12px; text-align: left; }
.legend-ins { font-style: italic; background: #fde68a; padding: 0 3px; border-radius: 2px; }
.legend-del { font-size: 10px; color: #b91c1c; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 3px; padding: 1px 3px; }
.l-subst { --dot: #ca8a04; } .l-anm { --dot: #6366f1; } .l-note { --dot: #0369a1; } .l-since { --dot: #15803d; } .l-upcoming { --dot: #0e7490; }

/* ---------- Gesetzestext ---------- */
.law { max-width: 980px; margin: 0 auto; background: var(--estg-paper); border: 1px solid var(--estg-line); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.law-head { padding: 22px 32px 16px; border-bottom: 1px solid var(--estg-line); background: linear-gradient(180deg, #fafafa, #fff); border-radius: 12px 12px 0 0; }
.law-crumbs { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--estg-muted); }
.law-title { font-size: 22px; font-weight: 700; margin: 4px 0 10px; }
.law-key { color: var(--estg-accent); margin-right: 6px; }
.law-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Kopfangaben als Fließtext (auch für Suchmaschinen); die Badges darunter zeigen dasselbe kompakt */
.fassung-info { font-size: 13px; line-height: 1.45; color: var(--estg-muted); margin: 0 0 10px; max-width: 90ch; }
.badge-link { text-decoration: none; display: inline-flex; border-radius: 999px; }
.badge-link:hover { filter: brightness(.93); text-decoration: none; }

.law-body { padding: 18px 32px 28px; font-size: 15px; line-height: 1.62; font-family: Georgia, "Times New Roman", serif; }
.law-body p { margin: 0 0 .55em; text-align: justify; hyphens: auto; }
.law-body p.erl { font-size: 13.5px; color: #444; }
.law-body .gldsym { font-weight: 700; color: var(--estg-accent-dark); }
.law-body h5 { font-family: var(--body-font); font-size: 13px; margin: 14px 0 6px; color: var(--estg-muted); text-transform: uppercase; letter-spacing: .6px; }
.law-body .notices { font-family: var(--body-font); font-size: 12.5px; background: #f6f7f9; border: 1px dashed #cfd4da; border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; color: #444; }
.notices-label { font-weight: 600; }

.absatz { padding: 2px 0 2px 0; margin-bottom: 6px; border-radius: 6px; }
.absatz.not-yet > p.abs, .absatz.not-yet > ul, .absatz.not-yet > table, .absatz.not-yet > p.schlussteil { background: #fff7ed; box-shadow: 0 0 0 6px #fff7ed; border-radius: 2px; }
/* ganze Einheit neu (kein Wortvergleich möglich): kursiv + zarte Hinterlegung */
.absatz.recent > p.abs, .absatz.recent > ul, .absatz.recent > table, .absatz.recent > p.schlussteil,
.law-body .changed-whole, ul.liste li.changed-whole > .li-text { font-style: italic; background: #fdf6d3; box-shadow: 0 0 0 3px #fdf6d3; border-radius: 2px; }
/* nur geänderte Wörter: kursiv + kräftige Hinterlegung */
.law-body .diff-ins, .compare-grid .diff-ins, .help-marks .diff-ins { font-style: italic; background: #fde68a; box-shadow: 0 0 0 2px #fde68a; border-radius: 2px; }
.law-body .diff-del, .help-marks .diff-del { display: inline-block; font-style: normal; font-size: 10px; line-height: 1; color: #b91c1c; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 3px; padding: 1px 3px; margin: 0 2px; vertical-align: super; cursor: help; }
.absatz.suspended > p.abs, .absatz.suspended > ul, .absatz.suspended > table, .absatz.suspended > p.schlussteil { color: #777; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }

ul.liste { list-style: none; margin: 0 0 .4em 0; padding-left: 1.6em; }
ul.liste ul.liste { padding-left: 1.5em; }
ul.liste li { display: grid; grid-template-columns: 2.2em 1fr; gap: .3em; margin: 0 0 .3em; }
ul.liste li > .sym { font-variant-numeric: tabular-nums; }
ul.liste li > .li-text { text-align: justify; hyphens: auto; }
ul.liste li.suspended { color: #888; }
ul.liste li.suspended > .li-text { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
p.schlussteil { margin-left: 0; }

table.law-table { border-collapse: collapse; margin: 6px 0 12px 1.5em; }
table.law-table td { padding: 2px 12px 2px 0; vertical-align: top; }
table.law-table td:last-child { text-align: right; white-space: nowrap; }

/* Verweise */
.law-body a.ref, .compare-grid a.ref { color: inherit; text-decoration: none; border-bottom: 1px dotted #9a3412; }
.law-body a.ref:hover, .compare-grid a.ref:hover { color: var(--estg-accent); border-bottom-style: solid; background: #fff1f2; }
/* Querverweise auf die Schwesterseite (anderes Gesetz): kleiner Pfeil, weil die Seite wechselt */
.law-body a.ref-fremd::after, .estr-estgref.estr-fremd::after { content: " ↗"; font-size: 10px; opacity: .7; }
.absatz { scroll-margin-top: 12px; }
ul.liste li[id] { scroll-margin-top: 12px; }
.flash { animation: estg-flash 2s ease-out; }
@keyframes estg-flash { 0% { background-color: #fde68a; box-shadow: 0 0 0 6px #fde68a; } 100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; } }

/* Volltextsuche */
mark.hit { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; box-shadow: 0 0 0 1px #facc15; }
.search-results .law-body { font-family: var(--body-font); font-size: 14px; }
.search-hint { font-size: 12px; color: var(--estg-muted); }
.hit-group { margin: 0 0 18px; }
.hit-para { font-size: 15px; margin: 0 0 6px; }
.hit-para a { color: var(--estg-accent-dark); text-decoration: none; }
.hit-para a:hover { text-decoration: underline; }
.hit-title { font-weight: 400; color: var(--estg-ink); }
.hit-count { font-size: 11.5px; background: #e5e7eb; border-radius: 999px; padding: 0 8px; margin-left: 6px; vertical-align: middle; }
a.hit { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 6px 10px; margin: 0 0 4px; border-radius: 8px; border: 1px solid var(--estg-line); background: #fafafa; color: var(--estg-ink); text-decoration: none; }
a.hit:hover { background: #fdf0f1; border-color: #f3c0c6; }
.hit-loc { font-weight: 600; font-size: 12.5px; color: var(--estg-accent-dark); }
.hit-snippet { font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.5; }
.search-filter { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.search-filter-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid var(--estg-line); border-radius: 999px; font-size: 12.5px; color: var(--estg-ink); text-decoration: none; background: #fff; }
.search-filter-item:hover { border-color: #f3c0c6; background: #fdf0f1; }
.search-filter-item.active { border-color: var(--estg-accent); color: var(--estg-accent-dark); font-weight: 600; }
.search-filter-item[data-rl].active { border-color: var(--rl-line); color: var(--rl-text); }
.search-filter-item .hit-count { margin-left: 2px; }
.results-title { font-size: 16px; margin: 18px 0 10px; padding-left: 8px; border-left: 4px solid var(--estg-accent); }
.rl-results .results-title { border-left-color: var(--rl-line); color: var(--rl-text); }
.rl-results .hit-loc { color: var(--rl-text); }
.rl-results a.hit:hover { background: var(--rl-bg); border-color: var(--rl-line); }
.hit-target { display: block; font-weight: 400; font-size: 11.5px; color: var(--estg-muted); }

mark.subst { background: #fef3c7; color: #713f12; padding: 0 3px; border-radius: 3px; border-bottom: 2px solid #ca8a04; cursor: help; font-weight: 600; }
.anm-wert { background: #eef2ff; color: #3730a3; padding: 0 3px; border-radius: 3px; border-bottom: 2px dotted #6366f1; cursor: help; white-space: nowrap; }

/* ---------- Gegenüberstellung ---------- */
details.compare-inline { margin: 4px 0 10px; font-family: var(--body-font); border-left: 3px solid #ca8a04; background: #fffbeb; border-radius: 0 8px 8px 0; padding: 4px 12px 6px; }
details.compare-inline > summary { cursor: pointer; font-size: 12.5px; color: #78350f; font-weight: 600; padding: 4px 0; }
details.compare-inline[open] > summary { margin-bottom: 8px; }
details.compare-removed { border-left-color: #b91c1c; background: #fef2f2; }
.compare-legend { font-size: 11.5px; color: var(--estg-muted); font-weight: 400; margin-left: 8px; }
.compare-legend span { padding: 0 4px; border-radius: 2px; }
.compare-grid { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 8px 14px; align-items: start; font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.55; }
.compare-pair { grid-template-columns: 1fr 1fr; margin-top: 6px; }
.compare-head { font-family: var(--body-font); font-size: 11.5px; font-weight: 700; color: var(--estg-muted); text-transform: uppercase; letter-spacing: .5px; }
.ueb-alt .compare-old, .ueb-alt .compare-new { background: #fff; }
.compare-label { font-family: var(--body-font); font-size: 12px; font-weight: 700; color: var(--estg-muted); padding-top: 10px; }
.compare-old, .compare-new { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--estg-line); }
.compare-old { background: #fff; }
.compare-new { background: #fff; }
.compare-missing { font-family: var(--body-font); color: var(--estg-muted); font-style: italic; }
.compare-grid p { margin: 0 0 .5em; text-align: left; }
.compare-grid ul.liste li { margin-bottom: .25em; }
.diff-del-text { background: #fee2e2; color: #7f1d1d; text-decoration: line-through; text-decoration-color: #b91c1c; border-radius: 2px; }
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } .compare-label { padding-top: 14px; } }

/* ---------- Übergangsbestimmungen ---------- */
.ueb { font-family: var(--body-font); font-size: 13px; line-height: 1.5; border-left: 4px solid #0369a1; background: #f0f7fc; border-radius: 0 8px 8px 0; padding: 8px 12px 8px 14px; margin: 6px 0 12px 0; }
.ueb-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.ueb-badge { font-weight: 700; font-size: 11.5px; letter-spacing: .3px; color: #fff; background: #0369a1; padding: 1px 8px; border-radius: 999px; }
.ueb-target { font-size: 11.5px; color: var(--estg-muted); font-weight: 600; }
.ueb-target-more { font-weight: 400; }
/* Verweis an einer weiteren Stelle auf die zusammengeführte Box (einzeilig, in der Farbe der Box) */
.ueb-ref { padding: 4px 12px 4px 14px; margin: 6px 0 10px 0; }
.ueb-ref .ueb-head { margin-bottom: 0; }
.ueb-ref-link { color: #222; font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; }
.ueb-ref-link:hover { border-bottom-style: solid; }
.ueb-more-target { font-size: 11.5px; color: var(--estg-muted); font-weight: 600; }
.ueb-title { font-weight: 600; }
.ueb-window { margin-left: auto; font-size: 11.5px; color: var(--estg-muted); font-variant-numeric: tabular-nums; }
.ueb-text { color: #222; }
.ueb-more { margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(0,0,0,.12); }
.ueb-window-inline { font-size: 11.5px; color: var(--estg-muted); }
.ueb-full { margin-top: 6px; }
.ueb-full summary { cursor: pointer; font-size: 12px; color: var(--estg-muted); }
.ueb-full-body { margin-top: 6px; padding: 8px 10px; background: rgba(255,255,255,.7); border-radius: 6px; }
.ueb-full-body p { text-align: left; margin-bottom: .4em; }
.ueb-alt { margin-top: 8px; background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.08); border-radius: 6px; padding: 8px 10px; font-family: Georgia, serif; font-size: 14px; }
.ueb-alt-note { margin-top: 6px; font-size: 12px; color: var(--estg-muted); }
.ueb-alt-title { font-family: var(--body-font); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--estg-muted); margin-bottom: 4px; }

.ueb-notyet { border-color: #d97706; background: #fff7ed; } .ueb-notyet .ueb-badge { background: #d97706; }
.ueb-retro { border-color: #7c3aed; background: #f5f3ff; } .ueb-retro .ueb-badge { background: #7c3aed; }
.ueb-suspended { border-color: #6b7280; background: #f3f4f6; } .ueb-suspended .ueb-badge { background: #6b7280; }
.ueb-subst { border-color: #ca8a04; background: #fefce8; } .ueb-subst .ueb-badge { background: #ca8a04; }
.ueb-note { border-color: #0369a1; background: #f0f7fc; }
.ueb-since { border-color: #15803d; background: #f0fdf4; } .ueb-since .ueb-badge { background: #15803d; }
.ueb-upcoming { border-color: #0e7490; background: #ecfeff; } .ueb-upcoming .ueb-badge { background: #0e7490; }
.ueb-prior { border-color: #9333ea; background: #faf5ff; } .ueb-prior .ueb-badge { background: #9333ea; }
.ueb-older, .ueb-future { border-color: #9ca3af; background: #fafafa; } .ueb-older .ueb-badge, .ueb-future .ueb-badge { background: #9ca3af; }

/* Richtlinien (Findok): EStR 2000 grün, LStR 2002 magenta, KStR 2013 blau, UStR 2000 orange, UmgrStR 2002 violett; Farben über Variablen je data-rl */
.l-estr { --dot: #4d7c0f; }
.l-lstr { --dot: #9d174d; }
.l-kstr { --dot: #1d4ed8; }
.l-ustr { --dot: #c2410c; }
.l-umgrstr { --dot: #6d28d9; }
.estr, .estr-para, [data-rl] { --rl-line: #4d7c0f; --rl-bg: #f6faf0; --rl-text: #365314; }
[data-rl="lstr"] { --rl-line: #9d174d; --rl-bg: #fdf2f8; --rl-text: #831843; }
[data-rl="kstr"] { --rl-line: #1d4ed8; --rl-bg: #eff6ff; --rl-text: #1e3a8a; }
[data-rl="ustr"] { --rl-line: #c2410c; --rl-bg: #fff7ed; --rl-text: #7c2d12; }
[data-rl="umgrstr"] { --rl-line: #6d28d9; --rl-bg: #f5f3ff; --rl-text: #4c1d95; }
.estr { font-family: var(--body-font); font-size: 13px; line-height: 1.5; border-left: 4px solid var(--rl-line); background: var(--rl-bg); border-radius: 0 8px 8px 0; padding: 6px 12px 6px 14px; margin: 6px 0 12px 0; }
.estr > summary { cursor: pointer; font-weight: 600; color: var(--rl-text); }
.estr > summary::marker { color: var(--rl-line); }
.estr-abschnitt { margin: 6px 0 0 0; }
.estr-abschnitt > summary { cursor: pointer; }
.estr-nr { font-weight: 700; color: var(--rl-text); }
.estr-rz, .estr-detail { font-size: 11.5px; color: var(--estg-muted); }
.estr-detail { font-weight: 600; }
.estr-body { margin-top: 6px; padding: 8px 10px; background: rgba(255,255,255,.85); border: 1px solid rgba(0,0,0,.06); border-radius: 6px; }
.estr-h { font-weight: 700; margin: 10px 0 4px; }
.estr-h3 { font-size: 13.5px; } .estr-h4, .estr-h5, .estr-h6 { font-size: 13px; }
.estr-rz-block { display: grid; grid-template-columns: 52px 1fr; gap: 8px; margin-bottom: 6px; }
.estr-vorspann { grid-template-columns: 1fr; }
.estr-rz-nr { font-weight: 700; color: var(--rl-line); text-decoration: none; text-align: right; font-variant-numeric: tabular-nums; }
.estr-rz-nr:hover { text-decoration: underline; }
.estr-rz-text p { margin: 0 0 .4em; text-align: left; }
.estr-rz-text ul, .estr-rz-text ol { margin: 0 0 .4em 1.2em; }
.estr-rz-text table { border-collapse: collapse; margin: 4px 0; }
.estr-rz-text td { border: 1px solid var(--estg-line); padding: 2px 6px; vertical-align: top; }
.estr-grafik { font-style: italic; }
.estr-bild { max-width: 100%; height: auto; vertical-align: middle; }
.estr-raw { white-space: pre-wrap; font-size: 11.5px; color: var(--estg-muted); }
.estr-pending { color: var(--estg-muted); font-style: italic; }
.estr-preview { margin: 0; }
.estr-filter { font-size: 11.5px; color: var(--estg-muted); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px dashed rgba(0,0,0,.12); }
.estr-filter-link { color: var(--rl-line); }
.estr-error { color: #b91c1c; font-style: italic; }
.estr-para .estr { margin-top: 4px; }
/* Verweise im Richtlinientext: auf Randzahlen (Popover, Farbe der Zielrichtlinie) und auf EStG-Paragraphen der App */
.estr-rzref[data-rl-ref="estr"] { --rl-line: #4d7c0f; }
.estr-rzref[data-rl-ref="lstr"] { --rl-line: #9d174d; }
.estr-rzref[data-rl-ref="kstr"] { --rl-line: #1d4ed8; }
.estr-rzref[data-rl-ref="ustr"] { --rl-line: #c2410c; }
.estr-rzref[data-rl-ref="umgrstr"] { --rl-line: #6d28d9; }
.estr-rzref { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--rl-line); }
.estr-rzref:hover { color: var(--rl-line); border-bottom-style: solid; }
.estr-estgref { color: inherit; text-decoration: none; border-bottom: 1px dotted #9a3412; }
.estr-estgref:hover { color: var(--estg-accent); border-bottom-style: solid; background: #fff1f2; }
/* Popover mit der verwiesenen Randzahl; Lage setzt estg.js, schmal als Leiste am unteren Rand */
.estr-pop { position: fixed; inset: auto; margin: 0; padding: 0; width: min(560px, calc(100vw - 16px)); max-height: 85vh; overflow: hidden;
  border: 1px solid rgba(0,0,0,.15); border-left: 4px solid var(--rl-line); border-radius: 0 8px 8px 0; background: var(--rl-bg); color: var(--estg-ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.18); font-family: var(--body-font); font-size: 13px; line-height: 1.5; }
.estr-pop:popover-open { display: flex; flex-direction: column; }
.estr-pop-body { overflow: auto; padding: 10px 34px 10px 12px; }
.estr-pop-close { position: absolute; top: 4px; right: 6px; border: 0; background: transparent; font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer; color: var(--estg-muted); }
.estr-pop-close:hover { color: var(--estg-ink); }
.estr-pop-head { margin-bottom: 6px; }
.estr-pop-title { font-weight: 700; color: var(--rl-text); }
.estr-pop-section { font-size: 11.5px; color: var(--estg-muted); }
.estr-pop .estr-rz-block { grid-template-columns: 44px minmax(0, 1fr); background: rgba(255,255,255,.85); border-radius: 6px; padding: 6px 8px 2px 0; margin: 0; }
.estr-pop .estr-rz-text { overflow-x: auto; }
@media (max-width: 600px) {
  .estr-pop { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-left: 0; border-top: 4px solid var(--rl-line); border-radius: 12px 12px 0 0; }
}
/* Badge der LStR: Regeln aus dem Dokument schlagen die :host-Regeln des Web-Components */
fluent-badge.badge-lstr { background-color: #fdf2f8; color: #831843; border-color: #f9a8d4; }
fluent-badge.badge-kstr { background-color: #eff6ff; color: #1e3a8a; border-color: #93c5fd; }
fluent-badge.badge-ustr { background-color: #fff7ed; color: #7c2d12; border-color: #fdba74; }
fluent-badge.badge-umgrstr { background-color: #f5f3ff; color: #4c1d95; border-color: #c4b5fd; }

.paragraph-level { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--estg-line); }
.group-title { font-family: var(--body-font); font-size: 13px; color: var(--estg-muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .6px; }
details.collapsed-group { font-family: var(--body-font); margin-top: 14px; }
details.collapsed-group > summary { cursor: pointer; font-size: 13px; color: var(--estg-muted); padding: 6px 0; }
details.collapsed-group .count { background: #e5e7eb; border-radius: 999px; padding: 0 8px; font-size: 11.5px; }
.remarks { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--estg-line); font-size: 13px; color: #444; }
.remarks p { text-align: left; margin-bottom: .3em; }

/* ---------- Fehleranzeige ---------- */
#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Schmale Bildschirme: Paragraphenliste als Menü, Stichtag in eigener Zeile */
@media (max-width: 900px) {
  .app-header { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .menu-toggle { display: inline-flex; }
  .brand-mark { display: none; }
  .brand-title { font-size: 19px; }
  .brand-subtitle { display: none; }
  .help-link { width: 40px; height: 40px; }
  .header-controls { order: 3; flex: 1 1 100%; justify-content: flex-start; gap: 6px; }
  .date-control { padding: 4px 6px 4px 10px; }
  .date-control .fluent-datepicker { width: 136px !important; }
  .quick-dates { flex-wrap: wrap; }
  .quick-dates fluent-button { min-width: 0; padding-left: 6px; padding-right: 6px; }

  .workspace { grid-template-columns: 1fr; position: relative; }
  .para-list {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 20;
    width: min(88vw, 380px);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    box-shadow: 4px 0 18px rgba(0,0,0,.18);
  }
  .workspace.list-open .para-list { transform: none; visibility: visible; transition: transform .2s ease; }
  .workspace.list-open .list-backdrop { display: block; position: absolute; inset: 0; z-index: 15; background: rgba(0,0,0,.35); }
  .para-item { grid-template-columns: 48px 1fr; padding-top: 9px; padding-bottom: 9px; }
  .para-title { white-space: normal; }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .empty-state { margin: 32px auto; }
  .list-open-button.narrow-only { display: inline-block; }

  .para-view, .help-view { padding: 12px 10px 40px; }
  .law-body, .law-head, .help-body { padding-left: 16px; padding-right: 16px; }
  .law-title { font-size: 19px; }
  .law-meta fluent-badge { height: auto; min-height: 20px; white-space: normal; text-align: left; }
}
@media (max-width: 600px) {
  .index-status { display: none; }
  .date-label { display: none; }
  .law-switch { font-size: 11px; gap: 1px; }
  .law-switch-item { padding: 2px 5px; }
  .law-body, .law-head, .help-body { padding-left: 12px; padding-right: 12px; }
  .law-body p, ul.liste li > .li-text { text-align: left; }
  ul.liste { padding-left: .6em; }
  ul.liste ul.liste { padding-left: .8em; }
  a.hit { grid-template-columns: 1fr; gap: 2px; }
  table.law-table { margin-left: 0; }
}

/* ---------- Hilfe ---------- */
.help-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.help-link:hover { background: rgba(255,255,255,.24); color: #fff; }
.help-view { height: 100%; overflow-y: auto; padding: 20px 32px 60px; }
.help-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 13px; }
.help-toc a { color: var(--estg-accent-dark); text-decoration: none; border-bottom: 1px dotted currentColor; }
.help-toc a:hover { color: var(--estg-accent); border-bottom-style: solid; }
.help-body { padding: 10px 32px 28px; font-size: 14.5px; line-height: 1.6; }
.help-body section { padding: 14px 0 6px; border-bottom: 1px solid var(--estg-line); scroll-margin-top: 12px; }
.help-body section:last-child { border-bottom: none; }
.help-body h2 { font-size: 18px; margin: 0 0 8px; color: var(--estg-accent-dark); }
.help-body h3 { font-size: 14px; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .6px; color: var(--estg-muted); }
.help-body p { margin: 0 0 .7em; }
.help-body ul { margin: 0 0 .7em; padding-left: 22px; }
.help-body li { margin-bottom: .35em; }
.help-body code { font-size: 13px; background: #f3f4f6; border: 1px solid var(--estg-line); border-radius: 4px; padding: 0 5px; }
.help-body .legend { justify-content: flex-start; margin: 4px 0 14px; }
.help-marks { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 8px 18px; margin: 0 0 .7em; }
.help-marks dt { font-weight: 600; }
.help-marks dd { margin: 0; }
.help-strike { text-decoration: line-through; color: #991b1b; }
.help-notyet { background: #ffedd5; color: #9a3412; padding: 0 4px; border-radius: 3px; border-bottom: 2px solid #f97316; }
.help-foot { color: var(--estg-muted); font-size: 13px; margin-top: 10px; }
@media (max-width: 720px) { .help-marks { grid-template-columns: 1fr; } .help-marks dd { margin-bottom: 8px; } }