/* XRechnung-Studio (erechnung.kukanilea.de, 2026-11-02).
   Ab 1024px zwei Spalten: links das Formular, rechts das Ansichtsexemplar im
   Aufbau eines DIN-5008-Briefs, das beim Scrollen stehen bleibt. Darunter
   zwei Reiter, Eingabe und Vorschau. Gedruckt wird nur das Blatt, auf A4.

   Das Blatt ist in Millimetern gebaut: --mm ist am Schirm ein 210stel der
   Blattbreite (Containerabfrage), im Druck ein echter Millimeter. So ist die
   Vorschau maszstaeblich dasselbe Blatt, das aus dem Drucker kommt. */

.xr-studio-wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px 40px; }
.xr-studio { display: grid; gap: 28px; align-items: start; }
.xr-studio .tool-card { margin: 0; }
/* Rasterkinder werden sonst nie schmaler als ihr Inhalt (das Blatt traegt mobil 540px). */
.xr-eingabe, .xr-vorschau { min-width: 0; }
@media (min-width: 1024px) {
  .xr-studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .xr-vorschau { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
}
@media (max-width: 1023.98px) {
  .xr-studio[data-ansicht="eingabe"] .xr-vorschau,
  .xr-studio[data-ansicht="vorschau"] .xr-eingabe { display: none; }
  /* Die Reiter bleiben beim Scrollen erreichbar. */
  .xr-reiter { position: sticky; top: 8px; z-index: 5; }
}
@media (min-width: 1024px) { .xr-studio { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } }

/* Reiter unter 1024px */
.xr-reiter { display: flex; gap: 0; padding: 2px; margin: 0 0 14px; border-radius: 2px; border: 1px solid var(--line-2); background: var(--white); width: 100%; }
.xr-reiter button {
  flex: 1; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 4px;
  background: none; font: inherit; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.xr-reiter button[aria-selected="true"] { background: var(--blue); color: var(--white); }
.xr-reiter button:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }

/* Meldungen duerfen umbrechen: eine Pruefmeldung mit Auslassungspunkten ist keine. */
#xrStatus { white-space: normal; overflow: visible; margin: 12px 0 0; }
#xrStatus[data-stand="fehler"] { color: var(--warn-ink); font-weight: 600; }
#xrStatus[data-stand="ok"] { color: var(--green); font-weight: 600; }
.xr-fehler { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--warn-ink); }
.xr-pruef[data-stand="ok"] { color: var(--green); font-weight: 600; }
.xr-pruef[data-stand="fehler"] { color: var(--warn-ink); font-weight: 600; }
#xrDatumHinweis:empty { display: none; }
#xrDatumHinweis { color: var(--warn-ink); font-weight: 600; }
.xr-tabelle td.col-unit select { width: 100%; }
/* Vorschau */
.xr-papier { container-type: inline-size; }
.xr-blatt {
  --mm: calc(100cqw / 210);
  position: relative; box-sizing: border-box;
  width: 100%; aspect-ratio: 210 / 297;
  padding: calc(var(--mm) * 10) calc(var(--mm) * 20) calc(var(--mm) * 30) calc(var(--mm) * 25);
  background: #fff; color: #111;
  font: calc(var(--mm) * 3.5) / 1.4 Arial, Helvetica, sans-serif;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 8px 24px rgba(15, 23, 42, .08);
  border-radius: 2px;
}
.xr-blatt .leer { color: #9aa3b2; font-style: italic; }
.xb-kopf { text-align: right; min-height: calc(var(--mm) * 17); font-size: calc(var(--mm) * 5); }
/* Anschriftfeld DIN 5008 Form B: 45 mm von oben, 85 x 45 mm; Ruecksendeangabe in der Zusatzzone. */
.xb-anschrift { position: absolute; top: calc(var(--mm) * 45); left: calc(var(--mm) * 25); width: calc(var(--mm) * 85); height: calc(var(--mm) * 45); }
.xb-anschrift p { margin: 0; }
.xb-ruecksende { font-size: calc(var(--mm) * 2.4); text-decoration: underline; margin-bottom: calc(var(--mm) * 4) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Informationsblock rechts, ab 50 mm von oben, 125 mm von links. */
.xb-info {
  position: absolute; top: calc(var(--mm) * 50); left: calc(var(--mm) * 125); right: calc(var(--mm) * 10);
  display: grid; grid-template-columns: auto 1fr; gap: calc(var(--mm) * .6) calc(var(--mm) * 3);
  margin: 0; font-size: calc(var(--mm) * 3);
}
.xb-info dt { color: #555; }
.xb-info dd { margin: 0; overflow-wrap: anywhere; }
.xb-betreff { margin: calc(var(--mm) * 88) 0 calc(var(--mm) * 6); font-size: calc(var(--mm) * 4.2); }
.xb-betreff:has(+ .xb-bezug) { margin-bottom: calc(var(--mm) * 1.5); }
.xb-bezug { margin: 0 0 calc(var(--mm) * 6); font-size: calc(var(--mm) * 3.2); color: #334155; }
.xb-pos, .xb-summen { width: 100%; border-collapse: collapse; }
.xb-pos th, .xb-pos td { padding: calc(var(--mm) * 1.2) calc(var(--mm) * 1); border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; }
.xb-pos th { font-size: calc(var(--mm) * 2.8); color: #555; border-bottom-color: #999; }
.xb-pos .z, .xb-summen td { text-align: right; white-space: nowrap; }
.xb-summen { width: 60%; margin: calc(var(--mm) * 4) 0 0 auto; }
.xb-summen th { text-align: left; font-weight: normal; padding: calc(var(--mm) * .8) 0; }
.xb-gesamt th, .xb-gesamt td { font-weight: bold; border-top: 1px solid #111; padding-top: calc(var(--mm) * 1.5); }
.xb-hinweis { margin: calc(var(--mm) * 4) 0 0; }
.xb-zahlung { display: flex; gap: calc(var(--mm) * 6); align-items: flex-start; margin-top: calc(var(--mm) * 6); }
.xb-zahlung p { margin: 0; flex: 1; }
.xb-giro { margin: 0; width: calc(var(--mm) * 30); text-align: center; font-size: calc(var(--mm) * 2.4); color: #555; }
.xb-giro svg { display: block; width: 100%; height: auto; }
.xb-fuss {
  position: absolute; left: calc(var(--mm) * 25); right: calc(var(--mm) * 20); bottom: calc(var(--mm) * 10);
  border-top: 1px solid #ccc; padding-top: calc(var(--mm) * 2); font-size: calc(var(--mm) * 2.5); color: #444;
}
.xb-fuss p { margin: 0; }
.xb-ansicht { margin-top: calc(var(--mm) * 1.5) !important; color: var(--er-mut); }

/* Druck: genau das Blatt, auf A4, ohne Schatten. */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  body > *:not(main), main > *:not(.xr-studio-wrap), .xr-reiter, .xr-eingabe, .xr-aktionsleiste, .xr-statusleiste, .skip-link { display: none !important; }
  .xr-studio-wrap, .xr-studio, .xr-vorschau, .xr-papier { display: block !important; position: static !important; max-height: none !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .xr-papier { container-type: normal; }
  .xr-blatt { --mm: 1mm; width: 210mm; min-height: 297mm; aspect-ratio: auto; box-shadow: none; border-radius: 0; }
}

/* ---- Einstieg: Hero, Ablage, drei Schritte --------------------------------
   Betreiberauftrag 2026-11-02 ("Hero fehlt, sauberes Onboarding, klare
   Landingpage, Motion-Loop, Lesezeit"): links Text und Hauptweg, rechts der
   Rechnungsweg als erklaerende Schleife. Ohne Skript bleibt alles sichtbar,
   mit Skript oeffnet die Werkbank erst auf Wahl. Eckige Kanten, keine
   Verlaeufe, Farben nur aus den Token oben. */
.xr-landing { background: var(--er-papier); border-bottom: 1px solid var(--er-linie); }
.xr-hero {
  max-width: 1240px; margin: 0 auto; padding: 48px 24px 36px;
  display: grid; gap: 40px; align-items: center;
}
@media (min-width: 960px) { .xr-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding-top: 64px; } }
.xr-kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--er-gruen); }
.xr-hero h1 { margin: 0 0 16px; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -0.025em; color: var(--er-tinte); }
.xr-lede { margin: 0 0 26px; font-size: 18px; line-height: 1.55; color: var(--er-mut); max-width: 56ch; }
.xr-hero-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.xr-hero-aktionen .xr-k { min-height: 52px; padding: 12px 22px; font-size: 16px; }
.xr-fakten { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--er-linie); display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); font-size: 14px; color: var(--er-mut); }
.xr-fakten strong { display: block; font-size: 20px; color: var(--er-tinte); letter-spacing: -0.01em; }
.xr-hero-bild { position: relative; padding: 24px; background: var(--er-gruen-w); border: 1px solid var(--er-linie); }
.xr-halt {
  position: absolute; right: 10px; top: 10px; min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--er-linie); border-radius: 2px; background: var(--er-papier); color: var(--er-tinte);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.xr-halt:focus-visible { outline: 3px solid var(--er-gruen); outline-offset: 2px; }

/* Knoepfe: eckig, ruhig, eine Hauptaktion. */
.xr-k {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border: 1.5px solid var(--er-tinte); border-radius: 2px; background: var(--er-papier); color: var(--er-tinte);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.xr-k:hover { background: var(--er-gruen-w); }
.xr-k:focus-visible { outline: 3px solid var(--er-gruen); outline-offset: 2px; }
.xr-k-primaer { background: var(--er-gruen); border-color: var(--er-gruen); color: var(--er-papier); }
.xr-k-primaer:hover { background: var(--er-gruen-2); border-color: var(--er-gruen-2); }
.xr-k-flach { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.xr-k[hidden] { display: none; }

/* Ablage als Leiste, nicht als zweite Karte */
.xr-ablage {
  max-width: 1192px; margin: 0 auto 32px; padding: 14px 18px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  border: 1.5px dashed var(--er-linie-2); background: var(--er-flaeche);
}
@media (max-width: 1239px) { .xr-ablage { margin-inline: 24px; } }
.xr-ablage[data-ziel="ja"] { border-color: var(--er-gruen); background: var(--er-gruen-w); }
.xr-ablage-symbol { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--er-gruen); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xr-ablage > p { flex: 1 1 320px; margin: 0; font-size: 14.5px; color: var(--er-mut); }
.xr-ablage > p strong { color: var(--er-tinte); }
.xr-ablage input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.xr-ablage:focus-within { outline: 3px solid var(--er-gruen); outline-offset: 2px; }
.xr-import-status { flex: 1 1 100% !important; margin: 0; font-size: 13.5px !important; }
.xr-import-status:empty { display: none; }
.xr-import-status[data-stand="ok"] { color: var(--green) !important; }
.xr-import-status[data-stand="hinweis"], .xr-import-status[data-stand="fehler"] { color: var(--warn-ink) !important; }

/* Drei Schritte als Zeitleiste: Nummer auf einer Haarlinie, kein Kartenraster */
.xr-schritte { max-width: 1240px; margin: 0 auto; padding: 0 24px 36px; list-style: none; display: grid; gap: 24px; box-sizing: border-box; }
@media (min-width: 760px) { .xr-schritte { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.xr-schritte li { position: relative; padding: 0 24px 0 0; }
@media (min-width: 760px) { .xr-schritte li::before { content: ""; position: absolute; left: 44px; right: 0; top: 17px; height: 1px; background: var(--er-linie); } .xr-schritte li:last-child::before { display: none; } }
.xr-schritt-nr { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border: 1.5px solid var(--er-gruen); color: var(--er-gruen); background: var(--er-papier); font-weight: 800; }
.xr-schritte h2 { margin: 0 0 6px; font-size: 17px; color: var(--er-tinte); }
.xr-schritte p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--er-mut); max-width: 36ch; }
.xr-quer { max-width: 1240px; margin: 0 auto; padding: 0 24px 32px; box-sizing: border-box; font-size: 14px; color: var(--er-mut); }
.xr-quer a { color: var(--er-tinte); font-weight: 600; }
html[data-xr-modus="einstieg"] .xr-studio-wrap { display: none; }
/* In der Werkbank gehoert der Viewport der Rechnung: der Einstieg tritt ab. */
html[data-xr-modus="werkbank"] .xr-landing { display: none; }

/* ---- Rechnungsweg (Hero-Grafik) ------------------------------------------
   Eine erklaerende Schleife, keine Dekoration (motion-system.md, Grundregel:
   "einen Ablauf erklaeren"): Blatt -> XML -> Portal -> Pruefziffer. Ruhebild
   ist das vollstaendige Bild; jede Station kehrt in ihre Ruhelage zurueck.
   Schleife nur unter no-preference, Dauer literal 24 s, Halt bei
   html[data-hidden], ausser Sicht (data-weg-aus) und per Knopf (data-weg-halt,
   WCAG 2.2.2). Nur transform und opacity. */
.xw-weg { margin: 0; }
.xw-weg svg { display: block; width: 100%; height: auto; }
.xw-papier { fill: var(--er-papier); stroke: var(--er-linie); stroke-width: 1.5; }
.xw-tinte { fill: var(--er-tinte); }
.xw-grau { fill: var(--er-linie); }
.xw-feld { fill: none; stroke: var(--er-linie); stroke-width: 1.2; }
.xw-gruen { fill: var(--er-gruen); }
.xw-qr { fill: none; stroke: var(--er-tinte); stroke-width: 3; stroke-dasharray: 4 3; }
.xw-scan { fill: var(--er-gruen-w); opacity: 0; }
.xw-code { fill: var(--er-tinte); }
.xw-tag { fill: var(--er-code-text); }
.xw-wert { fill: var(--er-gruen-w); font-weight: 700; }
.xw-kopf { fill: var(--er-gruen); }
.xw-kopftext { fill: var(--er-papier); font: 700 12px system-ui, sans-serif; }
.xw-schlitz { fill: var(--er-tinte); }
.xw-klein { fill: var(--er-mut); font: 11px system-ui, sans-serif; }
.xw-mono { font-family: ui-monospace, Menlo, Consolas, monospace; fill: var(--er-tinte); }
.xw-paket { fill: var(--er-gruen); opacity: 0; }
.xw-umschlag { opacity: 1; }
.xw-falz { fill: none; stroke: var(--er-linie); stroke-width: 1.5; }
.xw-stempelrahmen { fill: var(--er-papier); stroke: var(--er-gruen); stroke-width: 2; }
.xw-stempeltext { fill: var(--er-gruen); font: 700 12px system-ui, sans-serif; letter-spacing: .04em; }
.xw-linie { stroke: var(--er-linie); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.xw-weg figcaption { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--er-mut); text-transform: uppercase; letter-spacing: .06em; }
.xw-weg figcaption span:nth-child(2) { text-align: center; }
.xw-weg figcaption span:nth-child(3) { text-align: right; }

@media (prefers-reduced-motion: no-preference) {
  html[data-weg="an"] .xw-scan { animation: xw-scan 24s linear infinite; }
  html[data-weg="an"] .xw-z1 { animation: xw-zeile1 24s ease-in-out infinite; }
  html[data-weg="an"] .xw-z2 { animation: xw-zeile2 24s ease-in-out infinite; }
  html[data-weg="an"] .xw-z3 { animation: xw-zeile3 24s ease-in-out infinite; }
  html[data-weg="an"] .xw-p1 { animation: xw-paket 24s ease-in-out infinite; }
  html[data-weg="an"] .xw-x1, html[data-weg="an"] .xw-x2, html[data-weg="an"] .xw-x3,
  html[data-weg="an"] .xw-x4, html[data-weg="an"] .xw-x5, html[data-weg="an"] .xw-x6 { animation: xw-tipp 24s steps(1, end) infinite; }
  html[data-weg="an"] .xw-x2 { animation-name: xw-tipp2; }
  html[data-weg="an"] .xw-x3 { animation-name: xw-tipp3; }
  html[data-weg="an"] .xw-x4 { animation-name: xw-tipp4; }
  html[data-weg="an"] .xw-x5 { animation-name: xw-tipp5; }
  html[data-weg="an"] .xw-x6 { animation-name: xw-tipp6; }
  html[data-weg="an"] .xw-umschlag { animation: xw-umschlag 24s ease-in-out infinite; }
  html[data-weg="an"] .xw-stempel { animation: xw-stempel 24s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  html[data-hidden] .xw-weg *, html[data-weg-aus] .xw-weg *, html[data-weg-halt] .xw-weg * { animation-play-state: paused !important; }
}
@keyframes xw-scan { 0% { opacity: 0; transform: translateY(0); } 2% { opacity: .9; } 18% { opacity: .9; transform: translateY(190px); } 20%, 100% { opacity: 0; transform: translateY(190px); } }
@keyframes xw-zeile1 { 0%, 4% { opacity: 1; } 6% { opacity: .2; } 9%, 100% { opacity: 1; } }
@keyframes xw-zeile2 { 0%, 8% { opacity: 1; } 10% { opacity: .2; } 13%, 100% { opacity: 1; } }
@keyframes xw-zeile3 { 0%, 12% { opacity: 1; } 14% { opacity: .2; } 17%, 100% { opacity: 1; } }
@keyframes xw-paket { 0%, 20% { opacity: 0; transform: translateX(0); } 22% { opacity: 1; } 30% { opacity: 1; transform: translateX(30px); } 32%, 100% { opacity: 0; transform: translateX(30px); } }
@keyframes xw-tipp  { 0%, 32% { opacity: 1; } 33% { opacity: .15; } 35%, 100% { opacity: 1; } }
@keyframes xw-tipp2 { 0%, 34% { opacity: 1; } 35% { opacity: .15; } 37%, 100% { opacity: 1; } }
@keyframes xw-tipp3 { 0%, 36% { opacity: 1; } 37% { opacity: .15; } 40%, 100% { opacity: 1; } }
@keyframes xw-tipp4 { 0%, 39% { opacity: 1; } 40% { opacity: .15; } 42%, 100% { opacity: 1; } }
@keyframes xw-tipp5 { 0%, 41% { opacity: 1; } 42% { opacity: .15; } 44%, 100% { opacity: 1; } }
@keyframes xw-tipp6 { 0%, 43% { opacity: 1; } 44% { opacity: .15; } 46%, 100% { opacity: 1; } }
@keyframes xw-umschlag { 0%, 48% { transform: translateX(0); opacity: 1; } 62% { transform: translateX(98px) translateY(16px) scale(.6); opacity: 1; } 64% { opacity: 0; transform: translateX(98px) translateY(16px) scale(.6); } 66% { opacity: 0; transform: translateX(0); } 70%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes xw-stempel { 0%, 64% { opacity: 1; transform: scale(1); } 65% { opacity: 0; transform: scale(1.6); } 68% { opacity: 1; transform: scale(.94); } 70%, 100% { opacity: 1; transform: scale(1); } }

/* ---- Werkbank ------------------------------------------------------------ */
.xr-studio-wrap { padding-top: 20px; scroll-margin-top: 8px; }
.xr-statusleiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 8px 12px; margin: 0 0 14px; border-radius: 2px; background: var(--white); border: 1px solid var(--line-2);
}
.xr-pruefstand { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); flex: 1 1 300px; }
.xr-pruefstand::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--warn-ink); vertical-align: 1px; }
.xr-pruefstand[data-stand="ok"] { color: var(--green); }
.xr-pruefstand[data-stand="ok"]::before { background: var(--green); }
.xr-zuruecksetzen, .xr-textknopf { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13.5px; color: var(--ink-3); text-decoration: underline; cursor: pointer; min-height: 32px; }
.xr-zuruecksetzen:hover, .xr-textknopf:hover { color: var(--ink); }

/* Schrittkarten: natives details/summary -- Tastatur und Screenreader ohne Zusatzcode. */
.xr-eingabe { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xr-schritt { background: var(--white); border: 1px solid var(--line-2); border-radius: 2px; box-shadow: none; padding: 0 !important; margin: 0 !important; }
.xr-schritt > summary {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px; color: var(--ink); min-height: 44px;
}
.xr-schritt > summary::-webkit-details-marker { display: none; }
.xr-schritt > summary::after { content: "▾"; margin-left: 8px; color: var(--ink-4); transition: transform .15s; }
.xr-schritt:not([open]) > summary::after { transform: rotate(-90deg); }
.xr-schritt > summary:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: -3px; border-radius: 2px; }
.xr-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: var(--blue); color: var(--white); font-size: 14px; flex: none; }
.xr-schritt-titel { flex: 1; }
.xr-schritt-stand { white-space: nowrap; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 1px solid currentColor; color: var(--warn-ink); }
.xr-schritt-stand:empty { display: none; }
.xr-schritt-stand[data-stand="ok"] { color: var(--green); }
.xr-schritt-stand[data-stand="ok"]::before { content: "✓ "; }
.xr-schritt-inhalt { padding: 0 18px 18px; }
.xr-merken { margin: 0 0 4px; }
.xr-merken-hinweis { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-4); }
.xr-empfaenger-wahl { margin: 0 0 14px; }
.xr-empfaenger-wahl select { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .xr-schritt > summary::after { transition: none; } }

/* Exportleiste ueber dem Blatt: eine Hauptaktion, daneben gleichrangige
   Formate, Seltenes im Menue. */
.xr-aktionsleiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin: 0 0 10px; }
.xr-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--white); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap;
}
.xr-knopf:hover { background: var(--blue-tint); border-color: var(--ink-4); }
.xr-knopf:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.xr-knopf:disabled { opacity: .6; cursor: progress; }
.xr-knopf-primaer { background: var(--blue); border-color: var(--blue); color: var(--white); }
.xr-knopf-primaer:hover { background: var(--blue-2); border-color: var(--blue-2); }
.xr-menue { position: relative; }
.xr-menue > summary::-webkit-details-marker { display: none; }
.xr-menue > summary::after { content: "▾"; margin-left: 6px; font-size: 12px; }
.xr-menue-liste {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 260px; padding: 4px;
  background: var(--white); border: 1px solid var(--line-2); border-radius: 2px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.xr-menue-liste button {
  display: block; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 4px; background: none;
  text-align: left; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
.xr-menue-liste button:hover, .xr-menue-liste button:focus-visible { background: var(--blue-tint); outline: none; }

/* Am Ende, damit die Grundregel der Reiter sie nicht ueberschreibt:
   ab 1024px stehen Eingabe und Vorschau nebeneinander, Reiter braucht es nicht. */
@media (min-width: 1024px) { .xr-reiter { display: none; } }
/* Schmal: der Viewer-Link steht im Einstieg, der Kopf behaelt Marke und Navigation. */
@media (max-width: 760px) { .header-actions { display: none; } }
/* Schmal: das Blatt bleibt lesbar breit und scrollt in seinem Rahmen, nicht die Seite. */
@media (max-width: 600px) {
  .xr-papier-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .xr-papier { min-width: 540px; }
  .xr-menue[open] { flex-basis: 100%; }
  .xr-menue-liste { position: static; margin-top: 6px; min-width: 0; box-shadow: none; }
}
@media print { .xr-papier { min-width: 0 !important; } .xr-papier-rahmen { overflow: visible !important; } }

/* ---- Werkzeug-Optik (Betreiberauftraege 2026-11-02) ----------------------
   Eigene Farbe der E-Rechnungs-Familie: das Finanz-Duotone der
   Webtool-Kategorien (styles-v2.css --c-fin-s/-w), als Token-Definition
   hier wiederholt -- der Rechnungs-Shard laedt styles-v2.css nicht. Dazu
   Tinte, Haarlinien und Papier. Kanten 2px, keine Verlaeufe. */
html[data-thema="xrechnung"] {
  --c-fin-s: #1E7A4E; --c-fin-w: #DCF0E5;
  --er-gruen: var(--c-fin-s); --er-gruen-w: var(--c-fin-w); --er-gruen-2: #17603D;
  --er-tinte: #0F172A; --er-mut: #334155; --er-linie: #CBD5E1; --er-linie-2: #94A3B8;
  --er-papier: #FFFFFF; --er-flaeche: #F8FAFC; --er-code-text: #CBD5E1;
  --c-zeit-s: #9A6408; --er-warm: var(--c-zeit-s);
  --thm: var(--er-gruen); --blue: var(--er-gruen); --blue-2: var(--er-gruen-2); --blue-soft: var(--er-gruen-w); --blue-tint: #EEF7F1;
}
html[data-thema="xrechnung"] .btn, html[data-thema="xrechnung"] .xr-knopf, html[data-thema="xrechnung"] .xr-reiter button,
html[data-thema="xrechnung"] .xr-reiter, html[data-thema="xrechnung"] .xr-schritt-stand, html[data-thema="xrechnung"] .xr-nr { border-radius: 2px; }
html[data-thema="xrechnung"] .job-field input, html[data-thema="xrechnung"] .job-field select,
html[data-thema="xrechnung"] .item-table input, html[data-thema="xrechnung"] .item-table select { border-radius: 2px; }
html[data-thema="xrechnung"] .site-nav a[aria-current="page"] { color: var(--er-gruen); }
.xr-warn:empty, .xr-vorschlag:empty, .xr-pruef:empty { display: none; }
.xr-warn { color: var(--warn-ink); font-weight: 600; }
.xr-vorschlag { color: var(--ink-2); }
.xr-vorschlag .xr-textknopf { font-weight: 700; color: var(--ink); min-height: 24px; padding: 0 2px; }

/* ---- Lesestoff: erklaeren statt Textwand ------------------------------- */
.xr-lesen { max-width: 1240px; margin: 0 auto; padding: 48px 24px 56px; box-sizing: border-box; }
.xr-lesen-titel { margin: 0 0 28px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.015em; color: var(--er-tinte); }
.xr-lese-block { padding: 28px 0; border-top: 1px solid var(--er-linie); }
.xr-lese-block h3 { margin: 0 0 12px; font-size: 20px; color: var(--er-tinte); }
.xr-lese-block p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--er-mut); max-width: 68ch; }
.xr-lese-leitweg { display: grid; gap: 28px; }
@media (min-width: 960px) { .xr-lese-leitweg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.xr-anatomie { margin: 0; padding: 22px; background: var(--er-flaeche); border: 1px solid var(--er-linie); }
.xr-anatomie-id { font: 700 clamp(18px, 2.6vw, 28px) ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; margin: 0 0 18px; overflow-wrap: anywhere; }
.xr-anatomie-id span { padding: 4px 2px 6px; border-bottom: 3px solid currentColor; }
.xr-anatomie-id .xa-strich { border: 0; color: var(--er-linie-2); }
.xa-grob { color: var(--er-gruen); } .xa-fein { color: var(--er-tinte); } .xa-pz { color: var(--er-warm); }
.xr-anatomie-teile { display: grid; gap: 12px; margin: 0 0 14px; }
.xr-anatomie-teile div { padding-left: 12px; }
.xr-anatomie-teile dt { font-weight: 800; font-size: 14px; }
.xr-anatomie-teile dd { margin: 2px 0 0; font-size: 14px; color: var(--er-mut); line-height: 1.5; }
.xr-anatomie figcaption { font-size: 12.5px; color: var(--er-mut); }
.xr-entscheider { width: 100%; border-collapse: collapse; font-size: 15px; }
.xr-entscheider th, .xr-entscheider td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--er-linie); }
.xr-entscheider thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--er-mut); }
.xr-entscheider tbody th { color: var(--er-tinte); width: 30%; }
.xr-entscheider td { color: var(--er-mut); }
@media (max-width: 640px) { .xr-entscheider thead { display: none; } .xr-entscheider tr { display: grid; padding: 10px 0; border-bottom: 1px solid var(--er-linie); } .xr-entscheider th, .xr-entscheider td { border: 0; padding: 2px 0; width: auto; } }
.xr-pruef-spalten { display: grid; gap: 24px; }
@media (min-width: 760px) { .xr-pruef-spalten { grid-template-columns: 1fr 1fr; } }
.xr-pruef-spalten > div { padding: 18px 20px; border: 1px solid var(--er-linie); background: var(--er-papier); }
.xr-pruef-spalten > div:first-child { background: var(--er-gruen-w); border-color: transparent; }
.xr-pruef-spalten h4 { margin: 0 0 10px; font-size: 15px; color: var(--er-tinte); }
.xr-pruef-spalten ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; color: var(--er-mut); }
.xr-lese-hinweis { margin-top: 14px !important; font-size: 14px !important; }
.xr-faq { margin-top: 8px; border-top: 1px solid var(--er-linie); padding: 0; }
.xr-faq > summary { min-height: 52px; display: flex; align-items: center; font-weight: 800; font-size: 20px; color: var(--er-tinte); cursor: pointer; }
.xr-faq h3 { font-size: 16px; margin: 16px 0 4px; color: var(--er-tinte); }
.xr-faq p { font-size: 15px; line-height: 1.6; color: var(--er-mut); margin: 0 0 8px; max-width: 72ch; }
@media print { .xr-lesen { display: none !important; } }
/* ---- Redaktion: Praxisfaelle, Spickzettel, Glossar, Leitweg-Zerleger -----
   Betreiberauftrag 2026-11-03 ("Orientierung, Gelassenheit, praktische
   Gewissheit"). Randnotizen und Monospace-Zaehler tragen die Gliederung,
   nicht Farbbalken; Flaechen nur aus den Token oben. */
.xr-randnotiz, .xr-lese-block .xr-randnotiz { margin: 0 0 6px; font: 700 12px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--er-gruen); }
.xr-zaehler, .xr-lese-block .xr-zaehler { margin: 0 0 6px; font: 700 12.5px ui-monospace, Menlo, Consolas, monospace; color: var(--er-mut); letter-spacing: .04em; }
.xr-faelle { display: grid; gap: 0; }
.xr-fall { padding: 22px 0; border-top: 1px solid var(--er-linie); display: grid; gap: 8px; max-width: 78ch; }
.xr-fall:first-of-type { border-top: 0; padding-top: 8px; }
.xr-fall h4 { margin: 0; font-size: 18px; color: var(--er-tinte); }
.xr-fall p { margin: 0 !important; }
.xr-fall-lage { font-style: italic; }
.xr-fall-klippe strong, .xr-fall-loesung strong { color: var(--er-tinte); }
.xr-vergleich { display: grid; gap: 10px; margin: 6px 0; }
@media (min-width: 640px) { .xr-vergleich { grid-template-columns: 1fr 1fr; } }
.xr-vergleich > div { padding: 12px 14px; border: 1px solid var(--er-linie); background: var(--er-papier); }
.xr-vergleich > div:last-child { background: var(--er-gruen-w); border-color: transparent; }
.xr-vergleich-titel { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--er-mut); }
.xr-vergleich > div:last-child .xr-vergleich-titel { color: var(--er-gruen); }
.xr-vergleich code { font: 13.5px/1.6 ui-monospace, Menlo, Consolas, monospace; color: var(--er-tinte); }

/* Spickzettel: Werkstatt-Tafel -- ruhige Flaeche, kraeftiger Rahmen, keine Muster, keine Verlaeufe. */
.xr-spickzettel { margin: 8px 0; padding: 24px 26px !important; border: 1.5px solid var(--er-tinte); background: var(--er-flaeche); }
.xr-spick-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .xr-spick-liste { grid-template-columns: 1fr 1fr; gap: 18px 32px; } }
.xr-spick-liste li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--er-mut); }
.xr-spick-liste .xr-zaehler { margin: 2px 0 0; font-size: 18px; color: var(--er-gruen); }
.xr-spick-liste strong { display: block; color: var(--er-tinte); }

.xr-glossar dl { display: grid; gap: 0; margin: 8px 0 0; }
@media (min-width: 900px) { .xr-glossar dl { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.xr-glossar dl > div { padding: 12px 0; border-top: 1px solid var(--er-linie); }
.xr-glossar dt { font: 700 15px ui-monospace, Menlo, Consolas, monospace; color: var(--er-tinte); }
.xr-glossar dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--er-mut); }

/* Spickzettel als Checkliste: leere Kaestchen zum Abhaken im Kopf (oder auf dem Ausdruck). */
.xr-kaestchen { width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--er-gruen); background: var(--er-papier); }
.xr-spick-liste li { grid-template-columns: 28px 1fr; }

/* Anatomie interaktiv: Teile antippen, die Erklaerung darunter hebt sich hervor. */
.xr-anatomie-id button {
  padding: 4px 2px 6px; border: 0; border-bottom: 3px solid currentColor; background: none; border-radius: 0;
  font: inherit; color: inherit; cursor: help;
}
.xr-anatomie-id button.xa-grob { color: var(--er-gruen); }
.xr-anatomie-id button.xa-fein { color: var(--er-tinte); }
.xr-anatomie-id button.xa-pz { color: var(--er-warm); }
.xr-anatomie-id button:focus-visible { outline: 3px solid var(--er-gruen); outline-offset: 2px; }
.xr-anatomie-id button[aria-pressed="true"] { background: var(--er-papier); }
.xr-anatomie-teile > div { padding: 8px 12px; border: 1px solid transparent; transition: background-color 140ms, border-color 140ms; }
.xr-anatomie[data-aktiv="grob"] .xr-anatomie-teile [data-teil="grob"],
.xr-anatomie[data-aktiv="fein"] .xr-anatomie-teile [data-teil="fein"],
.xr-anatomie[data-aktiv="pz"] .xr-anatomie-teile [data-teil="pz"] { background: var(--er-papier); border-color: var(--er-linie); }
@media (prefers-reduced-motion: reduce) { .xr-anatomie-teile > div { transition: none; } }

/* Portal-Radar */
.xr-radar-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 14px; }
.xr-radar-wahl label { font-weight: 700; font-size: 14px; color: var(--er-tinte); }
.xr-radar-wahl select { min-height: 44px; min-width: 260px; padding: 8px 12px; border: 1.5px solid var(--er-tinte); border-radius: 2px; background: var(--er-papier); font: inherit; font-size: 15px; }
.xr-radar-karte { border: 1.5px solid var(--er-tinte); background: var(--er-papier); }
.xr-radar-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; background: var(--er-gruen-w); border-bottom: 1px solid var(--er-linie); }
.xr-radar-kopf strong { font-size: 18px; color: var(--er-tinte); }
.xr-radar-kopf .xr-zaehler { margin: 0; color: var(--er-gruen); }
.xr-radar-kopf .xr-radar-auto { font-size: 13px; color: var(--er-gruen); font-weight: 700; }
.xr-radar-felder { display: grid; gap: 0; margin: 0; }
@media (min-width: 760px) { .xr-radar-felder { grid-template-columns: repeat(3, 1fr); } }
.xr-radar-felder > div { padding: 14px 18px; border-top: 1px solid var(--er-linie); }
@media (min-width: 760px) { .xr-radar-felder > div { border-top: 0; border-left: 1px solid var(--er-linie); } .xr-radar-felder > div:first-child { border-left: 0; } }
.xr-radar-felder dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--er-mut); }
.xr-radar-felder dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--er-tinte); }
.xr-radar-felder dd ul { margin: 0; padding-left: 18px; }
.xr-radar-offen { color: var(--warn-ink); font-weight: 600; }
.xr-radar-fuss { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--er-linie); font-size: 14px; color: var(--er-mut); }
.xr-radar-fuss a { color: var(--er-tinte); font-weight: 700; }
.xr-radar-hinweis { margin-top: 12px !important; font-size: 13.5px !important; }

/* ---- Empfaenger-Umschalter (2026-11-03): Behoerde / Unternehmen ----------
   Zwei echte Radio-Knoepfe als Segmente -- Tastatur (Pfeiltasten), Screenreader
   und Formular-Reset kommen vom Browser. Kanten 2 px, keine Pille. */
.xr-modus-wahl { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.xr-modus-wahl legend { padding: 0; margin: 0 0 6px; font-weight: 700; font-size: 14px; color: var(--er-tinte); }
.xr-modus-optionen { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); box-sizing: border-box; width: 100%; border: 1.5px solid var(--er-tinte); border-radius: 2px; max-width: 460px; }
.xr-modus-optionen input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.xr-modus-optionen label {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; min-width: 0; min-height: 44px; padding: 8px 10px; box-sizing: border-box; white-space: normal;
  font-weight: 700; font-size: 15px; color: var(--er-tinte); background: var(--er-papier); cursor: pointer; text-align: center;
}
.xr-modus-optionen label + input + label { border-left: 1.5px solid var(--er-tinte); }
.xr-modus-optionen label span { font-weight: 500; color: var(--er-mut); }
.xr-modus-optionen input:checked + label { background: var(--er-tinte); color: var(--er-papier); }
.xr-modus-optionen input:checked + label span { color: inherit; }
.xr-modus-optionen input:focus-visible + label { outline: 3px solid var(--er-gruen); outline-offset: 2px; position: relative; z-index: 1; }
.xr-modus-wahl .field-hint { margin-top: 6px; }

/* ---- Anhaenge (BG-24, 2026-11-03) ---------------------------------------- */
.xr-anhaenge { margin: 18px 0 6px; padding: 14px 16px; border: 1.5px dashed var(--er-linie-2); border-radius: 2px; background: var(--er-papier); }
.xr-anhaenge[data-ziel="ja"] { border-style: solid; border-color: var(--er-gruen); background: var(--er-gruen-w); }
.xr-anhaenge h3 { margin: 0 0 4px; font-size: 15px; color: var(--er-tinte); }
.xr-anhang-wahl { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.xr-anhang-wahl input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.xr-anhang-wahl input[type="file"]:focus-visible + label { outline: 3px solid var(--er-gruen); outline-offset: 2px; }
.xr-anhang-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.xr-anhang { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--er-linie); border-radius: 2px; background: var(--er-flaeche); min-width: 0; }
.xr-anhang-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xr-anhang-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 700; color: var(--er-tinte); }
.xr-anhang-art { flex: none; font: 600 12.5px ui-monospace, Menlo, Consolas, monospace; color: var(--er-mut); }
.xr-anhang-weg { flex: none; min-width: 44px; min-height: 44px; border: 1px solid var(--er-linie); border-radius: 2px; background: var(--er-papier); color: var(--er-tinte); font-size: 20px; cursor: pointer; }
.xr-anhang-weg:focus-visible, .xr-anhang-text:focus-visible { outline: 3px solid var(--er-gruen); outline-offset: 1px; }
.xr-anhang-text { width: 100%; box-sizing: border-box; min-height: 40px; }
#xrAnhangStatus[data-stand="fehler"] { color: var(--warn-ink); }
#xrAnhangStatus[data-stand="warn"] { color: var(--c-zeit-s); }
/* Absprung aus „Rechnung erstellen“: der Einfuegen-Knopf ist der naechste Schritt. */
.xr-k[data-betont="ja"] { border-color: var(--er-gruen); background: var(--er-gruen-w); text-decoration: none; }