/* MarkAssist Theme: hell (Standard) / dunkel (Umschalter). Kontrast WCAG AA. */
/* ===== Design-Tokens (design-system 2026-11-06): Namen siehe design/TOKENS.md ===== */
:root{
 --ma-sp-1:4px;--ma-sp-2:8px;--ma-sp-3:12px;--ma-sp-4:16px;--ma-sp-5:24px;--ma-sp-6:32px;--ma-sp-7:48px;
 --ma-r-sm:8px;--ma-r-md:12px;--ma-r-lg:16px;--ma-r-pill:999px;
 --ma-fs-xs:.8125rem;--ma-fs-sm:.875rem;--ma-fs-0:1rem;
 --ma-fs-1:clamp(1.1rem,1.05rem + .25vw,1.2rem);--ma-fs-2:clamp(1.25rem,1.15rem + .5vw,1.44rem);
 --ma-fs-3:clamp(1.5rem,1.3rem + .9vw,1.73rem);--ma-fs-4:clamp(1.7rem,1.4rem + 1.4vw,2.07rem);
 --ma-lh-tight:1.25;--ma-lh-body:1.5;--ma-lh-loose:1.65;
 --ma-measure:70ch;
 --ma-btn-h:44px;--ma-btn-px:16px;--ma-btn-gap:8px;--ma-icon:20px;--ma-bw:1.5px;
 --ma-focus:#1559E6;--ma-focus-halo:#fff;
 --ma-shadow-1:0 1px 3px rgba(0,0,0,.12);--ma-shadow-2:0 8px 30px rgba(0,0,0,.15);
 --ma-dur:.15s;
 --r:var(--ma-r-lg);
}
html[data-theme=dark]{--ma-focus:#FFD400;--ma-focus-halo:#0F1626;--ma-shadow-1:0 1px 3px rgba(0,0,0,.5);--ma-shadow-2:0 8px 30px rgba(0,0,0,.6)}
html{color-scheme:light;-webkit-text-size-adjust:100%}
html[data-theme=dark]{color-scheme:dark}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
html[data-theme=dark]{color-scheme:dark}
html[data-theme=dark] body{background:#0F1626!important;color:#E8ECF5!important}
html[data-theme=dark] h1,html[data-theme=dark] h2,html[data-theme=dark] h3,html[data-theme=dark] .serif,html[data-theme=dark] .who b,html[data-theme=dark] #vt{color:#A9C4FF!important}
html[data-theme=dark] a{color:#9DBCFF}
html[data-theme=dark] .card,html[data-theme=dark] .top,html[data-theme=dark] header,html[data-theme=dark] .side,html[data-theme=dark] .chatp,html[data-theme=dark] .tabs,html[data-theme=dark] .tabs button,html[data-theme=dark] .r,html[data-theme=dark] .stp,html[data-theme=dark] .sheet,html[data-theme=dark] .file{background:#16203A!important;border-color:#2B3A5E!important;color:#E8ECF5!important}
html[data-theme=dark] .mu,html[data-theme=dark] .small,html[data-theme=dark] .rh,html[data-theme=dark] figcaption{color:#B8C0CC!important}
html[data-theme=dark] button,html[data-theme=dark] .btn,html[data-theme=dark] select,html[data-theme=dark] input,html[data-theme=dark] textarea{background:#1C2846!important;color:#E8ECF5!important;border-color:#33456F!important}
html[data-theme=dark] .pri,html[data-theme=dark] button.p{background:#2F6BFF!important;border-color:#2F6BFF!important;color:#fff!important}
html[data-theme=dark] .sec{color:#A9C4FF!important;border-color:#5B7BC4!important}
/* helle Hinweis-Kästen im Dunkelmodus: dunkles Gelb mit heller Schrift */
html[data-theme=dark] .resp,html[data-theme=dark] .help,html[data-theme=dark] .warn,html[data-theme=dark] .draft,html[data-theme=dark] #sensb,html[data-theme=dark] [style*="FFF8D6"],html[data-theme=dark] [style*="FFFBEA"],html[data-theme=dark] [style*="FFF1DE"]{background:#3A3216!important;border-color:#7A6522!important;color:#FFF3C4!important}
html[data-theme=dark] #errb,html[data-theme=dark] [style*="FDF0EE"]{background:#3D1F1C!important;color:#FFD9D3!important}
html[data-theme=dark] .resp *,html[data-theme=dark] .help *,html[data-theme=dark] .draft *,html[data-theme=dark] [style*="FFF8D6"] *{color:inherit}
html[data-theme=dark] .resp a,html[data-theme=dark] [style*="FFF8D6"] a{color:#FFE27A!important}
html[data-theme=dark] .chip.ki{background:#4A3F12!important;color:#FFE9A3!important}html[data-theme=dark] .chip.ok{background:#173D27!important;color:#9BE3B5!important}
html[data-theme=dark] table td,html[data-theme=dark] table th{border-color:#2B3A5E!important}html[data-theme=dark] th{background:#1C2846!important}
html[data-theme=dark] .drop{background:#121C33!important;border-color:#3B4D78!important;color:#C8D0DC!important}
html[data-theme=dark] .sheetp,html[data-theme=dark] .code,html[data-theme=dark] .src{background:#fff!important;color:#222!important}
#themeb{position:fixed;right:12px;bottom:14px;z-index:30;min-height:44px;min-width:44px;border-radius:22px;border:1.5px solid #C9C2B0;background:#fff;color:#2B2F36;font:600 14px system-ui,sans-serif;padding:0 14px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
html[data-theme=dark] #themeb{background:#1C2846;color:#FFE27A;border-color:#5B7BC4}
@media(max-width:1023px){body:has(.tabs) #themeb{bottom:72px}}
html[data-theme=dark] [style*="5F6672"],html[data-theme=dark] [style*="#888"],html[data-theme=dark] [style*="7a8496"]{color:#C2C9D4!important}
@media(max-width:600px){.hide-s{display:none}.top .ws select{max-width:46vw}.top{gap:4px!important;padding:8px 10px!important}.top .ws .btn,.top .ws button{padding:0 8px!important}}
/* Zusatzfunktionen (extras-ui.js): Overlay, Panels, Seitenvorschau */
html[data-theme=dark] .ex-ov .in{background:#0F1626!important;color:#E8ECF5!important}
html[data-theme=dark] .ex-box,html[data-theme=dark] .pg-bar{background:#16203A!important;border-color:#2B3A5E!important;color:#E8ECF5!important}
html[data-theme=dark] .ex>summary,html[data-theme=dark] .exf>summary,html[data-theme=dark] .ex-ov b{color:#A9C4FF!important}
html[data-theme=dark] .exf{border-color:#2B3A5E!important}html[data-theme=dark] .exf p,html[data-theme=dark] .ex-res,html[data-theme=dark] .ex-hit q{color:#C8D0DC!important}
html[data-theme=dark] .ex-res td,html[data-theme=dark] .ex-res th{border-color:#2B3A5E!important}
html[data-theme=dark] .pg{background:#1C2846!important;border-color:#2B3A5E!important}html[data-theme=dark] .pg.sel{background:#243A6E!important;border-color:#7FA3FF!important}
html[data-theme=dark] .pg .nr{color:#C8D0DC!important}html[data-theme=dark] .pg .ck{background:#16203A!important;border-color:#7FA3FF!important}html[data-theme=dark] .pg.sel .ck{background:#2F6BFF!important}
html[data-theme=dark] .ex-warn,html[data-theme=dark] .ex-beta{background:#3A3216!important;color:#FFE9A3!important}html[data-theme=dark] .ex-err{color:#FF9D92!important}
html[data-theme=dark] .ex-res img.svg{background:#fff!important}
.ex-ov .in,.ex-box{color:var(--tx,var(--ink,#2B2F36))}
/* Kontrast-Audit 2026-11-06 */
html[data-theme=dark] .pri,html[data-theme=dark] button.p,html[data-theme=dark] button.pri{background:#2457D6!important;border-color:#2457D6!important}
html[data-theme=dark] .qline,html[data-theme=dark] .empty,html[data-theme=dark] td,html[data-theme=dark] th,html[data-theme=dark] li,html[data-theme=dark] small,html[data-theme=dark] dd{color:#C8D0DC}
html[data-theme=dark] .sheetp td,html[data-theme=dark] .sheetp th,html[data-theme=dark] .code td,html[data-theme=dark] .src td{color:#222!important}
html[data-theme=dark] .side .num{background:#2B3A5E!important;color:#E8ECF5!important}html[data-theme=dark] .side .on .num,html[data-theme=dark] .side .dn .num{background:#2457D6!important;color:#fff!important}
html[data-theme=dark] [style*="0B3B8C"]{color:#A9C4FF!important}
html[data-theme=dark] [style*="background:#EEE"]{background:#2B3A5E!important;color:#E8ECF5!important}
.chip.g2{background:#2E7D3F!important}.chip.g3{background:#8a6400!important}.chip.g4{background:#a04f00!important}
html[data-theme=dark] .ob,html[data-theme=dark] .b.ob{color:#CDB6FF!important;border-color:#CDB6FF!important}
html[data-theme=dark] .todo{background:#3A3216!important;color:#FFF3C4!important}
.ex-flag{background:#FDE7E4;color:#3b1a16}.ex-flag td,.ex-flag span{color:#3b1a16!important}
html[data-theme=dark] .ex-flag{background:#3D1F1C!important;color:#FFD9D3!important}html[data-theme=dark] .ex-flag td,html[data-theme=dark] .ex-flag span,html[data-theme=dark] .ex-flag b{color:#FFD9D3!important}
@media(max-width:600px){.card:has(>table){overflow-x:auto}td,th{overflow-wrap:anywhere}}
h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
#outs span,#outs a,#outs div,.res span.small{overflow-wrap:anywhere;min-width:0} /* lange Namen (z. B. Abschnittslisten) dürfen umbrechen, sonst Überlauf in RTL */
/* ===== Komponenten-Schicht (design-system): einheitliche Buttons, Karten, Chips, Felder, Fokus ===== */
html{scroll-padding-top:72px;scroll-padding-bottom:84px}
body{line-height:var(--ma-lh-body)}
main :is(h1,h2,h3):not(.md *){line-height:var(--ma-lh-tight);text-wrap:balance}
main h1:not(.md *){font-size:var(--ma-fs-3);margin-block:0 var(--ma-sp-2)}
main h2:not(.md *){font-size:var(--ma-fs-2);margin-block:var(--ma-sp-5) var(--ma-sp-2)}
main h3:not(.md *){font-size:var(--ma-fs-1);margin-block:var(--ma-sp-4) var(--ma-sp-2)}
.mu{font-size:var(--ma-fs-sm);line-height:var(--ma-lh-body)}.small{font-size:var(--ma-fs-xs)}
/* Buttons: primary .pri/.p, secondary .sec, ghost .ghost, danger .danger/.d - alle 44 px, gleicher Radius, Icon 20 px, Abstand 8 px */
.ic{width:var(--ma-icon);height:var(--ma-icon);flex:0 0 auto}
button,.btn{min-height:var(--ma-btn-h);padding-block:0;padding-inline:var(--ma-btn-px);border-radius:var(--ma-r-md);border-style:solid;border-width:var(--ma-bw);gap:var(--ma-btn-gap);font:inherit;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:background-color var(--ma-dur),border-color var(--ma-dur),filter var(--ma-dur)}
button .ic,.btn .ic{margin:0}
.pri,button.p{background:var(--nb,var(--ac));border-color:var(--nb,var(--ac));color:#fff}
.pri:hover,button.p:hover{filter:brightness(1.12)}
.sec{background:transparent;border-color:var(--nb,var(--ac));color:var(--nb,var(--ac))}
.sec:hover{background:color-mix(in srgb,var(--nb,var(--ac)) 8%,transparent)}
.ghost{border-color:transparent;background:transparent}
.ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.danger,button.d{background:transparent;color:var(--er);border-color:var(--er)}
.danger:hover,button.d:hover{background:color-mix(in srgb,var(--er) 8%,transparent)}
html[data-theme=dark] .danger,html[data-theme=dark] button.d{color:#FF9D92!important;border-color:#FF9D92!important;background:transparent!important}
button:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;filter:none}
/* Felder */
input:is([type=text],[type=password],[type=search],[type=email],[type=url],[type=number],:not([type])),select,textarea{font:inherit;border-style:solid;border-width:var(--ma-bw);border-radius:var(--ma-r-md)}
select,input:is([type=text],[type=password],[type=search],[type=email],[type=url],:not([type])){min-height:var(--ma-btn-h)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--nb,var(--ac))}
/* Karten, Chips */
.card{border-radius:var(--ma-r-lg);padding:var(--ma-sp-4)}
@media(min-width:768px){.card{padding:20px}}
.chip,.b{display:inline-flex;align-items:center;gap:var(--ma-sp-1);border-radius:var(--ma-r-pill);padding:2px 10px;font-size:var(--ma-fs-xs);font-weight:600;line-height:1.4}
/* Fokus (WCAG 2.4.7/2.4.11/2.4.13): 3 px Ring, 3:1 gegen Seite, hell und dunkel */
:focus-visible{outline:3px solid var(--ma-focus);outline-offset:2px;border-radius:var(--ma-r-sm)}
button:focus-visible,.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{border-radius:var(--ma-r-md)}
.tabs button:focus-visible,.sbtn:focus-visible,.file:focus-visible,#langm button:focus-visible{outline-offset:-3px}
:focus:not(:focus-visible){outline:none}
/* Lange Texte: Zeilenlänge ~70 Zeichen (body.ma-text = hilfe, recht, datenschutz, impressum, einwilligung) */
.ma-text{line-height:var(--ma-lh-loose)}
.ma-text main{max-width:min(100%,60rem)}
.ma-text :is(p,li,dd,blockquote,figcaption){max-width:var(--ma-measure)}
.ma-text main h1{font-size:var(--ma-fs-4)}
.ma-text main h2{margin-block-start:var(--ma-sp-6)}
.ma-text :is(td,th){line-height:var(--ma-lh-body)}
/* Zustände: leer / lädt / Fehler / Toast */
.empty{padding:var(--ma-sp-5) var(--ma-sp-4);text-align:center;color:var(--mu);font-size:var(--ma-fs-sm)}
.ma-spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:ma-spin .8s linear infinite;vertical-align:-.15em}
@keyframes ma-spin{to{transform:rotate(360deg)}}
.toast{border-radius:var(--ma-r-md);box-shadow:var(--ma-shadow-2);font-size:var(--ma-fs-sm)}
/* Barrierefreiheit: Skip-Link (sichtbar bei Fokus), nur-Screenreader-Text */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:1000;transform:translateY(-200%);background:var(--nb,#0B3B8C);color:#fff!important;padding:12px 16px;border-radius:var(--ma-r-md);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{transform:none}
html[data-theme=dark] .skip{background:#FFD400;color:#0F1626!important}
.ma-hd{max-width:60rem;margin-inline:auto;padding:var(--ma-sp-3) var(--ma-sp-4) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--ma-sp-3)}
.ma-hd a{min-height:44px;display:inline-flex;align-items:center}
.ma-foot{max-width:60rem;margin-inline:auto;padding:var(--ma-sp-5) var(--ma-sp-4) 96px;font-size:var(--ma-fs-sm);color:var(--mu,#5F6672)}
.ma-foot a{display:inline-block;min-height:44px;line-height:44px}
html[data-theme=dark] .ma-foot{color:#C8D0DC}
/* Textseiten: schmale Lesespalte (~70 Zeichen), breite Tabellen scrollen mit Hinweis */
.ma-text main{max-width:min(100%,44rem)}
.ma-text.ma-wide main{max-width:min(100%,52rem)}
.ma-text .card,.ma-text .resp,.ma-text .draft,.ma-text .warn{max-width:100%}
.ma-text td a,.ma-text th a,.ma-text li>a:only-child,.ma-text .mu a{display:inline-block;padding-block:8px}
.tw{overflow-x:auto;max-width:100%;background:linear-gradient(to right,var(--card,#fff),var(--card,#fff)) left/24px 100% no-repeat local,linear-gradient(to left,var(--card,#fff),var(--card,#fff)) right/24px 100% no-repeat local,linear-gradient(to right,rgba(0,0,0,.18),transparent) left/10px 100% no-repeat scroll,linear-gradient(to left,rgba(0,0,0,.18),transparent) right/10px 100% no-repeat scroll}
.tw:focus-visible{outline-offset:-3px}
.ma-toc{display:flex;flex-wrap:wrap;gap:var(--ma-sp-2) var(--ma-sp-3);margin-block:var(--ma-sp-3) var(--ma-sp-4);padding:0;list-style:none}
.ma-toc a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--ma-sp-3);border:1px solid var(--bd,#E6E1D6);border-radius:var(--ma-r-pill);text-decoration:none;font-size:var(--ma-fs-sm)}
.ma-toc a:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.ma-text main h2{scroll-margin-top:72px}
@media(min-width:768px){.ma-text.ma-print-wide{max-width:none}}
/* Beispiel-Karten (guided Schritt 1) */
.ex-cards{display:grid;gap:var(--ma-sp-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));margin-block:var(--ma-sp-3)}
.ex-cards .card{display:flex;flex-direction:column;gap:var(--ma-sp-2)}
.ex-cards .card p{margin:0}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--ma-sp-3);margin-block-start:auto}
#app>footer a,footer a{display:inline-block;padding-block:12px;min-height:44px}
.stepper{margin-block-start:var(--ma-sp-2)}
html[data-theme=dark] header .logo{content:url(/assets/logo_dark.svg)}

/* (i)-Info: Erklärungen verborgen, Hover am PC, Tippen am Handy (gleich wie bei den Feedback-Tonarten) */
.sx-h{display:flex;align-items:center;gap:2px;line-height:1}
.ma-info{position:relative;display:inline-block;text-transform:none;letter-spacing:0;font-weight:400}
.ma-info>summary{list-style:none;cursor:pointer;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font:italic 700 12px/1 Georgia,serif;color:#1F3A8A}
.ma-info>summary::-webkit-details-marker{display:none}
.ma-info>summary::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px solid currentColor}
.ma-infobox{display:none;position:absolute;z-index:80;top:34px;inset-inline-start:-140px;width:min(320px,86vw);background:#fff;color:#1A2233;border:1.5px solid #CFC7B4;border-radius:12px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:14px;line-height:1.45}
.ma-infobox p{margin:6px 0}
.ma-info[open]>.ma-infobox{display:block}
@media (hover:hover){.ma-info:hover>.ma-infobox{display:block}}
@media (max-width:600px){.ma-infobox{position:fixed;inset-inline:16px;bottom:16px;top:auto;width:auto;max-height:70vh;overflow:auto}}
.ma-infox{float:inline-end;min-width:44px;min-height:44px;margin:-6px -8px 0 6px;background:none!important;border:0!important;font-size:18px;color:inherit!important;cursor:pointer}
html[data-theme=dark] .ma-info>summary{color:#A9C4FF}
html[data-theme=dark] .ma-infobox{background:#1C2846;color:#E8ECF5;border-color:#33456F}
.ma-text :is(a,li,td,p){overflow-wrap:anywhere}