/* =============================================================================
   xrechnung-tools — Theme 10_xrechnung
   Werte kommen aus tokens.css (Quelle: xrechnung-tools-cd). Hier stehen nur
   Rollen und Komponenten. Klassennamen wie im CD-Handbuch.
   ============================================================================= */

/* --- Grundgerüst ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--text-body-lh);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
:focus-visible{outline:var(--rule-strong) solid var(--focus);outline-offset:2px;border-radius:var(--radius)}
.skip-link{position:absolute;left:-999px;top:var(--space-2);background:var(--xr-blue);color:var(--xr-white);padding:var(--space-2) var(--space-3);border-radius:var(--radius);z-index:100}
.skip-link:focus{left:var(--space-2)}
h1,h2,h3,h4{margin:0;font-weight:var(--weight-semibold);letter-spacing:-.01em;overflow-wrap:anywhere}
h1{font-size:var(--text-display);line-height:var(--text-display-lh);letter-spacing:-.02em}
h2{font-size:var(--text-h2);line-height:var(--text-h2-lh)}
h3{font-size:var(--text-h3);line-height:var(--text-h3-lh)}
h4{font-size:var(--text-body)}
p{margin:0 0 var(--space-3)}
ul,ol{margin:0 0 var(--space-3);padding-left:1.25em}
li{margin-bottom:var(--space-1)}
hr{border:0;border-top:var(--rule) solid var(--border);margin:var(--space-6) 0}
code,kbd,pre{font-family:var(--font-mono);font-size:var(--text-mono);line-height:var(--text-mono-lh)}
code{background:var(--surface-muted);padding:.05em .35em;border-radius:var(--radius);font-size:.9em}
pre{margin:0;overflow:auto}
pre code{background:none;padding:0;font-size:var(--text-mono)}
table{border-collapse:collapse;width:100%;font-size:var(--text-small);line-height:var(--text-small-lh);font-variant-numeric:tabular-nums}
th,td{text-align:left;vertical-align:top;padding:var(--space-2) var(--space-3);border-bottom:var(--rule) solid var(--border)}
th{font-weight:var(--weight-semibold);border-bottom:var(--rule-strong) solid var(--border-strong)}
td.num,th.num{text-align:right;font-family:var(--font-mono)}
.tablewrap{overflow-x:auto;max-width:100%}
blockquote{margin:0 0 var(--space-3);padding-left:var(--space-3);border-left:var(--rule-status) solid var(--accent)}
.small{font-size:var(--text-small);line-height:var(--text-small-lh)}
.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-size:var(--text-mono)}
.topline{font-size:var(--text-topline);letter-spacing:var(--text-topline-ls);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--accent-text);margin:0 0 var(--space-2)}
.lead{font-size:var(--text-lead);line-height:var(--text-lead-lh)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Container, Sektionen ----------------------------------------------- */
.container{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 var(--page-margin)}
.container--narrow{max-width:calc(var(--measure) + 2 * var(--page-margin))}
.section{padding:var(--section-gap) 0}
.section--default{background:transparent}
.section--muted{background:var(--surface-muted)}
.section--inverse{background:var(--surface-inverse);color:var(--text-on-inverse)}
.section--inverse a{color:var(--xr-on-inverse-link)}
.section--inverse .topline{color:var(--xr-on-inverse-copper)}
.section + .section--default{padding-top:0}
.prose{max-width:var(--measure)}
.prose h2{margin-top:var(--space-6);margin-bottom:var(--space-3)}
.prose h3{margin-top:var(--space-5);margin-bottom:var(--space-2)}
.prose > :first-child{margin-top:0}
.prose .lead{margin-bottom:var(--space-4)}
.prose figure{margin:var(--space-4) 0}
.prose .callout{margin:var(--space-4) 0}
.prose address{font-style:normal;margin:0 0 var(--space-4)}
.prose .definitions{margin:var(--space-3) 0 var(--space-4)}
.prose .definitions dt{font-weight:var(--weight-semibold);margin-top:var(--space-3)}
.prose .definitions dd{margin:var(--space-1) 0 0}
.optout__label{display:flex;gap:var(--space-2);align-items:flex-start;cursor:pointer}
.optout__input{width:20px;height:20px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--xr-blue-deep)}
.optout__input:disabled{cursor:not-allowed}
.optout__input:disabled + *{color:var(--text-muted)}
.optout__label:has(.optout__input:disabled){cursor:not-allowed}
.optout__status{margin-top:var(--space-1)}
.grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gap)}
@media (min-width:640px){.grid--cols-2,.grid--cols-3,.grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.grid--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stack > * + *{margin-top:var(--block-gap)}

/* --- Wortmarke ---------------------------------------------------------- */
.wordmark{font-family:var(--font-mono);font-weight:var(--weight-semibold);font-size:20px;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:var(--text);display:inline-flex;align-items:baseline}
.wordmark__hy{color:var(--accent)}
.wordmark__cur{display:inline-block;width:.55em;height:.17em;background:var(--accent);margin-left:.12em;transform:translateY(-.02em)}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--text)}
.brand:hover{color:var(--text)}
.brand__mark{flex:none;border-radius:var(--radius-mark)}

/* --- Kopfzeile ---------------------------------------------------------- */
.site-header{border-bottom:var(--rule) solid var(--border);background:var(--surface);position:relative;z-index:10}
.site-header__inner{display:flex;align-items:center;gap:var(--space-4);padding-top:var(--space-3);padding-bottom:var(--space-3);flex-wrap:wrap}
.main-nav{display:flex;gap:var(--space-4);margin-left:auto;font-weight:var(--weight-semibold)}
.main-nav__link{text-decoration:none;color:var(--text);padding:6px 0;border-bottom:var(--rule-strong) solid transparent;transition:border-color var(--dur-control) var(--ease),color var(--dur-control) var(--ease)}
.main-nav__link:hover,.main-nav__link.is-current{border-color:var(--accent);color:var(--text)}
.nav-toggle{display:none;margin-left:auto;background:none;border:var(--rule-strong) solid var(--text);border-radius:var(--radius);padding:6px 10px;font:600 var(--text-small)/1 var(--font-sans);color:var(--text);align-items:center;gap:var(--space-2);cursor:pointer}
@media (max-width:959px){
  .nav-toggle{display:inline-flex}
  .main-nav{display:none;width:100%;flex-direction:column;gap:0;margin:0;border-top:var(--rule) solid var(--border);padding-top:var(--space-2)}
  .main-nav.is-open{display:flex}
  .main-nav__link{padding:var(--space-2) 0;border-bottom:var(--rule) solid var(--border)}
  .main-nav__link.is-current{border-left:var(--rule-status) solid var(--accent);padding-left:var(--space-2);border-bottom-color:var(--border)}
}

/* --- Fußzeile ----------------------------------------------------------- */
.site-footer{background:var(--surface-inverse);color:var(--text-on-inverse);margin-top:var(--section-gap);padding:var(--space-6) 0 var(--space-4)}
.site-footer a{color:var(--xr-on-inverse-link)}
.site-footer .wordmark{color:var(--text-on-inverse)}
.site-footer .wordmark__hy{color:var(--xr-on-inverse-copper)}
.site-footer .wordmark__cur{background:var(--xr-on-inverse-copper)}
.site-footer__inner{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:960px){.site-footer__inner{grid-template-columns:1.2fr 1fr}}
.site-footer__claim{max-width:36rem;color:var(--xr-on-inverse-muted);margin:var(--space-3) 0 0}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-weight:var(--weight-semibold);align-content:start}
.site-footer__nav a{text-decoration:none}
.site-footer__nav a:hover{text-decoration:underline}
.site-footer__bar{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-small);color:var(--xr-on-inverse-muted);border-top:1px solid rgba(250,247,242,.15);margin-top:var(--space-5);padding-top:var(--space-3)}

/* --- Seiten-Intro, Brotkrume, Stand ------------------------------------ */
.page-intro{margin-bottom:var(--space-5);max-width:var(--measure)}
.page-intro__title{margin-bottom:var(--space-3)}
.page-intro__lead{font-size:var(--text-lead);line-height:var(--text-lead-lh);margin-bottom:var(--space-3)}
.page-intro__meta{font-size:var(--text-small);color:var(--text-muted);margin:0}
.page-intro--wide{max-width:none}
.breadcrumb{font-size:var(--text-small);color:var(--text-muted);margin-bottom:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-1)}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb__sep{opacity:.6}
.stand{margin-top:var(--space-4)}
.related{margin-top:var(--space-4)}

/* --- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:var(--weight-semibold) var(--text-body)/1.2 var(--font-sans);padding:12px 20px;min-height:44px;border-radius:var(--radius);border:var(--rule-strong) solid transparent;cursor:pointer;text-decoration:none;transition:background-color var(--dur-control) var(--ease),color var(--dur-control) var(--ease),border-color var(--dur-control) var(--ease)}
.btn--primary{background:var(--xr-blue);color:var(--xr-white);border-color:var(--xr-blue)}
.btn--primary:hover{background:var(--xr-blue-deep);border-color:var(--xr-blue-deep);color:var(--xr-white)}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--text)}
.btn--secondary:hover{background:var(--text);color:var(--surface)}
.btn--quiet{background:transparent;color:var(--link);border-color:transparent;padding-left:4px;padding-right:4px;text-decoration:underline;text-underline-offset:.2em}
.btn--quiet:hover{color:var(--link-hover)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn--sm{font-size:var(--text-small);padding:8px 14px;min-height:36px}
.section--inverse .btn--primary{background:var(--xr-paper);color:var(--xr-ink);border-color:var(--xr-paper)}
.section--inverse .btn--secondary{color:var(--xr-paper);border-color:var(--xr-paper)}
.section--inverse .btn--secondary:hover{background:var(--xr-paper);color:var(--xr-ink)}
.section--inverse :focus-visible{outline-color:var(--xr-paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}

/* --- Karten ------------------------------------------------------------- */
.card{border:var(--rule) solid var(--border);border-radius:var(--radius);padding:var(--space-4);background:var(--surface-inner);display:flex;flex-direction:column;gap:var(--space-2);transition:border-color var(--dur-control) var(--ease);position:relative}
.card:hover{border-color:var(--text)}
.card__topline{margin:0}
.card__title{font-size:var(--text-h3);line-height:1.3}
.card__link{text-decoration:none;color:var(--text)}
.card__link::after{content:"";position:absolute;inset:0}
.card:hover .card__link{color:var(--link)}
.card__body p{margin:0}
.card__more{margin:auto 0 0;padding-top:var(--space-2);font-size:var(--text-small);color:var(--link)}

/* --- Hinweiskasten ------------------------------------------------------ */
.callout{border-left:var(--rule-status) solid var(--xr-blue);background:var(--xr-info-bg);padding:var(--space-3) var(--space-4);border-radius:var(--radius);max-width:var(--measure)}
.callout--warn{border-color:var(--xr-warn);background:var(--xr-warn-bg)}
.callout--ok{border-color:var(--xr-ok);background:var(--xr-ok-bg)}
.callout--legal{border-color:var(--xr-muted);background:var(--surface-muted);font-size:var(--text-small);line-height:var(--text-small-lh)}
.callout__title{font-weight:var(--weight-semibold);margin:0 0 var(--space-1)}
.callout__body > :last-child{margin-bottom:0}

/* --- Ablagefläche ------------------------------------------------------- */
.dropzone{border:var(--rule-strong) dashed var(--xr-blue);border-radius:var(--radius);background:var(--surface-inner);padding:var(--space-6) var(--space-4);text-align:center;transition:background-color var(--dur-control) var(--ease),border-color var(--dur-control) var(--ease)}
.dropzone:hover,.dropzone.is-over,.dropzone:focus-within{background:var(--xr-info-bg);border-style:solid}
.dropzone__title{font-size:var(--text-h3);margin:0 0 var(--space-2)}
.dropzone__hint{color:var(--text-muted);margin:0 0 var(--space-3)}
.dropzone__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dropzone__button{position:relative}
.dropzone__button:has(.dropzone__input:focus-visible){outline:var(--rule-strong) solid var(--focus);outline-offset:2px}
.dropzone__privacy{display:inline-flex;gap:var(--space-2);align-items:center;font-size:var(--text-small);color:var(--xr-ok);font-weight:var(--weight-semibold);margin:var(--space-3) 0 0}
.dropzone__noscript{margin:var(--space-3) 0 0;color:var(--xr-err)}

/* --- Urteil, Fundstelle ------------------------------------------------- */
.verdict{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius);border-left:var(--rule-status) solid;margin-bottom:var(--space-3)}
.verdict__icon{flex:none;width:24px;height:24px;margin-top:4px}
.verdict__title{font-size:var(--text-h3);line-height:1.3;font-weight:var(--weight-semibold);margin:0}
.verdict__meta{font-size:var(--text-small);color:var(--text-muted);margin:var(--space-1) 0 0}
.verdict--ok{background:var(--xr-ok-bg);border-color:var(--xr-ok)}.verdict--ok .verdict__icon{color:var(--xr-ok)}
.verdict--warn{background:var(--xr-warn-bg);border-color:var(--xr-warn)}.verdict--warn .verdict__icon{color:var(--xr-warn)}
.verdict--err{background:var(--xr-err-bg);border-color:var(--xr-err)}.verdict--err .verdict__icon{color:var(--xr-err)}
.verdict--info{background:var(--xr-info-bg);border-color:var(--xr-blue)}.verdict--info .verdict__icon{color:var(--xr-blue)}
.finding{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-3);padding:var(--space-3) 0;border-bottom:var(--rule) solid var(--border)}
.finding__code{font:var(--weight-semibold) var(--text-small)/1.4 var(--font-mono);padding:2px 6px;border-radius:var(--radius);height:fit-content;white-space:nowrap}
.finding--err .finding__code{background:var(--xr-err-bg);color:var(--xr-err)}
.finding--warn .finding__code{background:var(--xr-warn-bg);color:var(--xr-warn)}
.finding--info .finding__code{background:var(--xr-info-bg);color:var(--xr-blue-deep)}
.finding__say p{margin:0}
.finding__rule{font-size:var(--text-small);color:var(--text-muted);font-family:var(--font-mono);margin:var(--space-1) 0 0}
.finding__links{font-size:var(--text-small);margin:var(--space-1) 0 0}
.finding__links a{margin-right:var(--space-3)}

/* --- Feldtabelle -------------------------------------------------------- */
.field-table td:first-child{font-family:var(--font-mono);white-space:nowrap;color:var(--text-muted)}
.field-table td:nth-child(3){font-family:var(--font-mono)}
.field-table .is-missing{color:var(--xr-err);font-weight:var(--weight-semibold)}

/* --- XML-/Codeblock ----------------------------------------------------- */
.code-block{background:var(--surface-inverse);color:var(--text-on-inverse);border-radius:var(--radius);overflow:hidden;margin:0;display:flex;flex-direction:column;max-height:90dvh}
.code-block__bar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);font:var(--weight-semibold) 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--xr-on-inverse-muted);border-bottom:1px solid rgba(250,247,242,.12)}
.code-block__pre{padding:var(--space-3);overflow:auto;font-size:var(--text-mono);line-height:var(--text-mono-lh);tab-size:2}
.code-block .ln{display:inline-block;width:3ch;text-align:right;margin-right:1.5ch;color:var(--xr-on-inverse-muted);user-select:none}
.code-block .tok-tag{color:var(--xr-on-inverse-link)}.code-block .tok-attr{color:var(--xr-on-inverse-copper)}.code-block .tok-val{color:var(--xr-paper)}.code-block .tok-com{color:var(--xr-on-inverse-muted);font-style:italic}
.code-block .hl{background:rgba(201,105,42,.22);display:inline-block;width:100%}
.code-block--light{background:var(--surface-muted);color:var(--text)}
.code-block--light .code-block__bar{color:var(--text-muted);border-color:var(--border)}
.code-block--light .tok-tag{color:var(--xr-blue-deep)}.code-block--light .tok-attr{color:var(--xr-copper-deep)}.code-block--light .tok-val{color:var(--text)}.code-block--light .ln{color:var(--text-muted)}

/* --- FAQ ---------------------------------------------------------------- */
.faq{border-top:var(--rule) solid var(--border);max-width:var(--measure)}
.faq__item{border-bottom:var(--rule) solid var(--border)}
.faq__summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;font-weight:var(--weight-semibold);font-size:var(--text-body)}
.faq__summary::-webkit-details-marker{display:none}
.faq__summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);flex:none;transition:transform var(--dur-control) var(--ease)}
.faq__item[open] .faq__summary::after{transform:rotate(45deg)}
.faq__answer{padding:0 0 var(--space-3);max-width:var(--measure)}
.faq__answer > :last-child{margin-bottom:0}
.faq-group{margin-top:var(--space-6)}
.faq-group:first-of-type{margin-top:0}
.faq-group h2{margin-bottom:var(--space-3)}

/* --- Fristen ------------------------------------------------------------ */
.deadline{border:var(--rule) solid var(--border);border-radius:var(--radius);background:var(--surface-inner);max-width:var(--measure)}
.deadline__row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--rule) solid var(--border);align-items:baseline}
.deadline__row:last-child{border-bottom:0}
.deadline__when{font:var(--weight-semibold) var(--text-body)/1.3 var(--font-mono)}
.deadline__row.is-past .deadline__when{color:var(--text-muted)}
.deadline__row.is-past .deadline__when::after{content:" ✓";color:var(--xr-ok)}
.deadline__row.is-next{background:var(--xr-info-bg)}
.deadline__row.is-next .deadline__when{color:var(--xr-blue-deep)}
.deadline__stand{margin-top:var(--space-2)}
@media (max-width:639px){.deadline__row{grid-template-columns:1fr;gap:var(--space-1)}}

/* --- Glossar-Liste, Artikel-Liste --------------------------------------- */
.term-list{list-style:none;padding:0;margin:0;max-width:var(--measure)}
.term-list li{border-bottom:var(--rule) solid var(--border);padding:var(--space-3) 0;margin:0}
.term-list a{font-weight:var(--weight-semibold);text-decoration:none}
.term-list a:hover{text-decoration:underline}
.term-list p{margin:var(--space-1) 0 0;color:var(--text-muted);font-size:var(--text-small)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);font-size:var(--text-small);color:var(--text-muted);margin:0 0 var(--space-4)}

/* --- Werkzeug-Ansichten (Viewer) ---------------------------------------- */
.tool-result{margin-top:var(--space-5)}
.tool-result[hidden]{display:none}
.tabs{display:flex;gap:var(--space-2);border-bottom:var(--rule) solid var(--border);margin-bottom:var(--space-4);flex-wrap:wrap}
.tabs__tab{background:none;border:0;border-bottom:var(--rule-strong) solid transparent;padding:var(--space-2) var(--space-3);font:var(--weight-semibold) var(--text-body)/1.2 var(--font-sans);color:var(--text-muted);cursor:pointer;margin-bottom:-1px}
.tabs__tab[aria-selected="true"]{color:var(--text);border-color:var(--accent)}
.tabs__tab:hover{color:var(--text)}
.panel[hidden]{display:none}
.kv{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2) var(--space-4);margin:0 0 var(--space-4)}
@media (min-width:640px){.kv{grid-template-columns:auto minmax(0,1fr)}}
.kv dt{font-size:var(--text-small);color:var(--text-muted);margin:0}
.kv dd{margin:0;font-family:var(--font-mono);font-size:var(--text-mono);overflow-wrap:anywhere}

/* --- Startseite --------------------------------------------------------- */
.hero{padding:var(--section-gap) 0 var(--space-6)}
.hero__title{max-width:20ch;margin-bottom:var(--space-3)}
.hero__lead{font-size:var(--text-lead);line-height:var(--text-lead-lh);max-width:var(--measure);margin-bottom:var(--space-5)}
.hero .dropzone{max-width:var(--measure)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0ms!important;animation:none!important}}
@media print{.site-header,.site-footer,.nav-toggle,.dropzone,.tabs,.tool-bar{display:none!important}.section{padding:0}}

/* FAQ-Gruppen ohne Frage ausblenden (Themenliste kommt aus variables.php) */
.faq-group:not(:has(.faq__item)){display:none}

/* Kopfzeile schmal: Wortmarke und Menü in einer Zeile halten */
@media (max-width:639px){.site-header .wordmark{font-size:17px}.site-header__inner{gap:var(--space-2)}.brand__mark{width:28px;height:28px}}

/* --- Formulare (Generator) --------------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.field__label{font-size:var(--text-small);line-height:var(--text-small-lh);font-weight:var(--weight-semibold)}
.field__label .bt{font-family:var(--font-mono);font-weight:var(--weight-regular);font-size:12px;color:var(--text-muted);margin-left:2px}
.field__input{width:100%;min-height:44px;padding:8px 12px;border:var(--rule) solid var(--border);border-radius:var(--radius);background:var(--surface-inner);color:var(--text);font:var(--weight-regular) var(--text-body)/1.4 var(--font-sans);transition:border-color var(--dur-control) var(--ease)}
.field__input:hover{border-color:var(--text-muted)}
.field__input:focus{border-color:var(--focus);outline:var(--rule-strong) solid var(--focus);outline-offset:0}
.field__input--mono{font-family:var(--font-mono);font-size:var(--text-mono)}
select.field__input{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
textarea.field__input{min-height:88px;resize:vertical;line-height:1.5}
.field__output{display:flex;align-items:center;min-height:44px;padding:8px 12px;border:var(--rule) solid transparent;border-radius:var(--radius);background:var(--surface-muted);font-family:var(--font-mono);font-size:var(--text-mono);justify-content:flex-end;font-variant-numeric:tabular-nums}
.field__hint{font-size:var(--text-small);color:var(--text-muted);margin:0}
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media (min-width:640px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid .span-2{grid-column:span 2}}
.form-group{border:0;padding:0;margin:0 0 var(--space-5);min-width:0}
.form-group__title{font-size:var(--text-h3);line-height:var(--text-h3-lh);font-weight:var(--weight-semibold);padding:0;margin:0 0 var(--space-1)}
.form-group__lead{color:var(--text-muted);font-size:var(--text-small);margin:0 0 var(--space-3)}
.form-group[hidden],.form-grid > [hidden]{display:none}

.generator{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.generator__form{min-width:0}
.generator__result .verdict{max-width:var(--measure)}
.generator .code-block{max-height:none}
.generator .code-block__pre{max-height:70dvh}

/* Ausklappbereiche */
.disclosure{border:var(--rule) solid var(--border);border-radius:var(--radius);background:var(--surface-inner)}
.disclosure__summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4)}
.disclosure__summary::-webkit-details-marker{display:none}
.disclosure__summary::before{content:"";flex:none;width:10px;height:10px;border-right:var(--rule-strong) solid var(--accent);border-bottom:var(--rule-strong) solid var(--accent);transform:rotate(-45deg);transition:transform var(--dur-control) var(--ease);margin-left:2px}
.disclosure[open] .disclosure__summary::before{transform:rotate(45deg)}
.disclosure__summary:hover{background:var(--surface-muted)}
.disclosure__title{font-weight:var(--weight-semibold);font-size:var(--text-h3);line-height:1.3}
.disclosure__hint{font-size:var(--text-small);color:var(--text-muted);line-height:var(--text-small-lh)}
@media (max-width:639px){.disclosure__summary{flex-wrap:wrap;gap:var(--space-1) var(--space-3)}.disclosure__hint{flex-basis:100%;padding-left:calc(10px + var(--space-3) + 2px)}}
.disclosure[open] .disclosure__summary{border-bottom:var(--rule) solid var(--border)}
.disclosure__body{padding:var(--space-4)}
.disclosure__body .form-group:last-child{margin-bottom:0}
.disclosure__body .code-block{margin:0}

.preset-list{display:grid;grid-template-columns:1fr;gap:var(--space-2);margin:0}
@media (min-width:640px){.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.preset-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.preset{display:flex;flex-direction:column;gap:2px;text-align:left;padding:var(--space-2) var(--space-3);border:var(--rule) solid var(--border);border-radius:var(--radius);background:var(--surface-inner);color:var(--text);font:inherit;cursor:pointer;transition:border-color var(--dur-control) var(--ease),background-color var(--dur-control) var(--ease)}
.preset:hover{border-color:var(--text)}
.preset[aria-pressed="true"]{border-color:var(--xr-blue);background:var(--xr-info-bg);box-shadow:inset 0 0 0 1px var(--xr-blue)}
.preset__label{font-weight:var(--weight-semibold);font-size:var(--text-small);line-height:1.35}
.preset__hint{font-size:12px;line-height:1.4;color:var(--text-muted)}

.lines{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-3);container-type:inline-size}
.line{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 28px);border:var(--rule) solid var(--border);border-radius:var(--radius);background:var(--surface-inner)}
.line__no{position:absolute;left:0;top:0;width:28px;height:100%;display:flex;justify-content:center;padding-top:var(--space-3);font:var(--weight-semibold) 12px/1 var(--font-mono);color:var(--text-muted);border-right:var(--rule) solid var(--border);background:var(--surface-muted);border-radius:var(--radius) 0 0 var(--radius)}
.line__name,.line__desc{grid-column:1/-1}
.line__desc-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-2)}
.line__actions{grid-column:1/-1;display:flex;justify-content:flex-end}
@container (min-width:760px){
  .line{grid-template-columns:minmax(160px,2.4fr) 90px 150px 130px 170px 120px}
  .line__name{grid-column:1/2}.line__desc{grid-column:1/6}
  .line__actions{grid-column:6/7;align-items:end;justify-content:flex-end}
  .line__desc-row{grid-template-columns:minmax(0,1fr) 160px}
}
.lines-foot{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between}

.totals{display:flex;flex-direction:column;margin:var(--space-4) 0 0;border:var(--rule) solid var(--border);border-radius:var(--radius);background:var(--surface-inner);max-width:var(--measure)}
.totals__row{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-bottom:var(--rule) solid var(--border);font-size:var(--text-small)}
.totals__row:last-child{border-bottom:0}
.totals__row dt{margin:0;color:var(--text-muted)}
.totals__row dd{margin:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.totals__row--sum{font-size:var(--text-body);background:var(--surface-muted)}
.totals__row--sum dt{color:var(--text);font-weight:var(--weight-semibold)}
.totals__row--sum dd{font-weight:var(--weight-semibold)}

.hints{margin:0 0 var(--space-4)}
.hints[hidden]{display:none}
.hints__title{font-size:var(--text-small);color:var(--text-muted);margin:0 0 var(--space-1)}
.hints .finding{padding:var(--space-2) 0}

.privacy-note{display:inline-flex;gap:var(--space-2);align-items:center;font-size:var(--text-small);color:var(--xr-ok);font-weight:var(--weight-semibold);margin:0 0 var(--space-4)}
.gen-actions{margin-bottom:var(--space-3)}

/* --- Werkzeugleiste über den Ansichten ---------------------------------- */
.tool-bar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;border-bottom:var(--rule) solid var(--border);margin-bottom:var(--space-4)}
.tool-bar .tabs{margin-bottom:0;border-bottom:0}
.tool-bar__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-bottom:var(--space-2)}
.tool-views[hidden],.tool-error[hidden]{display:none}
.tool-error{max-width:var(--measure)}
.tool-error > p:first-child{margin-top:0}
.findings{border-top:var(--rule) solid var(--border);margin:var(--space-3) 0 var(--space-4)}
.field--filter{max-width:26rem;margin-bottom:var(--space-3)}
.field-table__group th{background:var(--surface-muted);font:var(--weight-semibold) var(--text-small)/1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.field-table tr[hidden]{display:none}

/* --- Rechnungsblatt (DIN A4) -------------------------------------------- */
/* Das Blatt ist immer 210 mm breit; für schmale Bildschirme rechnet viewer.js
   einen Maßstab in --sheet-scale und setzt die Höhe des Rahmens danach. */
.sheet-viewport{position:relative;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;background:var(--surface-muted);border:var(--rule) solid var(--border);border-radius:var(--radius)}
.sheet{flex:none;width:210mm;min-height:297mm;box-sizing:border-box;padding:16mm 20mm 14mm;background:#fff;color:var(--xr-ink);font-family:var(--font-sans);font-size:10.5pt;line-height:1.45;transform-origin:top center;transform:scale(var(--sheet-scale,1));box-shadow:0 1px 4px rgba(30,42,56,.16)}
.sheet p{margin:0}
.sheet__head{display:flex;justify-content:flex-end;min-height:20mm}
.sheet__seller{text-align:right;font-size:9pt;line-height:1.35;color:var(--xr-muted)}
.sheet__party-name{font-weight:var(--weight-semibold);color:var(--xr-ink)}
.sheet__cols{display:grid;grid-template-columns:85mm minmax(0,1fr);gap:10mm;margin-top:4mm}
.sheet__return{font-size:7pt;color:var(--xr-muted);border-bottom:.3pt solid var(--xr-rule);padding-bottom:1mm;margin-bottom:4mm}
.sheet__buyer{font-size:11pt;line-height:1.4}
.sheet__delivery{margin-top:5mm;font-size:9pt;color:var(--xr-muted)}
.sheet__label{font-weight:var(--weight-semibold);font-size:7.5pt;letter-spacing:.06em;text-transform:uppercase}
.sheet__meta{display:grid;align-content:start;gap:.8mm;margin:0;font-size:9pt}
.sheet__meta-row{display:flex;justify-content:space-between;gap:4mm}
.sheet__meta-row dt{color:var(--xr-muted)}
.sheet__meta-row dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.sheet__title{font-size:16pt;line-height:1.2;margin:10mm 0 4mm}
.sheet__notes{font-size:9.5pt;margin-bottom:5mm}
.sheet__notes p + p{margin-top:1.5mm}
.sheet__lines{width:100%;border-collapse:collapse;font-size:9.5pt;margin-top:2mm}
.sheet__lines th{text-align:left;font-size:8pt;font-weight:var(--weight-semibold);color:var(--xr-muted);border-bottom:.6pt solid var(--xr-ink);padding:0 0 1.2mm}
.sheet__lines td{padding:2mm 0;border-bottom:.3pt solid var(--xr-rule);vertical-align:top}
.sheet__lines td + td,.sheet__lines th + th{padding-left:3mm}
.sheet__lines .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet__pos{color:var(--xr-muted)}
.sheet__item{display:block;font-weight:var(--weight-semibold)}
.sheet__item-sub{display:block;font-size:8pt;color:var(--xr-muted);margin-top:.8mm}
.sheet__line-extra,.sheet__per{font-size:8pt;color:var(--xr-muted)}
.sheet__totals{display:flex;justify-content:flex-end;margin-top:5mm}
.sheet__sums{width:100mm;margin:0;font-size:9.5pt}
.sheet__sum-row{display:flex;justify-content:space-between;gap:4mm;padding:.9mm 0}
.sheet__sum-row dt{color:var(--xr-muted)}
.sheet__sum-row dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet__sum-row--line{border-top:.3pt solid var(--xr-rule);margin-top:1mm;padding-top:1.6mm}
.sheet__sum-row--total{border-top:.6pt solid var(--xr-ink);margin-top:1mm;padding-top:1.6mm;font-size:11.5pt;font-weight:var(--weight-semibold)}
.sheet__sum-row--total dt{color:var(--xr-ink)}
.sheet__vat{width:100%;border-collapse:collapse;margin-top:8mm;font-size:8.5pt}
.sheet__vat caption{text-align:left;font-size:9.5pt;font-weight:var(--weight-semibold);margin-bottom:1.5mm}
.sheet__vat th{text-align:left;font-weight:var(--weight-semibold);color:var(--xr-muted);border-bottom:.3pt solid var(--xr-rule);padding:0 3mm 1mm 0}
.sheet__vat td{padding:1mm 3mm 1mm 0;border-bottom:.3pt solid var(--xr-rule)}
.sheet__vat .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet__pay,.sheet__attachments{margin-top:8mm;font-size:9pt}
.sheet__pay h2,.sheet__attachments h2{font-size:10pt;line-height:1.3;margin:0 0 2mm}
.sheet__terms{margin-bottom:2.5mm}
.sheet__pay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1mm 8mm;margin:0}
.sheet__pay-grid > div{display:flex;gap:3mm}
.sheet__pay-grid dt{color:var(--xr-muted);min-width:30mm}
.sheet__pay-grid dd{margin:0;overflow-wrap:anywhere}
.sheet__attachments ul{margin:0;padding-left:5mm}
.sheet__hint{color:var(--xr-muted)}
.sheet__foot{margin-top:10mm;padding-top:2.5mm;border-top:.3pt solid var(--xr-rule);font-size:7.5pt;line-height:1.4;color:var(--xr-muted)}
.sheet__origin{margin-top:1mm}
.sheet-note{margin-top:var(--space-3)}

/* Drucken: nur das Blatt, auf der ganzen Seite. Die Klasse setzt viewer.js,
   sobald eine Rechnung dargestellt wird — sonst drucken Artikel normal. */
@media print{
  @page{size:A4;margin:14mm}
  body.has-sheet{background:#fff}
  body.has-sheet *{visibility:hidden!important}
  body.has-sheet .sheet,body.has-sheet .sheet *{visibility:visible!important}
  body.has-sheet .sheet-viewport{position:static;height:auto!important;overflow:visible;border:0;background:none}
  body.has-sheet .sheet{position:absolute;left:0;right:0;top:0;width:auto;min-height:0;margin:0;padding:0;box-shadow:none;transform:none!important;font-size:10pt}
  .sheet__lines tr,.sheet__sum-row,.sheet__foot,.sheet__pay{break-inside:avoid}
}

/* --- Prüfergebnis (Validator) ------------------------------------------ */
.tool-summary{max-width:var(--measure);margin-bottom:var(--space-4)}
.tool-summary[hidden]{display:none}
.tool-summary > :first-child{margin-top:0}
.findings-group{margin-bottom:var(--space-5)}
.findings-group:last-child{margin-bottom:0}
.findings-group__title{font-size:var(--text-h3);line-height:var(--text-h3-lh);margin:0 0 var(--space-2)}
.finding__body{min-width:0}
.finding__say p + p{margin-top:var(--space-1)}
.finding__where{font-family:var(--font-mono);font-size:var(--text-small);color:var(--text-muted);margin:var(--space-1) 0 0}
.finding__rule{overflow-wrap:anywhere}

/* --- Newsletter im Footer ----------------------------------------------- */
/* Der Footer steht auf Tinte: Knopf und Fokus hell, Eingabefeld auf Weiß. */
.newsletter{display:grid;gap:var(--space-4);padding-bottom:var(--space-5);margin-bottom:var(--space-5);border-bottom:1px solid rgba(250,247,242,.15)}
@media (min-width:960px){.newsletter{grid-template-columns:1.1fr 1fr;gap:var(--space-6);align-items:start}}
.newsletter__title{font-size:var(--text-h3);line-height:var(--text-h3-lh);margin:0 0 var(--space-2)}
.newsletter__lead{color:var(--xr-on-inverse-muted);margin:0;max-width:46ch}
.newsletter__label{display:block;font-size:var(--text-small);font-weight:var(--weight-semibold);margin-bottom:var(--space-1)}
.newsletter__row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.newsletter__input{flex:1 1 14rem;min-width:0;min-height:44px;padding:8px 12px;border:var(--rule) solid rgba(250,247,242,.4);border-radius:var(--radius);background:var(--xr-white);color:var(--xr-ink);font:var(--weight-regular) var(--text-body)/1.4 var(--font-sans)}
.newsletter__input::placeholder{color:var(--text-muted)}
.newsletter__input:disabled{background:rgba(250,247,242,.18);color:var(--xr-paper);border-style:dashed;cursor:not-allowed}
.newsletter__input:disabled::placeholder{color:var(--xr-on-inverse-muted)}
.newsletter__button{flex:0 0 auto}
.newsletter__note{font-size:var(--text-small);line-height:var(--text-small-lh);color:var(--xr-on-inverse-muted);margin:var(--space-3) 0 0;max-width:54ch}
.site-footer .btn--primary{background:var(--xr-paper);color:var(--xr-ink);border-color:var(--xr-paper)}
.site-footer .btn--primary:hover{background:var(--xr-white);border-color:var(--xr-white);color:var(--xr-ink)}
.site-footer :focus-visible{outline:var(--rule-strong) solid var(--xr-paper);outline-offset:2px}