@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/static/schriften/ibm-plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(/static/schriften/ibm-plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/static/schriften/ibm-plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/static/schriften/ibm-plex-mono-400.woff2) format("woff2")}
:root{color-scheme:light dark;--schrift:"IBM Plex Sans",system-ui,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;--knopf:0.9375rem;--leiste:1rem;--mindesthoehe:36rem;--bandhoehe:calc((100vw + 100dvh) * 0.0135);--r:10px;--klein:0.8125rem;--knapp:0.9375rem;--grundschrift:clamp(0.9375rem,0.6816rem + 0.315vw,1.4375rem);--telefonschrift:0.9333rem;--hg:#eaf0ec;--fl:#fbfdfb;--tx:#1b1b1b;--tx2:#4a4948;--lin:#c5cdc7;--fok:#111111;--ak:#8a5a00;--ak-tx:#fff;--ak-schrift:#5f4400;--gr:#0f6b4d;--ge:#7a4f00;--ro:#a8300e;--tun:#ffe58a;--tun-rand:#c9a52f;--tun-linie:#e3c452;--erl:#bfe3c8;--erl-linie:#7dc09a;--ach:#ffd3c2;--ach-linie:#ec9a78;--workflow:#b4b9b6;--wf-tx:#1b1b1b;--eigen:#bfe3c8;--gelb:#ffe58a;--band:linear-gradient(to right,var(--eigen),var(--gelb));--band-tx:#1b1b1b;--info:#b8b6b2;--info-tx:#1b1b1b;--k-neutral:#e3e7e4;--k-neutral-rand:#a3aca7;--k-gefahr:#ffd3c2;--k-gefahr-rand:#ec9a78;--k-rat:#ffe58a;--k-rat-rand:#e3c452;--k-ja:#bfe3c8;--k-ja-rand:#7dc09a;--k-tx:#241f16;--mitte-innen:#f7f9f6;--mitte-aussen:#9fa6a0;--ampel-gr:#12d65a;--ampel-ge:#ffc400;--ampel-ro:#ff2b1c;--kante-gold:#d9960a;--kante-dunkel:#4a4f55;--puls:#ffffff;--pipe-gelb:#f5c800;--kante-schrift:#0a0a0a;--kante-glow:#ffffff;--kante-schwarz:#111111;--u-gr:#bfe3c8;--u-gr-rand:#7dc09a;--u-ge:#ffe58a;--u-ge-rand:#e3c452;--u-ro:#ffd3c2;--u-ro-rand:#ec9a78;--u-grau:#e3e7e4;--u-grau-rand:#a3aca7;--blatt:#fffbe0;--blatt-tx:#000000;--blatt-rand:#e8dc9a;--feld-gruen:#f1f8d2;--feld-gruen-rand:#cfdd98;--feld-gelb:#fffbe0;--feld-gelb-rand:#e8dc9a;--feld-tx:#000000}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--hg:#151816;--fl:#1c201d;--tx:#f0f3ee;--tx2:#c0c6bf;--lin:#2e332f;--fok:#fbeaa0;--ak:#f0b429;--ak-tx:#1b1b1b;--ak-schrift:#ffdd55;--gr:#7fe3bf;--ge:#ffd84a;--ro:#ffa07c;--tun:#4a3f1c;--tun-rand:#c9a227;--tun-linie:#8f7a34;--erl:#1f3a3c;--erl-linie:#3f7a6c;--ach:#4d2f24;--ach-linie:#a3654a;--workflow:#2a2927;--wf-tx:#ece9e2;--band:linear-gradient(to right,#1f3a3c,#25402f 33%,#3a3a1f 66%,#4a3f1c);--band-tx:#ece9e2;--info:#2a2927;--info-tx:#ece9e2;--k-neutral:#33332f;--k-neutral-rand:#66665e;--k-gefahr:#4d2f24;--k-gefahr-rand:#a3654a;--k-rat:#4a3f1c;--k-rat-rand:#8f7a34;--k-ja:#1f3a3c;--k-ja-rand:#3f7a6c;--k-tx:#efe9dd;--eigen:#1f3a3c;--gelb:#4a3f1c;--mitte-innen:#50554f;--mitte-aussen:#030403;--ampel-gr:#35ff8c;--ampel-ge:#ffe14a;--ampel-ro:#ff5a4d;--kante-gold:#ffc933;--kante-dunkel:#6c727a;--puls:#ffffff;--pipe-gelb:#ffd93d;--kante-schrift:#ffffff;--kante-glow:#050505;--kante-schwarz:#050505;--u-gr:#1f3a3c;--u-gr-rand:#3f7a6c;--u-ge:#4a3f1c;--u-ge-rand:#8f7a34;--u-ro:#4d2f24;--u-ro-rand:#a3654a;--u-grau:#33332f;--u-grau-rand:#66665e;--blatt:#383117;--blatt-tx:#f0f3ee;--blatt-rand:#6b5c26;--feld-gruen:#2a3317;--feld-gruen-rand:#55642c;--feld-gelb:#383117;--feld-gelb-rand:#6b5c26;--feld-tx:#f0f3ee}}
:root[data-theme=dark]{color-scheme:dark;--hg:#151816;--fl:#1c201d;--tx:#f0f3ee;--tx2:#c0c6bf;--lin:#2e332f;--fok:#fbeaa0;--ak:#f0b429;--ak-tx:#1b1b1b;--ak-schrift:#ffdd55;--gr:#7fe3bf;--ge:#ffd84a;--ro:#ffa07c;--tun:#4a3f1c;--tun-rand:#c9a227;--tun-linie:#8f7a34;--erl:#1f3a3c;--erl-linie:#3f7a6c;--ach:#4d2f24;--ach-linie:#a3654a;--workflow:#2a2927;--wf-tx:#ece9e2;--band:linear-gradient(to right,#1f3a3c,#25402f 33%,#3a3a1f 66%,#4a3f1c);--band-tx:#ece9e2;--info:#2a2927;--info-tx:#ece9e2;--k-neutral:#33332f;--k-neutral-rand:#66665e;--k-gefahr:#4d2f24;--k-gefahr-rand:#a3654a;--k-rat:#4a3f1c;--k-rat-rand:#8f7a34;--k-ja:#1f3a3c;--k-ja-rand:#3f7a6c;--k-tx:#efe9dd;--eigen:#1f3a3c;--gelb:#4a3f1c;--mitte-innen:#50554f;--mitte-aussen:#030403;--ampel-gr:#35ff8c;--ampel-ge:#ffe14a;--ampel-ro:#ff5a4d;--kante-gold:#ffc933;--kante-dunkel:#6c727a;--puls:#ffffff;--pipe-gelb:#ffd93d;--kante-schrift:#ffffff;--kante-glow:#050505;--kante-schwarz:#050505;--u-gr:#1f3a3c;--u-gr-rand:#3f7a6c;--u-ge:#4a3f1c;--u-ge-rand:#8f7a34;--u-ro:#4d2f24;--u-ro-rand:#a3654a;--u-grau:#33332f;--u-grau-rand:#66665e;--blatt:#383117;--blatt-tx:#f0f3ee;--blatt-rand:#6b5c26;--feld-gruen:#2a3317;--feld-gruen-rand:#55642c;--feld-gelb:#383117;--feld-gelb-rand:#6b5c26;--feld-tx:#f0f3ee}
:root[data-theme=light]{color-scheme:light}
/* Grundlagen: Maße, Seitenkörper, Links, Fokus -- alle Farben und Schriften kommen als Token aus dem Stilpaket */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-size:var(--grundschrift)}      /* die Grundschrift wächst mit der Fensterbreite (Stilpaket: schriftgroesse); alle Größen sind rem und wachsen mit */
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--hg);color:var(--tx);font:1rem/1.5 var(--schrift)}
a{color:var(--ak-schrift)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--fok);outline-offset:2px}
.sprung{position:absolute;left:-999px;top:0;background:var(--ak);color:var(--ak-tx);padding:.6rem 1rem;z-index:10}.sprung:focus{left:0}
main{width:100%;max-width:none;margin:0;padding:.8rem 1rem;flex:1 0 auto}h1{font-size:1.3rem;line-height:1.25;margin:.1rem 0 .7rem}h2{font-size:1.2rem;margin:1.4rem 0 .5rem}
@media (max-width:34rem){body{font-size:var(--telefonschrift);line-height:1.45}input,select,textarea{font-size:max(1rem,16px)!important}main{padding:.7rem}}
/* Jede Seite mit Layout (Festlegung des Menschen vom 12.11.2026, „für alle Seiten des Projekts“): das Fenster ist der Rahmen, die Seite selbst
   scrollt nicht -- links, Mitte und rechts scrollen je für sich (layouts/css). Bis 12.11.2026 galt das nur für die Seitenlage flaeche;
   eine Flächenseite ohne Layout (die PDF-Ansicht) behält ihren Rahmen.
   Auf dem Telefon stehen die Felder untereinander, dort scrollt die Seite als Ganzes. */
body:is(.flaeche,:has(.layout)){height:100dvh;min-height:var(--mindesthoehe)}      /* das Fenster ist der Rahmen -- aber nie niedriger als die Mindesthöhe des Stilpakets: darunter scrollt die Seite als Ganzes */
body:is(.flaeche,:has(.layout)) main{overflow:hidden;display:flex;flex-direction:column;min-height:0;flex:1 1 0}
body:is(.flaeche,:has(.layout)) .layout{flex:1;min-height:0}body:is(.flaeche,:has(.layout)) footer{margin-top:0}
body.flaeche h1{font-size:1.2rem;margin:.1rem 0 .5rem}
@media (max-width:34rem){body:is(.flaeche,:has(.layout)){height:auto;min-height:100dvh}body:is(.flaeche,:has(.layout)) main{overflow:visible;display:block}body:is(.flaeche,:has(.layout)) footer{margin-top:2rem}}

/* Die Bänder: oben Arbeitsablaufleiste (ui-al) und Kontextleiste (ui-kl), unten Statuszeile und Infoleiste */
header{position:sticky;top:0;z-index:5}
.ui-al,.ui-kl,.ui-status,.ui-info{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center;padding:.4rem 1rem}
.ui-al{background:var(--workflow);color:var(--wf-tx)}.ui-kl{background:var(--band);color:var(--band-tx);font-size:var(--knapp)}
.ui-status{background:var(--band);color:var(--band-tx);font-size:var(--leiste)}.ui-info{background:var(--info);color:var(--info-tx);font-size:var(--leiste)}      /* Hinweis- und Statuszeile: dieselbe Größe, ein Maß (--leiste) */
.marke{font-weight:600;border:1px solid var(--k-neutral-rand);border-radius:6px;padding:.1rem .5rem;background:var(--fl);text-decoration:none;color:var(--tx)}
.al-seite{font-weight:600}.arbeitsgang{display:flex;flex-wrap:wrap;gap:.25rem;margin:0;padding:0;list-style:none}
.arbeitsgang a{display:inline-block;min-height:max(44px,2.6rem);line-height:max(44px,2.6rem);padding:0 .8rem;border-radius:999px;text-decoration:none;color:var(--wf-tx);border:1px solid transparent}
.arbeitsgang a:hover{background:color-mix(in srgb,var(--fl) 55%,transparent)}
.arbeitsgang a[aria-current=page]{background:var(--tun);border-color:var(--tun-rand);color:var(--tx);font-weight:600}
.arbeitsgang a{position:relative}.arbeitsgang a[data-naechster]{border-color:var(--tun-rand)}.schritt-stand{margin-left:.3rem}
.weiter{margin-left:auto;min-height:44px;line-height:1.6;white-space:nowrap}.weiter-form{margin-left:auto;display:flex}.weiter-form .weiter{margin-left:0}
/* Abschnitte (12.11.2026): oben je Abschnitt eine Kapsel, darunter nur die Schritte des Abschnitts, in dem man steht */
.arbeitsgang a.abschnitt[aria-current=true]{font-weight:600;border-color:var(--wf-tx)}
.ui-status,.ui-info{justify-content:space-between}#hinweis,#status{margin-right:auto;text-align:left}#status.fehler{font-weight:600}
#hinweis:empty,#status:empty{display:none}
/* Hinweise (12.11.2026): höchstens drei Zeilen mit Umbruch; was nicht in den freien Platz passt, entfällt. Der Platz endet links vom QR-Code. */
/* Hinweise: drei Zeilen, an Satzgrenzen gekürzt (rahmen.seite.hinweis_html) -- nichts wird mitten im Satz abgeschnitten, keine Auslassungspunkte */
#hinweis{flex:1 1 0;min-width:0;line-height:1.4;max-height:2.8em;overflow:hidden}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{position:sticky;bottom:0;z-index:5;margin-top:2rem}
/* der QR-Code der Seite: rechts über beiden Bändern des Fußes; groß bei Zeiger oder Fokus */
footer.mit-qr{--qr:4.6rem}footer.mit-qr .ui-status,footer.mit-qr .ui-info{min-height:2.3rem;padding-right:calc(var(--qr) + 1.4rem)}
.seiten-qr{position:absolute;right:.6rem;top:50%;width:var(--qr);height:var(--qr);transform:translateY(-50%);border-radius:4px;outline-offset:2px}
.seiten-qr svg{display:block;width:100%;height:100%;border-radius:4px;transform-origin:100% 100%;transition:transform .15s ease}
.seiten-qr:hover svg,.seiten-qr:focus-visible svg{transform:scale(3.2);box-shadow:0 0 0 1px var(--lin)}
@media (prefers-reduced-motion:reduce){.seiten-qr svg{transition:none}}
@media (max-width:34rem){#hinweis .hin-breit{display:none}.ui-status,.ui-info{font-size:var(--telefonschrift)}.ui-al nav{flex:1 1 100%;min-width:0;max-width:100%;order:5}.weiter,.weiter-form{order:2}
.arbeitsgang{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.arbeitsgang li{flex:0 0 auto}
}
@media print{.ui-al,.ui-kl,footer{display:none}}
/* Nutzer und Rolle im zweiten Band (11.11.2026): Textfelder mit Wahl, schlicht im Band, ohne eigene Farbe */
.kl-wahl{display:inline-flex;align-items:center;gap:.35rem;margin:0}
.kl-wahl label{font-weight:400}
.kl-wahl input{font:inherit;color:var(--band-tx);background:color-mix(in srgb,var(--band-tx) 10%,transparent);border:1px solid color-mix(in srgb,var(--band-tx) 35%,transparent);border-radius:4px;padding:.1rem .4rem;min-width:7rem;width:9rem}
.kl-wahl input:focus-visible{outline:2px solid var(--band-tx);outline-offset:1px}
.kl-wahl input:disabled{opacity:.6}
.kl-person input{font-weight:700}
@media (pointer:fine){.kl-wahl input{min-height:0;height:1.8rem;padding-block:0}}
/* Die Höhe der vier Bänder ist proportional zur Größe des Fensters (Festlegung des Menschen vom 13.11.2026): das Maß --bandhoehe des Stilpakets, nie niedriger als der Inhalt.
   Nur über dem Umbruch: auf dem Telefon brechen die Bänder in mehrere Zeilen um, dort bestimmt der Inhalt. Der QR-Code im Fuß wächst mit. */
@media (min-width:34rem){header>.ui-al,header>.ui-kl,footer>.ui-status,footer>.ui-info{min-height:var(--bandhoehe);box-sizing:border-box}footer.mit-qr>.ui-status,footer.mit-qr>.ui-info{min-height:max(2.3rem,var(--bandhoehe))}
footer.mit-qr{--qr:max(4.6rem,calc(var(--bandhoehe) * 1.75))}}

/* Inhalt: Karten, Tabellen, Felder, Stufen, Auskünfte, Zahlen, Laufzettel, Angaben, Netz (SVG), Legende */
.karte{background:var(--fl);border:1px solid var(--lin);border-radius:var(--r);padding:1rem;margin:0 0 1rem;overflow-x:auto}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.raster a.karte{text-decoration:none;color:var(--tx)}
.raster a.karte:hover{border-color:var(--tun-rand)}.raster strong{display:block;font-size:1.05rem}
table{border-collapse:collapse;width:100%}.sig-teil{white-space:nowrap}.bahnen td{overflow-wrap:break-word}.bahnen td>*{min-width:0}th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--lin);vertical-align:top}
th{font-size:var(--klein);color:var(--tx2);font-weight:600}tbody tr:hover{background:color-mix(in srgb,var(--tun) 35%,transparent)}
label{display:block;font-weight:600;margin:.6rem 0 .2rem}input,select,textarea{width:100%;min-height:44px;padding:.5rem .7rem;border:1px solid var(--lin);border-radius:8px;background:var(--fl);color:var(--tx);font:inherit}
textarea{min-height:8rem;font-family:var(--mono)}.zeile{display:flex;flex-wrap:wrap;gap:.8rem}.zeile>div{flex:1 1 200px}
.stufe{display:inline-block;border:1px solid currentColor;border-radius:12px;padding:0 .55rem;font-size:.82rem;white-space:nowrap}
.s1,.s2{color:var(--ro)}.s3{color:var(--ge)}.s4,.s5{color:var(--gr)}
.auskunft{border-left:6px solid var(--tun-rand);background:var(--fl);padding:.7rem 1rem;border-radius:0 var(--r) var(--r) 0;margin:0 0 1rem}
.auskunft.fehler{border-color:var(--ach-linie);background:var(--ach)}.auskunft.ok{border-color:var(--erl-linie);background:var(--erl)}.auskunft .was{font-weight:700;display:block}
.zahlen{display:flex;flex-wrap:wrap;gap:.8rem;margin:0 0 1rem}.zahl{flex:1 1 120px;border:1px solid var(--lin);border-radius:var(--r);padding:.6rem .9rem;background:var(--fl)}
.zahl b{display:block;font-size:1.6rem}.gruen{color:var(--gr)}.gelb{color:var(--ge)}.loch{color:var(--ro)}
.lauf{list-style:none;margin:0;padding:0}.lauf li{display:flex;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--lin)}
.lauf .zeichen{font-size:1.3rem;width:1.6rem;text-align:center}.lauf small{color:var(--tx2);display:block}
dl.def{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.2rem;margin:0}dl.def dt{color:var(--tx2);font-weight:600}dl.def dd{margin:0;overflow-wrap:anywhere}
pre.text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font:.95rem/1.5 var(--mono);max-height:28rem;overflow:auto}
svg.netz{width:100%;height:auto;max-height:75vh;background:radial-gradient(ellipse at center,var(--mitte-innen) 0%,var(--mitte-aussen) 100%);border:1px solid var(--lin);border-radius:var(--r)}      /* Mitte: zentrischer Farbverlauf -- tags von hell nach mittelgrau, nachts von grau nach schwarz */
svg.netz text{fill:var(--tx);font:1.0625rem var(--schrift);stroke:none;filter:drop-shadow(0 0 2px var(--fl)) drop-shadow(0 0 2px var(--fl)) drop-shadow(0 0 4px var(--fl)) drop-shadow(0 0 6px var(--fl))}      /* Schrift der Punkte **exakt wie im Raum** (`.mf-label` in 70-gpu.css): 1,0625 rem, Saum aus --fl statt einer Kontur (Festlegung des Menschen vom 13.11.2026) */
svg.netz text.fokus{font-weight:700}
svg.netz a[data-mem] circle,svg.netz a[data-mem] rect,svg.netz a[data-mem] path{pointer-events:all}      /* auch ein Ring (Loch) ohne Füllung ist in seiner Mitte anklickbar, nicht die Kante darunter */
/* Der zentrale Datenpunkt der Fläche behält seine Farbe; ein weißer Schein pulsiert um ihn und über ihm (weich und ruhig, halbtransparent; mit „weniger Bewegung“ steht er still) */
svg.netz a[data-mem] circle.netz-puls{fill:var(--puls);stroke:var(--tx2);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none;transform-box:fill-box;transform-origin:center;stroke-opacity:.5;animation:netz-puls 4.2s ease-in-out infinite}
@keyframes netz-puls{0%,100%{opacity:.1;transform:scale(1)}50%{opacity:.42;transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){svg.netz a[data-mem] circle.netz-puls{animation:none;opacity:.3}}
svg.netz .netz-glow circle{mix-blend-mode:screen}      /* Glow-Wolken überlagern sich heller */
svg.netz.netz-gross .kante{stroke-opacity:.16}
svg.netz .kante{stroke:var(--kante-schwarz);stroke-opacity:.6}
/* Aktive Kanten (das selektierte Netz): gelb, dicker, mit einem blassen Glanzlicht (30 Prozent Weiß), das von der Mitte nach außen läuft; passive Kanten sind schwarz (3D: grau) */
svg.netz .kante-treffer{stroke:transparent;stroke-width:12;pointer-events:stroke;cursor:pointer;fill:none}
svg.netz .kante-text{fill:var(--kante-schrift);stroke:none;font:500 .9375rem var(--schrift);letter-spacing:.02em;pointer-events:none;filter:drop-shadow(0 0 4px var(--kante-glow)) drop-shadow(0 0 8px var(--kante-glow)) drop-shadow(0 0 13px var(--kante-glow)) drop-shadow(0 0 19px var(--kante-glow)) drop-shadow(0 0 26px var(--kante-glow))}svg.netz .kante-text.gewaehlt{font-size:1.0625rem;font-weight:600}      /* Kantenwörter **exakt wie im Raum** (`.mf-kante`) */
svg.netz text.hinten,svg.netz line.netz-strich.hinten{opacity:.7}      /* im Hintergrund: Schrift, Saum und Strich gleichmäßig leicht durchsichtiger (wie im Raum) */
svg.netz line.netz-strich{stroke:var(--tx);stroke-width:1.5px;pointer-events:none;filter:drop-shadow(0 0 2px var(--fl))}      /* der Gedankenstrich am Ende der Beschriftung, weist zum Datenpunkt */
svg.netz line.kante.gewaehlt{stroke:var(--pipe-gelb);stroke-opacity:1;stroke-width:5}
svg.netz .netz-aktiv .kante{stroke:var(--pipe-gelb);stroke-opacity:1;stroke-width:3.5;stroke-linecap:round}
svg.netz a:focus-visible circle,svg.netz a:focus-visible rect,svg.netz a:focus-visible path{outline:3px solid var(--fok)}
.legende{display:flex;flex-wrap:wrap;gap:1rem;font-size:.9rem;margin:.5rem 0}.legende span{display:inline-flex;align-items:center;gap:.35rem}
.leise{color:var(--tx2);font-size:var(--klein);margin:.2rem 0}
@media (max-width:34rem){table.karten thead{display:none}table.karten tr{display:block;border:1px solid var(--lin);border-radius:var(--r);margin:.6rem 0;padding:.3rem .6rem;background:var(--fl)}
table.karten td{display:flex;gap:.8rem;border:0;padding:.25rem 0}table.karten td::before{content:attr(data-t);font-weight:600;color:var(--tx2);min-width:6.5rem}
dl.def{grid-template-columns:1fr}}
/* Auswahlliste und Auswahlbaum */
.auswahl,.baum{list-style:none;margin:0;padding:0}.auswahl li+li,.baum li+li{margin-top:.15rem}
.auswahl a,.baum a{display:block;min-height:36px;padding:.35rem .5rem;border-radius:6px;text-decoration:none;overflow-wrap:anywhere}
table.karten tbody tr:has(input.zeilenwahl:checked) td,table.az-tab tbody tr:has(input.zeilenwahl:checked) td{background:var(--tun)}table.karten td.zeilenwahl-zelle{width:2.4rem}table.karten td label{display:block;cursor:pointer}.auswahlbefehle{margin:0}.mitte.hat-stapel>.stapel:has(.auswahlbefehle){margin-top:2.3rem}
@media (pointer:fine){table.karten input.zeilenwahl{width:1.15rem;height:1.15rem}table.karten td.zeilenwahl-zelle{width:1.8rem}}
.auswahl.inhalt-teile{margin:.15rem 0 .35rem;padding-left:1rem}.auswahl a[aria-current=true]{font-weight:600}.md-ansicht h3{font-size:1.1rem}.md-ansicht ul{margin:.3rem 0 .4rem 1.2rem;padding:0}.md-ansicht p{margin:0 0 .5rem}
.auswahl a:hover,.baum a:hover{background:color-mix(in srgb,var(--tun) 40%,transparent)}
.auswahl a[aria-current=page],.baum a[aria-current=page]{background:var(--tun);border:1px solid var(--tun-rand);color:var(--tx);font-weight:600}
.baum ul{list-style:none;margin:0 0 0 .9rem;padding:0 0 0 .5rem;border-left:1px solid var(--lin)}.baum summary{cursor:pointer;min-height:36px;padding:.35rem .3rem}
.leise{color:var(--tx2);font-size:var(--klein);margin:.2rem 0}
/* Listen als Schaltflächen: jede Zeile mit einem Verweis ist eine gefüllte, anklickbare Schaltfläche (der Verweis der ersten Spalte deckt die ganze Zeile; weitere Verweise bleiben darüber bedienbar) */
table.klickbar{border-collapse:separate;border-spacing:0 .4rem}table.klickbar tbody tr{position:relative}
table.klickbar tbody td{background:var(--k-neutral);color:var(--k-tx);border-top:1px solid var(--k-neutral-rand);border-bottom:1px solid var(--k-neutral-rand);padding:.6rem .7rem;vertical-align:middle}
table.klickbar tbody td:first-child{border-left:1px solid var(--k-neutral-rand);border-radius:8px 0 0 8px}table.klickbar tbody td:last-child{border-right:1px solid var(--k-neutral-rand);border-radius:0 8px 8px 0}
table.klickbar tbody tr.zeile-knopf{cursor:pointer}table.klickbar tbody tr.zeile-knopf:hover td{background:var(--k-rat);border-color:var(--k-rat-rand)}
table.klickbar tbody tr:hover{background:none}
td.zeile-zelle>a{color:inherit;font-weight:600;text-decoration:none}td.zeile-zelle>a::after{content:"";position:absolute;inset:0}
table.klickbar td:not(.zeile-zelle) a{position:relative;z-index:1;color:var(--ak-schrift)}
table.klickbar tbody tr:has(td.zeile-zelle>a:focus-visible) td{box-shadow:inset 0 3px 0 var(--fok),inset 0 -3px 0 var(--fok)}td.zeile-zelle>a:focus-visible{outline:none}
@media (max-width:34rem){table.klickbar.karten tbody tr{background:var(--k-neutral);border-color:var(--k-neutral-rand)}table.klickbar.karten tbody td{background:transparent;border:0;border-radius:0;padding:.25rem 0}table.klickbar.karten tbody tr.zeile-knopf:hover{background:var(--k-rat)}}
/* Im Bericht: der aktivierte Verweis (Zeichen und Wort, nie nur Farbe) */
a[data-aktiv-art][aria-current=true]{font-weight:700;background:var(--tun);border-radius:4px}a[data-aktiv-art][aria-current=true]::before{content:"● aktiv: "}
/* Pfeiltasten in der Fläche: die gewählte Richtung (Kante und Nachbar) */
svg.netz .kante.richtung{stroke:var(--fok);stroke-opacity:1;stroke-width:3}svg.netz a.richtung circle,svg.netz a.richtung rect,svg.netz a.richtung path{stroke:var(--fok);stroke-width:3}
svg.netz:focus-visible{outline:3px solid var(--fok);outline-offset:-3px}
/* Bild ⇄ Text einer Seite (Baustein bildtext): Bereiche als SVG über dem Bild, :target koppelt Bereich und Text -- ohne Skript */
.bildtext{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1rem;align-items:start}
.bt-bild{position:relative;margin:0;border:1px solid var(--lin);background:var(--fl)}.bt-bild img{display:block;width:100%;height:auto}
.bt-leer{aspect-ratio:210/297;width:100%}.bt-ueber{position:absolute;inset:0;width:100%;height:100%}
/* Markierungshintergrund im Ablauf Scannen: halbtransparent, grün (erledigt, ✓), gelb (läuft, dran, ○ ≈), rot (gescheitert, ⚠) -- aus den Ampelfarben, Zeichen und Wort stehen daneben */
/* Die Unterlegfarben (12.11.2026): blass und zart, überall dieselben vier -- Grün und Gelb aus dem Verlauf des zweiten Bandes, Orangerot, Grau (Stilpaket: u-gr, u-ge, u-ro, u-grau) */
:root{--m-gr:var(--u-gr);--m-ge:var(--u-ge);--m-ro:var(--u-ro);--m-grau:var(--u-grau)}
[data-stand=erledigt],td[data-marke=gruen]{background:var(--m-gr)}[data-stand=laeuft],td[data-marke=gelb]{background:var(--m-ge)}[data-stand=gescheitert],td[data-marke=rot]{background:var(--m-ro)}td[data-marke=grau]{background:var(--m-grau)}
.marke-stand{display:inline-block;padding:.05rem .5rem;border-radius:12px;font-weight:600}.lauf li[data-stand]{border-radius:var(--r);padding-left:.4rem;padding-right:.4rem}
.arbeitsgang a[data-stand=erledigt]{background:var(--u-gr);border-color:var(--u-gr-rand)}.arbeitsgang a[data-stand=laeuft]{background:var(--m-ge)}.arbeitsgang a[data-stand=gescheitert]{background:var(--m-ro)}
.arbeitsgang a[data-naechster]:not([data-stand=erledigt]):not([data-stand=gescheitert]){background:var(--m-ge)}
.bt-bereich{fill:transparent;stroke:var(--tun-rand);stroke-width:2;vector-effect:non-scaling-stroke}.bt-bereich:target{fill:color-mix(in srgb,var(--tun) 45%,transparent);stroke-width:3}
.bt-ueber a:hover .bt-bereich,.bt-ueber a:focus .bt-bereich{fill:color-mix(in srgb,var(--tun) 30%,transparent)}.bt-nr{font-size:420px;font-weight:600;fill:var(--tx)}
.bt-liste{margin:0;padding-left:1.2rem}.bt-text{padding:.35rem .4rem;border-radius:var(--r);margin:.2rem 0}.bt-text:target{background:var(--tun);outline:2px solid var(--tun-rand)}
@media (max-width:34rem){.bildtext{grid-template-columns:1fr}}
/* Schrittseiten (Baustein schrittseite): eine Kopfzeile, seltene Felder eingeklappt */
.schrittkopf{margin:.2rem 0}details.mehr{margin:.4rem 0}details.mehr>summary{cursor:pointer;color:var(--tx2)}

/* Ein PDF in Kolophon: pdf.js zeichnet die Seiten auf Leinwänden (vektorscharf, mit Textebene); der Rahmen des Browsers ist nur der Rückfall */
.pdf-ansicht{display:flex;flex-direction:column;gap:.5rem;flex:1 1 0;min-height:0}.pdf-ansicht .knopfreihe{margin:0;align-items:center}.pdf-stand{color:var(--tx2);font-size:var(--klein);margin-left:.4rem}
.pdf-rahmen{flex:1 1 0;min-height:24rem;width:100%;border:1px solid var(--lin);border-radius:var(--r);background:var(--fl)}
.pdf-seiten{flex:1 1 0;min-height:12rem;overflow:auto;background:var(--hg);border:1px solid var(--lin);border-radius:var(--r);padding:.6rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:14px}      /* ganze Blätter neben- und untereinander */.pdf-seiten[hidden]{display:none}
.pdf-seiten:focus-visible{outline:3px solid var(--fok);outline-offset:-3px}
.pdf-seite{position:relative;flex:0 0 auto;background:var(--puls);box-shadow:0 1px 8px color-mix(in srgb,var(--kante-schwarz) 45%,transparent);max-width:none}.pdf-seite canvas{display:block}
.pdf-seite .textLayer{position:absolute;inset:0;overflow:clip;line-height:1;text-align:initial;text-size-adjust:none;transform-origin:0 0}
.pdf-seite .textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0}.pdf-seite .textLayer span.markedContent{top:0;height:0}
.pdf-seite .textLayer ::selection{background:color-mix(in srgb,var(--ak) 35%,transparent)}
.pdf-ansicht button[aria-pressed=true]{background:var(--tun);border-color:var(--tun-rand);font-weight:600}.pdf-ansicht button:disabled{opacity:.45;cursor:default}
/* Drucken: nur die Blätter, jedes auf einer Seite, in wirklicher Größe */
.pdf-druck{display:none}
@media print{html.pdf-druckt body>:not(.pdf-druck){display:none!important}html.pdf-druckt .pdf-druck{display:block}.pdf-druckblatt{break-after:page;page-break-after:always}.pdf-druckblatt:last-child{break-after:auto;page-break-after:auto}.pdf-druckblatt canvas{display:block}@page{margin:0}}
/* Ein Filter als Umschalter in der Mitte einer Seite (Baustein umschalter, 11.11.2026): dieselbe Form wie im Zahnrad */
.umschalter-leiste{margin:0 0 .8rem}
.umschalter-leiste ul.umschalter{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(6.5rem,1fr);gap:2px;padding:2px;margin:0;list-style:none;border:1px solid var(--k-neutral-rand);border-radius:999px;background:var(--hg);max-width:100%}
.umschalter-leiste .umschalter li{display:flex;min-width:0}
.umschalter-leiste .umschalter button{width:100%;min-width:0;min-height:40px;padding:.3rem .7rem;text-align:center;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umschalter-leiste .umschalter button:hover{background:var(--fl)}
.umschalter-leiste .umschalter button[aria-pressed=true]{background:var(--tun);border-color:var(--tun-rand);font-weight:600}
.umschalter-leiste .umschalter button:focus-visible{outline:2px solid var(--fok);outline-offset:1px}
@media (max-width:34rem){.umschalter-leiste ul.umschalter{display:grid;grid-auto-columns:minmax(0,1fr);width:100%}.umschalter-leiste .umschalter button{padding:.3rem .5rem;overflow:visible;white-space:normal;line-height:1.15}}
/* Etiketten (Scannen 1, 11.11.2026): die Felder der Standortsignatur in einer Reihe, rechts daneben „Drucken“; gelb die nächste Empfehlung, grün vergeben, rot ein Fehler -- mit Wort darunter */
.sig-reihe{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;margin-bottom:.4rem}
.sig-feld{display:flex;flex-direction:column;flex:1 1 4.6rem;min-width:4.6rem}.sig-feld input{width:100%}.sig-feld label{white-space:nowrap}
.sig-feld[data-zustand=empfohlen] input{background:var(--m-ge);border-color:var(--u-ge-rand)}
.sig-feld[data-zustand=vergeben] input{background:var(--m-gr);border-color:var(--u-gr-rand)}
.sig-feld[data-zustand=fehler] input{background:var(--m-ro);border-color:var(--u-ro-rand)}
.sig-wort{color:var(--tx2);font-size:var(--klein);min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sig-zeile{display:flex;gap:.6rem;align-items:flex-start}.sig-zeile .sig-reihe{flex:1 1 auto;margin-bottom:.2rem}
.sig-vonbis{flex:0 0 2.4rem;font-weight:600;padding-top:2.15rem}.sig-zeile+.sig-zeile .sig-vonbis{padding-top:.7rem}
.sig-knopf{margin:.2rem 0 .4rem 3rem}.sig-knopf button{white-space:nowrap}
.pdf-ansicht.pdf-eingebettet{flex:none}.pdf-eingebettet .pdf-seiten{height:70vh;flex:none}
@media (max-width:34rem){.sig-feld{flex-basis:40%}.sig-zeile{flex-direction:column;gap:0}.sig-vonbis,.sig-zeile+.sig-zeile .sig-vonbis{padding-top:.4rem}.sig-knopf{margin-left:0}.sig-knopf button{width:100%}.sig-zeile label.nur-vorlesen{position:static;width:auto;height:auto;clip:auto;white-space:nowrap}}
/* Etiketten sammeln (Scannen 1, 12.11.2026): die Auswahl als Tabelle (Zeilen Archivraum bis Mappe oder Steckhülle; Spalten von, bis, fertig), rechts die Vorschau aller Seiten.
   Grün = automatisch gewählt, gelb mit gestricheltem Rand = von Hand gewählt (nie nur Farbe: die Legende nennt beides, der Rand unterscheidet es); rot = Fehler. */
.layout.hat-rechts:has(.etk-vorschau){grid-template-columns:minmax(21rem,1fr) var(--rechts,auto)}
.rechts:has(.etk-vorschau){position:sticky;top:.6rem;padding:.6rem}
.etk-legende{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .6rem;font-size:var(--klein)}
.etk-marke{padding:.15rem .6rem;border-radius:var(--r);border:2px solid var(--u-gr-rand);background:var(--m-gr)}
.etk-marke[data-zustand=manuell]{border:2px dashed var(--u-ge-rand);background:var(--m-ge)}
.etk-pivot{width:100%;border-collapse:separate;border-spacing:.4rem .35rem}.etk-pivot th{text-align:left;font-weight:600;white-space:nowrap}
.etk-pivot thead th{font-size:var(--klein);color:var(--tx2)}.etk-pivot td{padding:0}.etk-pivot input{width:100%;min-width:4.5rem}
.etk-pivot td[data-zustand=auto] input{background:var(--m-gr);border:2px solid var(--u-gr-rand)}
.etk-pivot td[data-zustand=manuell] input{background:var(--m-ge);border:2px dashed var(--u-ge-rand)}
.etk-pivot td[data-zustand=fehler] input{background:var(--m-ro);border:2px solid var(--u-ro-rand)}
.etk-pivot button{width:100%;white-space:nowrap}
.etk-zahlen{margin:.6rem 0 0}.etk-oben{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-start}.etk-oben>form:first-child{flex:2 1 20rem}.etk-oben>.etk-druck{flex:1 1 17rem}.etk-druck .knopfreihe button{width:100%}.etk-rest{justify-content:center;margin:.5rem 0 0}.etk-gewaehlt p{margin:.1rem 0 .5rem}.etk-gewaehlt .knopfreihe form{display:inline}
/* Druckvorschau (12.11.2026): so breit wie ein Blatt A4 hochkant, wenn die ganze Seite zu sehen ist; die Seiten stehen nebeneinander, das Mausrad blättert waagrecht (etiketten.js: weich, mit Schwung), jede Seite rastet ein */
.etk-vorschau{--etk-h:max(16rem,calc(100dvh - 30.5rem));height:var(--etk-h);width:calc((var(--etk-h) - 2rem) * var(--bw,216) / var(--bh,280));max-width:100%;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;border-radius:var(--r);margin:0 auto}
.etk-vorschau[data-schwung]{scroll-snap-type:none}
.etk-vorschau:focus-visible{outline:3px solid var(--fok);outline-offset:-3px}
.etk-seite{flex:0 0 100%;min-width:0;height:100%;margin:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;scroll-snap-align:center;scroll-snap-stop:always;padding:.2rem 0 .5rem}
.etk-seite figcaption{font-size:var(--klein);font-weight:600;padding:.1rem .7rem;border-radius:999px;border:1px solid var(--lin);background:var(--fl)}
.etk-seite svg{flex:1 1 0;min-height:0;width:100%;max-width:100%;filter:drop-shadow(0 1px 3px var(--lin))}
.etk-ton{fill:transparent;opacity:.6}.etk-feld{fill:none;stroke:var(--k-neutral-rand);stroke-width:.25}
.etk-seite text{font-family:sans-serif}
.etk-seite[data-art=gedruckt] .etk-ton{fill:var(--u-grau)}.etk-seite[data-art=gedruckt] figcaption{background:var(--k-neutral)}
.etk-seite[data-art=druck] .etk-ton{fill:var(--m-gr)}.etk-seite[data-art=druck] figcaption{background:var(--m-gr);border-color:var(--u-gr-rand)}
.etk-seite[data-art=offen] .etk-ton{fill:var(--m-ge)}.etk-seite[data-art=offen] figcaption{background:var(--m-ge);border-color:var(--u-ge-rand)}
.etk-etikett{cursor:pointer}.etk-etikett .etk-feld{fill:transparent;pointer-events:all}.etk-etikett:hover .etk-feld,.etk-etikett:focus .etk-feld{stroke:var(--fok);stroke-width:.8}
.etk-etikett.gewaehlt .etk-feld{stroke:var(--fok);stroke-width:1.2;fill:var(--m-ge)}.etk-etikett.verworfen{opacity:.35}.etk-etikett.verworfen text{text-decoration:line-through}
@media (max-width:34rem){.layout.hat-rechts:has(.etk-vorschau){grid-template-columns:minmax(0,1fr)}.rechts:has(.etk-vorschau){position:static}.etk-vorschau{--etk-h:70dvh}.umschalter-leiste ul.umschalter-4{grid-auto-flow:row;grid-template-columns:1fr 1fr;border-radius:var(--r)}}
.umschalter-leiste .umschalter-4 button{padding:.3rem .4rem;white-space:normal;line-height:1.15}
/* Etiketten: links der Baum der Standorte (12.11.2026). Grün fertig, gelb in Arbeit, rot problematisch, hellgrau unbearbeitet -- das Wort steht am Knoten; die Stellen der Auswahl tragen einen kräftigen Rand. */
.layout.hat-links.hat-rechts:has(.etk-vorschau){grid-template-columns:var(--links,15rem) minmax(19rem,1fr) var(--rechts,auto)}
.links:has(.etk-baum){padding:.6rem}
@media (max-width:34rem){.layout>.links:has(.etk-baum){position:sticky;top:.6rem;max-height:calc(100dvh - 16rem);overflow:auto}}
.etk-baumlegende{display:flex;flex-wrap:wrap;gap:.25rem;margin:0 0 .5rem;font-size:var(--klein)}
.etk-knoten-marke,.etk-baum a{background:var(--k-neutral);border:1px solid var(--k-neutral-rand);border-radius:var(--r)}
.etk-knoten-marke{padding:.05rem .4rem}
.etk-baum ul{list-style:none;margin:0;padding:0}.etk-baum ul ul{margin-left:.35rem;padding-left:.35rem;border-left:1px solid var(--lin)}
.etk-baum li{margin:.2rem 0}
.etk-baum a{display:flex;justify-content:space-between;align-items:baseline;gap:.3rem;padding:.2rem .4rem;color:var(--tx);text-decoration:none;font-weight:600;min-height:32px;white-space:nowrap;overflow:hidden}
.etk-baum a small{font-weight:400;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--klein)}
.etk-baum a[data-zustand=fertig],.etk-knoten-marke[data-zustand=fertig]{background:var(--m-gr);border-color:var(--u-gr-rand)}
.etk-baum a[data-zustand=arbeit],.etk-knoten-marke[data-zustand=arbeit]{background:var(--m-ge);border-color:var(--u-ge-rand)}
.etk-baum a[data-zustand=problem],.etk-knoten-marke[data-zustand=problem]{background:var(--m-ro);border-color:var(--u-ro-rand)}
.etk-baum a[data-aktuell]{border-width:2px;border-color:var(--tx)}.etk-baum a[aria-current]{outline:2px solid var(--fok);outline-offset:1px}
.etk-baum a:hover,.etk-baum a:focus-visible{border-color:var(--fok)}
@media (pointer:coarse){.etk-baum a{min-height:44px}}
@media (max-width:34rem){.layout.hat-links.hat-rechts:has(.etk-vorschau){grid-template-columns:minmax(0,1fr)}.links:has(.etk-baum){position:static;max-height:22rem}}
/* Signieren (Scannen, 12.11.2026): drei Säulen je Signaturart. Links der Baum der Standortsignaturen -- Verweise statt Schaltflächen, gewählte mit kräftigem
   Rand, ein Ziel beim Ziehen gestrichelt. Grün geklebt, gelb aktuell, grau nicht vergeben -- das Wort steht in der Zeile. Mitte und rechts: ein grauer Baum mit
   gelbem Pfad (Inhaltssignatur, Tektonik), darüber, was für die Auswahl gilt. */
.layout.hat-links:has(.sigbaum){grid-template-columns:var(--links,minmax(17rem,24rem)) minmax(0,1fr)}
.layout.hat-links.hat-rechts:has(.sigbaum){grid-template-columns:var(--links,minmax(15rem,1fr)) minmax(0,1.25fr) var(--rechts,minmax(15rem,1fr))}
.sigbaum{margin:0}.sb-baum,.sb-baum ul,.pb-baum,.pb-baum ul{list-style:none;margin:0;padding:0}
.sb-baum ul,.pb-baum ul{margin-left:.55rem;padding-left:.45rem;border-left:1px solid var(--lin)}
.sb-baum li,.pb-baum li{position:relative;padding-left:1.4rem;margin-top:.2rem}
.sb-baum details>summary,.pb-baum details>summary{position:absolute;left:0;top:0;width:1.3rem;height:40px;line-height:40px;text-align:center;list-style:none;cursor:pointer;border-radius:6px;color:var(--tx2)}
.sb-baum details>summary::-webkit-details-marker,.pb-baum details>summary::-webkit-details-marker{display:none}
.sb-baum details>summary::before,.pb-baum details>summary::before{content:"▸"}.sb-baum details[open]>summary::before,.pb-baum details[open]>summary::before{content:"▾"}
.sb-baum details>summary:focus-visible,.pb-baum details>summary:focus-visible{outline:2px solid var(--fok)}
.sb-zeile,.pb-zeile{display:block;min-height:40px;padding:.3rem .5rem;border:1px solid var(--lin);border-radius:6px;background:var(--m-grau);color:var(--tx);text-decoration:none;line-height:1.25}
.sb-zeile small,.pb-zeile small,.is-pfad small{display:block;color:var(--tx2);font-size:var(--klein);font-weight:400}
/* eine Regel für alle drei Bäume (13.11.2026): aktiv gelb, gefunden grün, alles andere grau -- das Wort steht in der Zeile */
.sb-zeile[data-farbe=gelb],.pb-zeile[data-farbe=gelb],.is-pfad[data-farbe=gelb]{background:var(--m-ge);border-color:var(--u-ge-rand)}
.sb-zeile[data-farbe=gruen],.pb-zeile[data-farbe=gruen]{background:var(--m-gr);border-color:var(--u-gr-rand)}
.sg-suche{margin:0 0 .6rem;display:flex;flex-direction:column;gap:.2rem}.sg-suche label{font-size:var(--klein);color:var(--tx2)}.sg-suche input{width:100%}
.sb-zeile[aria-current=true],.pb-zeile[aria-current=true]{outline:2px solid var(--fok);outline-offset:1px;font-weight:600}
a.sb-zeile:hover,a.pb-zeile:hover{border-color:var(--fok)}.sb-zeile.sb-ziel{outline:2px dashed var(--fok);outline-offset:2px}
table.umordnenbar tr[data-umordnen]{cursor:grab}table.umordnenbar tr.zieh-vor{box-shadow:inset 0 3px 0 var(--fok)}table.umordnenbar tr.zieh-nach{box-shadow:inset 0 -3px 0 var(--fok)}
.sb-ohne{margin-top:.7rem;display:flex;flex-direction:column;gap:.3rem}
.is-stand>*+*{margin-top:.6rem}.is-pfad{padding:.4rem .6rem;border:1px solid var(--lin);border-radius:6px;background:var(--m-grau)}
.is-pfad[data-farbe=vorschlag]{border-style:dashed}.is-ohne{margin:0;color:var(--tx2);font-size:var(--klein)}
.sg-oben{margin:0 0 .8rem}.sg-oben form{margin:0}.sg-haupt{width:100%;min-height:52px;font-size:1.1rem;font-weight:600}.sg-haupt:disabled{opacity:.45;cursor:not-allowed}
.is-knoepfe{margin:.2rem 0 0}.mitte:has(.is-stand) .karte+.karte,.rechts .karte+.karte{margin-top:.8rem}
@media (max-width:85rem){.layout.hat-links.hat-rechts:has(.sigbaum){grid-template-columns:var(--links,minmax(15rem,20rem)) minmax(0,1fr)}.layout.hat-links.hat-rechts:not(.maximal):has(.sigbaum)>.rechts{grid-column:2;grid-row:2}.layout:has(.sigbaum)>.trenner[data-seite=rechts]{display:none}}
@media (max-width:34rem){.layout.hat-links:has(.sigbaum),.layout.hat-links.hat-rechts:has(.sigbaum){grid-template-columns:minmax(0,1fr)}.layout:has(.sigbaum)>.rechts{grid-column:auto}.sb-baum ul,.pb-baum ul{margin-left:.2rem;padding-left:.2rem}.sb-baum li,.pb-baum li{padding-left:1.2rem}}
/* Scannen (12.11.2026): der Scanordner als Baum nach Standortsignatur. Stand = Farbe **und** Zeichen und Wort: grün gescannt, gelb in Arbeit, lichtgrau wartet, rot fehlgegangen. */
[data-sy=gruen]{--sy:var(--m-gr);--sy-rand:var(--u-gr-rand)}[data-sy=gelb]{--sy:var(--m-ge);--sy-rand:var(--u-ge-rand)}[data-sy=rot]{--sy:var(--m-ro);--sy-rand:var(--u-ro-rand)}[data-sy=grau]{--sy:var(--m-grau);--sy-rand:var(--lin)}
.sy-baum a[data-sy],.sy-knoten{display:block;min-height:32px;padding:.3rem .5rem;border-radius:6px;background:var(--sy);border-left:4px solid var(--sy-rand);overflow-wrap:anywhere}
.sy-baum summary{padding:.15rem .1rem}.sy-baum summary .sy-knoten,.sy-baum summary a{display:inline-block;min-width:calc(100% - 1.4rem);vertical-align:middle}
.sy-baum a[aria-current=page]{outline:2px solid var(--tun-rand);outline-offset:1px}
.sy-baum small{color:var(--tx2);font-weight:400}
.sy-marke{display:inline-block;min-width:1.1em;text-align:center;position:relative}
.sy-zahlen{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0;padding:0}.sy-zahlen li{padding:.3rem .7rem;border-radius:var(--r);background:var(--sy);border:1px solid var(--sy-rand)}
.sy-ordner{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;flex:none}.sy-zahlen,.sy-angaben{flex:none}.sy-ordner label{flex-basis:100%}.sy-ordner input{flex:1 1 12rem;min-width:0}
.sy-angaben{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.3rem .9rem;margin:.6rem 0}.sy-angaben dt{color:var(--tx2)}.sy-angaben dd{margin:0;overflow-wrap:anywhere}
.sy-bild{margin:0;padding:.4rem;border:1px solid var(--sy-rand);border-top:6px solid var(--sy-rand);background:var(--fl)}.sy-bild img{display:block;width:100%;height:auto}.sy-bild figcaption{font-size:var(--klein);padding-top:.3rem;overflow-wrap:anywhere}
.sy-leer{border:1px dashed var(--lin);max-height:60vh}
/* Arbeitsabläufe (12.11.2026): rechts die Druckvorschau als Blatt; beim Drucken zeigt die Seite nur dieses Blatt, schwarz auf weiß (Systemfarben), ohne Bänder und Spalten. */
.layout.hat-links.hat-rechts:has(.druckblatt){grid-template-columns:var(--links,minmax(17rem,22rem)) minmax(0,1fr) var(--rechts,minmax(17rem,24rem))}
.blatt{background:var(--fl);border:1px solid var(--lin);border-radius:4px;padding:1rem;box-shadow:0 1px 5px var(--lin);max-height:calc(100dvh - 20rem);min-height:14rem;overflow:auto;font-size:var(--klein)}
.blatt h3{margin:0 0 .2rem;font-size:1.05rem}.blatt h4{margin:.9rem 0 .3rem;font-size:var(--klein)}.blatt-kopf,.blatt-leer{color:var(--tx2);margin:0}
.blatt table{width:100%;border-collapse:collapse}.blatt th,.blatt td{text-align:left;padding:.15rem .35rem .15rem 0;border-bottom:1px solid var(--lin);vertical-align:top}
.druckblatt .knopfreihe{margin:0 0 .5rem}
.blatt-wahl{margin:0 0 .6rem}.blatt-wahl a[data-sy]{background:var(--sy);border-left:4px solid var(--sy-rand)}.blatt-wahl a[aria-current=page]{outline:2px solid var(--tun-rand);outline-offset:1px;font-weight:600}.blatt-wahl small{color:var(--tx2);font-weight:400}
/* Arbeiten (12.11.2026): links der Plan -- Zeitvorgabe, Vorschlag, was nicht mehr passt; je Arbeit ein Kästchen. */
.aplan label,.az-feld label{display:block;font-weight:600;margin:0 0 .25rem}.ap-zeile{display:flex;gap:.4rem}.ap-zeile select{flex:1 1 5rem;min-width:0;min-height:44px}
.ap-titel{font-size:var(--klein);margin:.9rem 0 .35rem}.ap-liste{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}.ap-liste form{margin:0}
.ap-arbeit{display:flex;align-items:baseline;gap:.5rem;width:100%;text-align:left;padding:.5rem .6rem;font-weight:400}.ap-nr{flex:none;min-width:1.2em;font-weight:700}
.ap-was{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.ap-dauer{flex:none;font-variant-numeric:tabular-nums}
.ap-summe{margin:.4rem 0 0;color:var(--tx2);font-size:var(--klein);text-align:right}.ap-leer{color:var(--tx2);margin:.6rem 0 0}
.ap-mehr,.az-mehr{margin:.5rem 0 0;font-size:var(--klein)}.ap-mehr summary,.az-mehr summary{cursor:pointer;min-height:32px;display:flex;align-items:center;color:var(--tx2)}
.ap-mehr ul{margin:.2rem 0 0;padding-left:1.1rem}.ap-mehr li{margin:.25rem 0;line-height:1.4}.ap-punkte{margin:.2rem 0 0;padding-left:1.1rem;font-size:var(--klein)}.ap-punkte li{margin:.25rem 0;line-height:1.4}
.azeit h2{margin:1.3rem 0 .4rem;font-size:1.05rem}.azeit h2:first-child{margin-top:0}.az-form{display:grid;gap:.7rem}.az-feld input{width:100%}
.az-knoepfe{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem}.az-zeile-tun{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem}.az-zeile-tun form{display:flex;gap:.3rem}.az-knoepfe button{min-height:52px;font-weight:600}.az-knoepfe button:disabled{opacity:.45;cursor:default}
.az-tab{width:100%;border-collapse:collapse}.az-tab th{text-align:left;font-size:var(--klein);font-weight:500;color:var(--tx2);padding:.2rem .6rem .2rem 0}
.az-tab td{padding:.3rem .6rem .3rem 0;border-top:1px solid var(--lin);vertical-align:middle;font-variant-numeric:tabular-nums}
.az-tab td.az-storno{text-align:right;white-space:nowrap;padding-right:0}.az-tab td:first-child,.az-tab td:nth-child(2){white-space:nowrap}[data-sofort-knopf][hidden]{display:none}.az-storno form{margin:0}.az-storno .klein{margin:0}
.az-gruppe{margin:0 0 .7rem}.az-rolle{font-size:1rem;margin:0 0 .3rem}.az-rolle small{color:var(--tx2);font-weight:400;margin-left:.4rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:34rem){.layout:has(.aplan)>.mitte{order:0}.az-tab td:first-child{white-space:normal}.az-tab td,.az-tab th{padding-right:.4rem}.az-tab td.az-gehe,.az-gehe .knopf{white-space:normal}.az-gehe .knopf{height:auto;text-align:center}}
/* schmaler: die drei Felder bleiben nebeneinander (sie scrollen je für sich; eine zweite Reihe nähme der ersten die Höhe), nur enger */
@media (max-width:85rem){.layout.hat-links.hat-rechts:has(.druckblatt){grid-template-columns:var(--links,minmax(13rem,16rem)) minmax(0,1fr) var(--rechts,minmax(13rem,16rem))}}
@media (max-width:34rem){.layout.hat-links.hat-rechts:has(.druckblatt){grid-template-columns:minmax(0,1fr)}.layout:has(.druckblatt)>.rechts{grid-column:auto}}
@media print{body:has(.druckblatt)>header,body:has(.druckblatt)>footer,body:has(.druckblatt) .sprung,body:has(.druckblatt) main>h1,body:has(.druckblatt) .links,body:has(.druckblatt) .mitte,body:has(.druckblatt) .rechts>h2,.nicht-drucken{display:none!important}
body:has(.druckblatt),body:has(.druckblatt) main{background:Canvas;margin:0;padding:0}body:has(.druckblatt) .layout{display:block}
body:has(.druckblatt) .rechts{border:0;padding:0;background:Canvas;position:static}
.blatt{color-scheme:light;background:Canvas;color:CanvasText;border:0;box-shadow:none;max-height:none;overflow:visible;padding:0;font-size:10pt}.blatt-kopf,.blatt-leer{color:CanvasText}
.blatt th,.blatt td{border-bottom:1px solid CanvasText}.blatt tr{break-inside:avoid}}
/* Schaltflächen je Knoten im Baum der Standorte (12.11.2026): Drucken, Druck wiederholen, Etikett geklebt -- klein, unter dem Knoten */
.etk-knoepfe{display:flex;flex-wrap:wrap;gap:.2rem;margin:.15rem 0 .3rem}.etk-knoepfe form{margin:0}
.etk-knoepfe button{min-height:28px;padding:.05rem .45rem;white-space:nowrap}
@media (pointer:coarse){.etk-knoepfe button{min-height:44px}}
/* Erschließen (12.11.2026): Stand im Baum mit Unterlegfarbe (Zeichen und Wort stehen im Text), rechts der Inhalt kompakt, aber vollständig */
.baum [data-stand]{box-shadow:inset 5px 0 0 var(--stand-rand);padding-left:.8rem}
.baum [data-stand=gruen]{--stand-rand:var(--u-gr-rand)}.baum [data-stand=gelb]{--stand-rand:var(--u-ge-rand)}.baum [data-stand=grau]{--stand-rand:var(--u-grau-rand)}
nav[aria-label="Schichten der Erschließung"] .baum summary>a,nav[aria-label="Schichten der Erschließung"] .baum summary>span,
nav[aria-label="Blätter ab Archiv"] .baum summary>a,nav[aria-label="Blätter ab Archiv"] .baum summary>span{display:inline-block;vertical-align:middle;min-height:0;padding:.2rem .4rem}
.schichtinhalt h2{font-size:1.05rem;margin:.2rem 0 .5rem}.schichtinhalt h3{font-size:.9rem;margin:.8rem 0 .3rem}
.schichtinhalt .volltext{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.85rem;line-height:1.4;margin:0}
dl.angaben.kompakt{display:grid;grid-template-columns:minmax(5rem,42%) minmax(0,1fr);gap:.15rem .6rem;font-size:.85rem;margin:0}
dl.angaben.kompakt dt{font-weight:600;overflow-wrap:anywhere}dl.angaben.kompakt dd{margin:0;overflow-wrap:anywhere}
ul.kompakt{font-size:.85rem;margin:0;padding-left:1.1rem}table.kompakt{font-size:.82rem}
.schichtinhalt form.karte{margin-top:.6rem}
/* unter der Druckvorschau: die Formatvorlage der Etiketten mit ihren Angaben -- so breit wie die Vorschau */
.etk-vorlage{margin:.5rem auto 0;width:calc((max(16rem,100dvh - 30.5rem) - 2rem) * var(--bw,216) / var(--bh,280));min-width:17rem;max-width:100%}
.etk-vorlage-wahl{display:flex;align-items:center;gap:.4rem}.etk-vorlage-wahl label{font-weight:600;font-size:var(--klein);flex:1 1 auto}.etk-vorlage-wahl input{width:4.2rem;flex:none}
.rechts .etk-vorlage-wahl button{width:auto;flex:none;min-height:32px;padding:.15rem .6rem}
.etk-vorlage-angaben{display:flex;flex-wrap:wrap;gap:0 .7rem;margin:.35rem 0 0;font-size:var(--klein);line-height:1.35}
.etk-vorlage-angaben div{display:flex;gap:.25rem}.etk-vorlage-angaben dt{color:var(--tx2)}.etk-vorlage-angaben dd{margin:0;font-weight:600}
/* Scannen, technischer Ablauf (12.11.2026): die Erfassungsart als Schaltflächen, die Schritte als nummerierte Kette, das technische Urteil je Datei */
.sy-arten{flex:none}.sy-arten ul.umschalter{display:flex;flex-wrap:wrap;border-radius:var(--r)}.sy-arten .umschalter li{flex:1 1 8rem}.sy-arten .umschalter button{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
.sy-ablauf{flex:none;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .8rem;padding:0;font-size:var(--klein)}
.sy-ablauf li{flex:1 1 9rem;padding:.4rem .6rem;border:1px solid var(--lin);border-radius:var(--r);background:var(--fl)}
.sy-nr{display:inline-block;min-width:1.5em;height:1.5em;line-height:1.5em;text-align:center;border-radius:999px;background:var(--tun);border:1px solid var(--tun-rand);font-weight:600}
.sy-technik{padding:.1rem .5rem;border-radius:var(--r);background:var(--sy);border:1px solid var(--sy-rand)}
.sy-text{max-height:60vh;overflow:auto;margin:0;white-space:pre-wrap}
/* Erkennen (vereinfacht, 12.11.2026): links Weiter, Play/Pause/Stopp, Fortschritt und ein knapper Baum; in der Mitte der Text -- nur Unsicheres ist markiert */
.ek-pult{display:grid;gap:.5rem;margin-bottom:.8rem}
.ek-knoepfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin:0}.ek-knoepfe .knopf{min-height:44px;text-align:center;padding:.5rem .2rem}
.knopf[aria-disabled=true]{opacity:.45;cursor:default}
.ek-fortschritt{width:100%;height:.6rem;accent-color:var(--u-gr-rand)}.ek-lage{margin:0;font-size:var(--klein);color:var(--tx2)}
.ek-baum,.ek-baum ul{list-style:none;margin:0;padding:0}.ek-baum ul{padding-left:.7rem;border-left:1px solid var(--lin);margin-left:.3rem}
.ek-baum summary{padding:.3rem .1rem;cursor:pointer}.ek-baum small{color:var(--tx2);font-weight:400}
.ek-knoten{display:block;min-height:36px;padding:.35rem .5rem;margin:2px 0;border-radius:6px;background:var(--sy);border-left:4px solid var(--sy-rand);text-decoration:none;color:var(--tx);overflow-wrap:anywhere}
.ek-baum .ek-knoten[aria-current=page]{background:var(--sy);border:0;border-left:4px solid var(--sy-rand);font-weight:400;color:var(--tx);outline:3px solid var(--tx);outline-offset:1px}.ek-knoten{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ek-stand{margin:.2rem 0 .7rem}
.ek-text{list-style:none;margin:.4rem 0 1rem;padding:0;font-size:1.05rem;line-height:1.5}
.ek-text li{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.6rem;align-items:baseline;padding:.05rem .5rem;border-left:4px solid transparent;border-radius:4px}
.ek-text li[data-sy]{background:var(--sy);border-left-color:var(--sy-rand)}.ek-text li.ek-absatz{margin-top:.8rem}
.ek-text li:target{outline:2px solid var(--tun-rand);outline-offset:1px}
.ek-zeile{white-space:pre-wrap;overflow-wrap:anywhere;text-decoration:none;color:var(--tx)}.ek-zeile:hover,.ek-zeile:focus{text-decoration:underline}
.ek-text small{color:var(--tx2);white-space:nowrap}.ek-sprache{padding:0 .35rem;border:1px solid var(--lin);border-radius:4px;background:var(--fl);color:var(--tx)}
.ek-mehr{margin-top:.6rem}
/* Erkennen auf dem Telefon (Festlegung vom 12.11.2026: „Telefontasten zuerst“): Play, Pause, Stopp und der Fortschritt stehen vor dem Text, der Baum danach */
@media (max-width:34rem){.layout.maximal:has(.ek-pult)>.links{display:contents}.layout.maximal:has(.ek-pult) .ek-pult{order:-2;margin:0;padding:.6rem;border:1px solid var(--lin);border-radius:var(--r);background:var(--fl)}
.layout.maximal:has(.ek-pult)>.links>nav{order:1;padding:.6rem;border:1px solid var(--lin);border-radius:var(--r);background:var(--fl)}}
.bt-bereich[data-sy]{stroke:var(--sy-rand)}.ek-bild{border-top:6px solid var(--sy-rand)}.ek-bild figcaption{font-size:var(--klein);padding:.3rem .4rem;overflow-wrap:anywhere}
/* Scannen als überwachter Lauf (12.11.2026): die Steuerung des Laufs, die Reihenfolge nach Zeitstempel */
.sy-lauf{flex:none;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0 .6rem}.sy-lauf .knopfreihe{margin:0}
.sy-ordner-ein{flex:none}.layout.maximal>.mitte>h2,.layout.maximal>.mitte>.karte,.layout.maximal>.mitte>.knopfreihe,.layout.maximal>.mitte>p{flex:none}
.sy-reihe{width:100%;border-collapse:collapse;font-size:var(--klein)}.sy-reihe th{text-align:left;color:var(--tx2);font-weight:600;padding:.3rem .5rem}
.sy-reihe td{padding:.3rem .5rem;border-top:1px solid var(--lin);overflow-wrap:anywhere}.sy-reihe td[data-marke=grau]{background:var(--m-grau)}
.sy-reihe a{text-decoration:none}.sy-reihe a[aria-current=page]{font-weight:700}

/* Erschließen, die Mitte (12.11.2026): die Inhalte groß und geordnet -- Reiter der Schichten, Kopf, Textpyramide von schmal bis breit, Meme als Karten, Worte als Marken */
.erschl{max-width:60rem;margin:0 auto}.erschl h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2);margin:1.4rem 0 .5rem}
.erschl-reiter{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1rem;padding:0;border-bottom:2px solid var(--lin)}
.erschl-reiter a{display:block;padding:.45rem .8rem;border-radius:8px 8px 0 0;text-decoration:none;color:var(--tx)}
.erschl-reiter a[aria-current=page]{background:var(--tun);border:1px solid var(--tun-rand);border-bottom:none;font-weight:600}
.erschl-kopf h2{font-size:1.6rem;line-height:1.2;margin:.1rem 0 .4rem}.erschl-ober{font-size:.9rem;font-weight:600;color:var(--tx2);margin:0}
.erschl-stand{font-size:.82rem;color:var(--tx2);margin:0;padding:.2rem .6rem;border-radius:6px;display:inline-block;box-shadow:inset 5px 0 0 var(--stand-rand)}
.erschl-stand[data-stand=gruen]{--stand-rand:var(--u-gr-rand);background:var(--u-gr)}.erschl-stand[data-stand=gelb]{--stand-rand:var(--u-ge-rand);background:var(--u-ge)}.erschl-stand[data-stand=grau]{--stand-rand:var(--u-grau-rand);background:var(--u-grau)}
.erschl-pyramide{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.erschl-pyramide li{background:var(--fl);border:1px solid var(--lin);border-radius:var(--r);padding:.5rem .8rem;width:100%}
.erschl-pyramide li[data-stufe="6"]{width:40%;text-align:center;font-weight:600}.erschl-pyramide li[data-stufe="5"]{width:52%;text-align:center;font-weight:600}
.erschl-pyramide li[data-stufe="4"]{width:64%}.erschl-pyramide li[data-stufe="3"]{width:76%}.erschl-pyramide li[data-stufe="2"]{width:88%}
.erschl-pyramide .erschl-stufe,.erschl-pyramide summary{display:block;font-size:var(--klein);color:var(--tx2)}.erschl-pyramide summary{cursor:pointer}
.erschl-pyramide a{color:inherit}.erschl-pyramide .volltext{white-space:pre-wrap;overflow-wrap:anywhere;margin:.15rem 0 0}.erschl-fehlt{color:var(--tx2)}
.erschl-meme{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.5rem}
.erschl-meme a{display:flex;flex-direction:column;gap:.2rem;height:100%;background:var(--fl);border:1px solid var(--lin);border-radius:var(--r);padding:.6rem .7rem;text-decoration:none;color:var(--tx)}
.erschl-meme a:hover{border-color:var(--tun-rand)}.erschl-meme small{color:var(--tx2);margin-top:auto}.erschl-meme span{font-size:.88rem;overflow-wrap:anywhere}
.erschl-worte{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}.erschl-worte li{background:var(--u-grau);border:1px solid var(--u-grau-rand);border-radius:999px;padding:.1rem .6rem;font-size:.85rem}
section[aria-label=Schlagworte] .erschl-worte li{background:var(--u-gr);border-color:var(--u-gr-rand)}
.erschl-fragen{margin:0}.erschl-fragen dt{font-weight:600;margin-top:.4rem}.erschl-fragen dd{margin:0 0 0 1rem}.erschl-leer{color:var(--tx2)}
@media (max-width:700px){.erschl-pyramide li[data-stufe]{width:100%;text-align:left}.erschl-kopf h2{font-size:1.25rem}}
table.balken{width:100%;border-collapse:collapse}table.balken th{text-align:left;font-weight:600;padding:.3rem .8rem .3rem 0;width:34%;overflow-wrap:break-word;hyphens:auto}      /* Balkenschaubild (Projektstand): Name, Balken, Wert als Text */
table.balken td.balken-bahn{padding:.3rem 0}table.balken svg{display:block;width:100%;height:.9rem}table.balken .bahn{fill:var(--lin)}table.balken .wert{fill:var(--ak)}
table.balken td.balken-text{text-align:right;white-space:nowrap;padding-left:.8rem;width:1%;font-variant-numeric:tabular-nums}
/* Exportieren (12.11.2026): der Baum der Möglichkeiten mit Unterlegfarbe je Stand -- grün erledigt, gelb in Arbeit, grau noch nicht benutzt; Zeichen und Wort stehen im Text */
nav[aria-label="Exportmöglichkeiten"] .baum [data-stand=gruen]{background:var(--m-gr)}nav[aria-label="Exportmöglichkeiten"] .baum [data-stand=gelb]{background:var(--m-ge)}
nav[aria-label="Exportmöglichkeiten"] .baum [data-stand=grau]{background:var(--m-grau)}
nav[aria-label="Exportmöglichkeiten"] .baum summary>span{display:inline-block;vertical-align:middle;padding:.2rem .4rem .2rem .8rem;border-radius:6px;font-weight:600}
nav[aria-label="Exportmöglichkeiten"] .baum small{display:block;font-weight:400}
nav[aria-label="Exportierte Dokumente"] .baum small{display:block}nav[aria-label="Exportierte Dokumente"] .baum ul{margin-left:.3rem;padding-left:.3rem}
/* Formular: ein Feld über die ganze Breite (breit) und die Wahl aus wenigen festen Möglichkeiten als sichtbare Wahlknöpfe (wahl) */
.zeile>div.breit,.zeile>fieldset.wahl{flex:1 1 100%}fieldset.wahl{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}
fieldset.wahl legend{font-weight:600;padding:0;margin-bottom:.35rem}
fieldset.wahl label{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 190px;margin:0;font-weight:400;min-height:44px;padding:.3rem .9rem;border:1px solid var(--lin);border-radius:8px;cursor:pointer}
fieldset.wahl input{width:auto;min-height:0;margin:0}fieldset.wahl label:has(input:checked){background:var(--k-rat);border-color:var(--k-rat-rand);font-weight:600}
fieldset.wahl label:has(input:focus-visible){outline:3px solid var(--fok);outline-offset:2px}

/* Mehrfachauswahl in Bäumen (12.11.2026): ein Kästchen vor jedem Knoten, im Kopf die Zahl, „Auswahl übernehmen“ und „Alle entfernen“ */
.bw-zeile{display:flex;align-items:center;gap:.35rem}.bw-zeile>a{flex:1 1 auto;min-width:0}
.bw-haken{flex:none;display:inline-flex;align-items:center}.bw-haken input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--u-gr-rand)}
.bw-kopf{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.3rem 0 .5rem}.bw-zahl{font-size:var(--klein);color:var(--tx2)}
.bw-befehle{margin:0 0 .5rem}
/* Mehrfachauswahl in jedem hierarchischen Baum (12.11.2026): ein gewählter Knoten trägt einen kräftigen Rand -- eine Form, keine Farbe; das Wort steht für Hilfsmittel dabei. */
[data-baumwahl] a[data-gewaehlt]{outline:2px solid var(--fok);outline-offset:1px;font-weight:600}
.bw-kopf button,.bw-kopf .knopf{min-height:28px;padding:.05rem .45rem;white-space:nowrap}
@media (pointer:coarse){.bw-kopf button,.bw-kopf .knopf{min-height:44px}}
.etk-druck dd{white-space:nowrap}
/* Scannen, vereinfacht (12.11.2026): eine Zeile Lauf mit einer Hauptschaltfläche und den Zahlen, „Zu tun“ nur bei Bedarf, der aktuelle Scan als Karte, das Seltene eingeklappt */
.sy-lauf{gap:.6rem}.sy-lauf .sy-zahlen{margin:0;flex:1 1 auto}.sy-lauf form{margin:0}
.sy-tun{flex:none;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 .6rem;padding:.5rem .7rem;border:1px solid var(--u-ge-rand);border-radius:var(--r);background:var(--m-ge)}.sy-tun form{margin:0}
.sy-aktuell{border-left:6px solid var(--sy-rand)}.sy-aktuell h2{margin:0 0 .4rem;font-size:1.05rem;overflow-wrap:anywhere}.sy-aktuell .sy-angaben{margin:.2rem 0 .5rem}
.sy-mehr{flex:none;margin-top:.8rem}.sy-mehr>summary{cursor:pointer;font-weight:600;overflow-wrap:anywhere}.sy-mehr .sy-ordner{margin:.6rem 0}
.sy-reihe caption{text-align:left;font-weight:600;padding:.2rem .5rem .4rem}
.layout.maximal>.mitte>.sy-arten{margin-right:2.6rem}
/* Ansehen (12.11.2026): eine Zeile zur Wahl -- das ganze Dokument, ein Blatt, eine Seite */
.an-wahl{display:flex;flex-wrap:wrap;gap:.25rem;margin:0 0 .75rem;padding:0;list-style:none}
.an-wahl a{display:inline-block;min-height:44px;line-height:44px;padding:0 .8rem;border-radius:22px;text-decoration:none;color:var(--tx);border:1px solid var(--lin);background:var(--fl)}
.an-wahl a[aria-current]{background:var(--tun);border-color:var(--tun-rand);font-weight:600}
/* Seite Suchen (Baustein scansuche, 12.11.2026): Feld und Schaltfläche in einer Zeile, darunter die Schalter; das Gefundene unterlegt in der Farbe des Rats */
.suchzeile{display:flex;gap:.6rem;align-items:flex-end}.suchzeile>div{flex:1 1 auto;min-width:0}.suchzeile button{flex:0 0 auto}
form[role=search] .umschalter-leiste{margin:.8rem 0 0}
mark{background:var(--k-rat);color:var(--tx);border-radius:3px;padding:0 .1em}
/* Etikettieren, vereinfacht (12.11.2026): eine Befehlszeile über dem Baum, je Knoten eine Zeile, eingeklappt bis auf den Weg zur Auswahl */
.etk-befehle{margin:0 0 .5rem;padding:.4rem .5rem;border:1px solid var(--lin);border-radius:var(--r);background:var(--k-neutral)}
.etk-fuer{margin:0 0 .25rem;font-size:var(--klein);color:var(--tx2);overflow-wrap:anywhere}.etk-befehle .etk-knoepfe{margin:0}
.etk-baum summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.2rem}.etk-baum summary::-webkit-details-marker{display:none}
.etk-baum summary::before{content:"▸";flex:none;width:1rem;text-align:center;color:var(--tx2)}.etk-baum details[open]>summary::before{content:"▾"}
.etk-baum summary>.bw-zeile{flex:1 1 auto;min-width:0}.etk-baum li>.bw-zeile{margin-left:1.2rem}
.bw-kopf [hidden]{display:none}
.etk-baum ul ul{margin-left:.45rem;padding-left:.1rem}.etk-baum summary::before{width:.8rem}.etk-baum li>.bw-zeile{margin-left:1rem}
/* Erschließen vereinfacht (12.11.2026): eine Zeile „Was ist jetzt dran“, ändern an Ort und Stelle, Seltenes unter Mehr, Einzelheiten eingeklappt */
.erschl-jetzt{position:sticky;top:0;z-index:2;background:var(--fl);border:1px solid var(--lin);border-radius:var(--r);padding:.6rem .8rem;margin:0 0 1rem;box-shadow:inset 6px 0 0 var(--stand-rand)}
.erschl-jetzt[data-stand=gruen]{--stand-rand:var(--u-gr-rand)}.erschl-jetzt[data-stand=gelb]{--stand-rand:var(--u-ge-rand)}.erschl-jetzt[data-stand=grau]{--stand-rand:var(--u-grau-rand)}
.erschl-ort{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.5rem}.erschl-ort small{color:var(--tx2)}.erschl-ort .knopf{min-width:2.4rem;text-align:center;padding:.2rem .5rem}
.erschl-ort .knopf.aus{opacity:.35}
.erschl-handlung{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}.erschl-handlung>span{font-weight:600;margin-right:auto;align-self:center}
.erschl-handlung form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0}.erschl-handlung form>div{display:flex;flex-direction:column}
.erschl-handlung label{font-size:var(--klein);color:var(--tx2)}.erschl-handlung input{min-width:9rem}
.erschl-handlung button.primary,.erschl-handlung a.primary{padding:.55rem 1.3rem}
.erschl-mehr{margin-top:.5rem}.erschl-mehr summary,.erschl-einzel>summary,.erschl-aendern summary{cursor:pointer;color:var(--tx2);font-size:.85rem}
.erschl-mehr-teil{border-top:1px solid var(--lin);padding:.5rem 0}.erschl-mehr-teil h4{font-size:.85rem;margin:0 0 .4rem}
.erschl-mehr-teil form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem}.erschl-mehr-teil form>div{display:flex;flex-direction:column;min-width:10rem}
.erschl-mehr-teil label{font-size:var(--klein);color:var(--tx2)}
.erschl-aendern{margin-top:.25rem;text-align:left}.erschl-aendern summary{font-size:var(--klein);display:inline-block}
.erschl-aendern form{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}.erschl-aendern textarea{width:100%;min-height:5rem}
.erschl-aendern label{font-size:var(--klein);color:var(--tx2)}.erschl-aendern button{align-self:flex-start}
.erschl-kopf .erschl-aendern{display:inline-block;margin-left:.5rem}.erschl-kopf .erschl-ober{display:inline-block}
.erschl-kopf .erschl-stand{display:block;background:none;box-shadow:none;padding:0}
.erschl-einzel{margin-top:2rem;border-top:2px solid var(--lin);padding-top:.6rem}
.erschl-pyramide li{position:relative}.erschl-pyramide li>.erschl-aendern:not([open]){position:absolute;top:.3rem;right:.6rem;margin:0}
.erschl section{position:relative}.erschl section>.erschl-aendern:not([open]){position:absolute;top:1.2rem;right:0;margin:0}
/* Bogengröße (12.11.2026: 216 × 280 mm): die Vorschau hat das Seitenverhältnis des Bogens -- Vorgabe 216 × 280, Format B (A4 quer) 297 × 210; kein style-Attribut (CSP) */
.etk-vorschau[data-bogen="216x280"],.etk-vorlage[data-bogen="216x280"]{--bw:216;--bh:280}
.etk-vorschau[data-bogen="297x210"],.etk-vorlage[data-bogen="297x210"]{--bw:297;--bh:210}
.etk-vorschau[data-bogen="210x297"],.etk-vorlage[data-bogen="210x297"]{--bw:210;--bh:297}
.bw-pfeile{display:inline-flex;align-items:center;gap:.3rem}.bw-kopf [hidden]{display:none}
nav[data-baumwahl] .bw-haken{display:inline-flex;vertical-align:middle;margin-right:.3rem}
nav[data-baumwahl] .bw-haken+a{display:inline-block;box-sizing:border-box;width:calc(100% - 1.8rem);vertical-align:middle}
nav[data-baumwahl] .bw-haken input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--u-gr-rand)}
/* Listen der Mitte mit wählbaren Zeilen (13.11.2026): das Kästchen liegt über dem Verweis, der die Zeile deckt; „Zeilen kompakt“ nimmt den Zeilen die Höhe */
table.klickbar td.zeilenwahl-zelle{position:relative;z-index:1}table.klickbar td.zeilenwahl-zelle input{position:relative;z-index:1}
@media (min-width:34rem){table.karten.liste-kompakt{border-spacing:0 2px}table.karten.liste-kompakt tbody td{padding-top:.1rem;padding-bottom:.1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26rem}
table.karten.liste-kompakt input.zeilenwahl{min-height:0;margin-block:0}}
form.listenwahl{display:none}
.etk-grund{display:flex;flex-direction:column;gap:.15rem;min-width:12rem}.etk-grund label{font-size:var(--klein);color:var(--tx2)}

/* Schaltflächen: vier Rollen (grau, rotgrau, warmes Gelb, Gelbgrün), alle gefüllt */
button,.knopf{display:inline-block;min-height:1.75rem;padding:.15rem .7rem;line-height:1.25;border-radius:6px;border:1px solid var(--k-neutral-rand);background:var(--k-neutral);color:var(--k-tx);font:inherit;font-size:var(--knopf);font-weight:500;cursor:pointer;text-decoration:none}
button.primary,.knopf.primary{background:var(--k-rat);border-color:var(--k-rat-rand)}button.bestaetigung,.knopf.bestaetigung{background:var(--k-ja);border-color:var(--k-ja-rand)}
button.gefahr,.knopf.gefahr{background:var(--k-gefahr);border-color:var(--k-gefahr-rand)}
/* Schaltflächen sind immer gefüllt (Festlegung vom 10.11.2026); „zweit“ heißt nur: die leisere Rolle, grau */
button.zweit,.knopf.zweit{background:var(--k-neutral);color:var(--k-tx);border-color:var(--k-neutral-rand)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}.knopfreihe form{display:inline;margin:0}
/* Kleine Schaltflächen in einer Tabellenzeile (Journal: Sache, Ablauf) */
.knopf.klein{min-height:32px;padding:.15rem .6rem;margin:0 .3rem .2rem 0;display:inline-flex;align-items:center}
@media (pointer:coarse){.knopf.klein{min-height:44px}}

/* Touch (Telefon, Tablet; 13.11.2026, Kolophon komplett über das WLAN auf dem Telefon): Tippflächen mindestens 44 px -- nur bei grobem Zeiger, am Rechner bleibt alles dicht.
   Verweise in Listen und Bäumen, das Symbol „Feld in eigenem Fenster“, aufklappbare Überschriften und Kästchen. */
@media (pointer:coarse){
  a.feld-knopf{display:inline-flex;align-items:center;justify-content:center;min-width:max(44px,2.75rem);min-height:max(44px,2.75rem)}
  li>a,td>a{display:inline-block;min-height:max(44px,2.75rem);padding-block:.7rem;box-sizing:border-box}
  details>summary{min-height:max(44px,2.75rem);box-sizing:border-box;padding-block:.6rem}
  input[type=checkbox],input[type=radio]{width:1.6rem;height:1.6rem}
  button,.knopf{min-height:max(44px,2.75rem);padding:.55rem 1.1rem;line-height:1.5}      /* auf Touch das volle Polster: der Text steht mittig in der 44-px-Fläche */
  .auswahl a,.baum a,.baum summary,.ek-knoten,#mf-themen a.mf-thema,.mf-werkzeug fieldset label{min-height:max(44px,2.75rem);box-sizing:border-box}
  .bw-haken{min-width:max(44px,2.75rem);min-height:max(44px,2.75rem);justify-content:center}
  .bw-haken input,nav[data-baumwahl] .bw-haken input{width:1.6rem;height:1.6rem}
  nav[data-baumwahl] .bw-haken+a{width:calc(100% - 3.4rem)}
}
/* Die Schrift auf jeder Schaltfläche ist gleich groß (Festlegung des Menschen vom 13.11.2026): ein Maß, ``--knopf`` aus dem Stilpaket -- keine Regel setzt für eine Schaltfläche eine eigene Größe */
button,.knopf,.knopf.klein,input[type=submit],input[type=button]{font-size:var(--knopf)}

/* Das Eigenschaftenmenü (Zahnrad) */
.einstellungen{position:relative;order:1;margin-left:auto}.einstellungen summary{list-style:none;display:flex;align-items:center;justify-content:center;
min-width:max(44px,2.6rem);min-height:max(44px,2.6rem);padding:0;cursor:pointer}.einstellungen summary::-webkit-details-marker{display:none}.einstellungen svg{display:block;width:1.4rem;height:1.4rem}
.einstellungen[open] summary{background:var(--tun);border-color:var(--tun-rand);color:var(--tx)}
.menue{position:absolute;right:0;top:calc(100% + 4px);min-width:19.5rem;background:var(--fl);color:var(--tx);border:1px solid var(--k-neutral-rand);border-radius:var(--r);
padding:.5rem .6rem .6rem;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.menue h2{font-size:var(--klein);font-weight:600;color:var(--tx2);margin:.2rem 0 .4rem;text-transform:none}.menue ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.menue form{margin:0}.menue button{width:100%;text-align:left}.menue button[aria-pressed=true]{background:var(--tun);border-color:var(--tun-rand);font-weight:600}
/* jeder Abschnitt ein Umschalter mit zwei oder drei Segmenten: eine Zeile, das gewählte Segment gefüllt, mit ✓ und Wort */
.menue ul.umschalter{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:2px;border:1px solid var(--k-neutral-rand);border-radius:999px;background:var(--hg)}
.menue .umschalter li{display:flex;min-width:0}
.menue .umschalter button{width:100%;min-width:0;min-height:40px;padding:.3rem .35rem;text-align:center;border:1px solid transparent;border-radius:999px;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menue .umschalter button:hover{background:var(--fl)}
.menue .umschalter button[aria-pressed=true],.menue .umschalter button[aria-checked=true]{background:var(--tun);border-color:var(--tun-rand);font-weight:600}
.menue .umschalter button:focus-visible{outline:2px solid var(--fok);outline-offset:1px}
.menue-hinweis{margin:-.2rem 0 .35rem;font-size:var(--klein);color:var(--tx2)}
.menue-abschnitt+.menue-abschnitt{margin-top:.55rem}
/* der Stärkeregler unter einem Umschalter (Glow): eine Schaltfläche, die man zieht -- links stärker, rechts schwächer */
.menue .staerke{margin-top:.35rem}.menue .staerke-regler{width:100%;text-align:center;min-height:40px;border-radius:999px;cursor:ew-resize;touch-action:none;user-select:none;
background:linear-gradient(to right,var(--hg),var(--tun));border-color:var(--tun-rand);font-weight:600;font-variant-numeric:tabular-nums}
html[data-glow=aus] .menue .staerke-regler{background:var(--hg);border-color:var(--k-neutral-rand);font-weight:400}
/* die Auswahl der Arbeitsabläufe ganz links im oberen Band: eckig, breit, beschriftet nur mit dem Namen des Ablaufs */
.ablaufwahl{position:relative;flex:0 0 auto}
.ablaufwahl summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:max(44px,2.6rem);min-width:13rem;padding:0 .7rem 0 .9rem;
border-radius:4px;border:1px solid var(--k-neutral-rand);background:var(--fl);color:var(--tx);white-space:nowrap;font-weight:600}
.ablaufwahl summary::-webkit-details-marker{display:none}.ablaufwahl-name{overflow:hidden;text-overflow:ellipsis}.ablaufwahl-pfeil{color:var(--tx2)}
.ablaufwahl[open] summary{border-color:var(--tun-rand);box-shadow:inset 0 0 0 1px var(--tun-rand)}
.ablaufwahl .menue{left:0;right:auto;border-radius:4px;min-width:100%;width:max-content;max-width:calc(100vw - 2rem)}
.ablaufwahl-liste a{display:block;padding:.6rem .8rem;border-radius:2px;color:var(--tx);text-decoration:none;min-height:44px;box-sizing:border-box}
.ablaufwahl-liste a:hover,.ablaufwahl-liste a:focus-visible{background:var(--hg)}.ablaufwahl-liste a[aria-current]{background:var(--tun);font-weight:600}
@media (max-width:34rem){.ablaufwahl summary{min-width:10rem}}
/* Die Auswahl links nennt Ablauf und Abschnitt und führt die Abschnitte (12.11.2026): im Band stehen nur noch die Schritte des Abschnitts */
.ablaufwahl-teil{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.ablaufwahl-teil::before{content:"› ";font-weight:400;color:var(--tx2)}
.ablaufwahl.mit-abschnitten .ablaufwahl-name{flex:0 0 auto;font-weight:400}.ablaufwahl.mit-abschnitten summary{justify-content:flex-start;gap:.4rem}.ablaufwahl.mit-abschnitten .ablaufwahl-pfeil{margin-left:auto;padding-left:.6rem}
.ablaufwahl-liste .menue-abschnitt h2{margin:.2rem .8rem .2rem}.ablaufwahl-abschnitte a[data-naechster]{box-shadow:inset 3px 0 0 var(--tun-rand)}
.ablaufwahl-liste .menue-abschnitt+.menue-abschnitt{border-top:1px solid var(--lin);padding-top:.4rem}
/* Ein aufgeklapptes Menü, das nicht ins Fenster passt: mit Skript wird es verkleinert, bis sein ganzer Inhalt zu sehen ist (menue.js); ohne Skript scrollt es in sich */
.menue{max-height:calc(100dvh - 6rem);overflow-y:auto}
/* das Menü gehört zum Kopf: der liegt über dem Fuß, sonst deckten die Bänder unten das Ende des Menüs zu */
header{z-index:6}

/* Dokumentation (12.11.2026): das Schaubild (ui.schaubild) und der geschriebene Text eines Schritts. Jede Art von Knoten hat Form und Farbe; die Farben sind die vier Unterlegfarben. */
.schaubild{margin:0 0 1rem}.schaubild svg{display:block;max-width:100%;height:auto;min-width:36rem;margin:0 auto}
.schaubild figcaption{margin-top:.6rem;color:var(--tx2);font-size:var(--klein)}.schaubild figcaption p{margin:0 0 .4rem;max-width:60rem}
.sb-knoten :is(rect,path){fill:var(--u-grau);stroke:var(--u-grau-rand);stroke-width:1.5}
.sb-mensch :is(rect,path){fill:var(--u-ge);stroke:var(--u-ge-rand)}
.sb-speicher :is(rect,path){fill:var(--u-gr);stroke:var(--u-gr-rand)}
.sb-grenze :is(rect,path){fill:var(--u-ro);stroke:var(--u-ro-rand)}
.sb-aussen :is(rect,path){fill:var(--fl);stroke:var(--tx2);stroke-dasharray:5 4}
.sb-schritt :is(rect,path){fill:var(--fl);stroke:var(--u-grau-rand)}
.sb-knoten .sb-deckel{fill:none}
.sb-titel{font-size:15px;font-weight:600;fill:var(--tx);text-anchor:middle}.sb-text{font-size:13.5px;fill:var(--tx2);text-anchor:middle}
.sb-kante{fill:none;stroke:var(--tx2);stroke-width:1.5}.sb-strich{stroke-dasharray:6 4}.sb-spitze{fill:var(--tx2)}
.sb-wort{font-size:13px;fill:var(--tx);text-anchor:middle;paint-order:stroke;stroke:var(--fl);stroke-width:5px;stroke-linejoin:round}
.schaubild a{cursor:pointer}.schaubild a .sb-titel{text-decoration:underline}
.schaubild a:is(:hover,:focus-visible) .sb-knoten :is(rect,path):not(.sb-deckel){stroke:var(--fok);stroke-width:2.5}.schaubild a:focus-visible{outline:none}
.schaubild a[aria-current] .sb-knoten :is(rect,path){fill:var(--tun);stroke:var(--tun-rand);stroke-width:2.5}
.sb-legende{margin:.2rem 0 0;font-size:var(--klein)}.sb-legende svg{flex:none;min-width:0;margin:0}
.doku-text{max-width:60rem}.doku-kern{font-size:1.1rem;font-weight:600;line-height:1.45;margin:0 0 .6rem}
.doku-text h3{font-size:1rem;margin:1.1rem 0 .3rem}.doku-text p{margin:0 0 .4rem}.doku-text ul{margin:.3rem 0 .4rem 1.2rem;padding:0}.doku-text li{margin:0 0 .2rem}
/* Markdown-Editor (Arbeitsgang Konzeption): ein natives Textfeld, das das rechte Feld füllt */
.mded{display:flex;flex-direction:column;gap:.35rem;min-height:0;flex:1 1 auto}.mded-stand{margin:0 0 .3rem;font-size:var(--klein);color:var(--tx2);overflow-wrap:anywhere}.mded-stand strong{color:var(--tx);font-size:1rem}
.mded label{font-weight:600;font-size:var(--klein)}.mded textarea{flex:1 1 auto;min-height:16rem;width:100%;box-sizing:border-box;font-family:var(--mono);font-size:var(--klein);line-height:1.5;resize:vertical;background:var(--fl);color:var(--tx);border:1px solid var(--lin);border-radius:var(--r);padding:.6rem}
.mded input:not([type=hidden]){width:100%;box-sizing:border-box}.mded .knopfreihe{margin:.3rem 0 0}
nav[aria-label="Gliederung der Konzeption"] .baum summary>a{display:inline-block;vertical-align:middle;min-height:0;padding:.2rem .4rem}nav[aria-label="Gliederung der Konzeption"] .baum summary{min-height:0;padding:.15rem .2rem}nav[aria-label="Gliederung der Konzeption"] .baum li>a{min-height:0;padding:.2rem .4rem;font-size:var(--knapp)}
/* Überall (Festlegungen des Menschen vom 12.11.2026): **jeder hierarchische Baum links** auf lichtem Grüngelb, **jedes Textfeld rechts** auf lichtem Gelb -- und **nachts dunkel**: die Werte stehen im Stilpaket (``feld-…``, hell und nacht), die Schrift ist ``feld-tx``; das Feld färbt auch, was darin ``--fl`` nutzt */
.layout.layout>.links:has(:is(.baum,.etk-baum,.pb-baum,.sb-baum,.sigbaum)){background:var(--feld-gruen);border-color:var(--feld-gruen-rand);color:var(--feld-tx);--tx:var(--feld-tx);--tx2:var(--feld-tx);--lin:var(--feld-gruen-rand);--fl:var(--feld-gruen)}
.layout.layout>.rechts:has(:is(.mded,.mf-text,.blatt,textarea)){background:var(--feld-gelb);border-color:var(--feld-gelb-rand);color:var(--feld-tx);--tx:var(--feld-tx);--tx2:var(--feld-tx);--lin:var(--feld-gelb-rand);--fl:var(--feld-gelb)}
.layout.layout>.links:has(:is(.baum,.etk-baum,.pb-baum,.sb-baum,.sigbaum)) :is(a,summary,h2,label,small),.layout.layout>.rechts:has(:is(.mded,.mf-text,.blatt,textarea)) :is(h2,label,p){color:var(--feld-tx)}
@media print{.mf-text.mt-blatt{color-scheme:light;background:Canvas;color:CanvasText;border-color:GrayText}}
/* Eingabefenster des Second Brain (Baustein gespraech): unter der Karte, die jüngsten Wortwechsel und das Feld für Frage oder Korrektur */
.gespraech{flex:none;margin:.6rem 0 0;background:var(--fl);border:1px solid var(--lin);border-radius:var(--r);padding:.7rem .9rem;max-height:46%;overflow:auto}.gespraech h2{font-size:1rem;margin:0 0 .5rem}
.gs-wechsel{border-top:1px solid var(--lin);padding:.5rem 0}.gs-wechsel p{margin:0 0 .3rem}.gs-kopf,.gs-angaben,.gs-belege-kopf{font-size:var(--klein);color:var(--tx2)}.gs-frage{font-weight:600}.gs-antwort{white-space:pre-wrap}
.gs-belege{margin:0 0 .3rem 1.1rem;padding:0;font-size:var(--klein)}.gs-form{display:flex;flex-direction:column;gap:.35rem;padding-bottom:.6rem}.gs-form label{font-weight:600;font-size:var(--klein)}
.gs-form textarea{min-height:4.2rem;width:100%;box-sizing:border-box}.gs-zeile{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}.gs-zeile>div{flex:1 1 12rem}.gs-zeile input{width:100%;box-sizing:border-box}
.gs-form fieldset.wahl{display:flex;flex-wrap:wrap;gap:.4rem;border:0;padding:0;margin:0;flex:0 1 auto}.gs-form fieldset.wahl legend{font-weight:600;font-size:var(--klein);padding:0}.gs-form fieldset.wahl label{font-weight:400;padding:.2rem .5rem}
.gs-fokus{margin:0 0 .5rem;padding:.4rem .6rem;border-left:4px solid var(--u-gr-rand);background:var(--u-gr);white-space:pre-wrap}
/* Dokumentation (Festlegung des Menschen vom 13.11.2026): in der Mitte nur die Präsentation, links die Erklärung -- gerendert, auf lichtgelbem Grund (die Farben des Blatts), in einer Spalte, die sich lesen lässt */
.layout.layout>.links:has(.doku-erklaerung){background:var(--feld-gelb);border-color:var(--feld-gelb-rand);color:var(--feld-tx);--tx:var(--feld-tx);--tx2:var(--feld-tx);--lin:var(--feld-gelb-rand);--fl:var(--feld-gelb)}
.layout.layout>.links:has(.doku-erklaerung) :is(a,summary,h2,h3,p,li,small){color:var(--feld-tx)}
.layout.hat-links:has(.doku-erklaerung){grid-template-columns:minmax(18rem,28rem) minmax(0,1fr)}
.doku-erklaerung{max-width:none}.doku-erklaerung .doku-kern{font-size:1.05rem;margin:.2rem 0 .5rem}.doku-erklaerung h3{font-size:1rem;margin:.7rem 0 .15rem}
.doku-erklaerung p{margin:0 0 .4rem;line-height:1.45}.doku-erklaerung ul{margin:.2rem 0 .5rem;padding-left:1.1rem}.doku-erklaerung li{margin:.1rem 0}
/* die Erklärung scrollt in sich; die eingeklappten Abschnitte darunter (Teile dieses Schritts, Alle Schritte) bleiben am unteren Rand des Feldes sichtbar */
@media (min-width:34rem){.layout>.links:has(.doku-erklaerung){display:flex;flex-direction:column;overflow:hidden}
.layout>.links:has(.doku-erklaerung)>.feld-knopf{align-self:flex-end;flex:none}.layout>.links:has(.doku-erklaerung)>details.akk{flex:0 0 auto}.layout>.links:has(.doku-erklaerung)>details.akk[open]{flex:1 1 auto;min-height:0;overflow:auto}}
/* Konzeption (13.11.2026): das PDF im rechten Feld -- seine Werkzeuge bleiben eine Reihe; Fragen und Editor als Falten im linken Feld füllen dessen Breite */
.rechts .pdf-werkzeug.knopfreihe{flex-direction:row;flex-wrap:wrap;align-items:center}.rechts .pdf-werkzeug.knopfreihe button{width:auto;flex:0 1 auto}
.links .gespraech{max-height:none;margin:0;border:0;padding:0;background:none}.links .gespraech .gs-zeile>div{flex:0 0 auto}.links .gespraech fieldset.wahl label{flex:1 1 0}
@media (pointer:fine){.links .gespraech fieldset.wahl label{min-height:0;padding:.25rem .5rem}}
.links .gespraech .gs-zeile{flex-direction:column;align-items:stretch}.links .gespraech textarea,.links .gespraech input:not([type=radio]):not([type=hidden]),.links .mded textarea{width:100%;box-sizing:border-box}
.links .mded textarea{min-height:18rem}
/* der Editor im rechten Feld (Umschalter Ansicht | Bearbeiten, 13.11.2026) schrumpft nicht: das Feld scrollt, und die Eigenschaften am unteren Rand liegen nie über „Ablegen“ */
.rechts>form.mded{flex:0 0 auto}.rechts>form.mded textarea{min-height:20rem}
/* Angaben im schmalen linken Feld (Vorschau des Kontexts, 13.11.2026): Name und Wert untereinander, die Karte nur so hoch wie ihr Inhalt */
.layout>.links .karte:has(>dl.def){height:auto;flex:0 0 auto}.layout>.links dl.def{display:block;margin:0}.layout>.links dl.def dt{margin:.45rem 0 0;font-size:var(--klein);font-weight:600;color:var(--tx2)}
.layout>.links dl.def dt:first-child{margin-top:0}.layout>.links dl.def dd{margin:0;overflow-wrap:anywhere}

/* Lesefokus (lesefokus.js): der gewählte Abschnitt der Ansicht wird wie von einem Licht aufgehellt -- ein weicher Verlauf von links, der langsam verblasst */
.md-ansicht .md-licht{border-radius:var(--r);margin:0 -.4rem;padding:.2rem .4rem;animation:md-licht 3.2s ease-out 1}
@keyframes md-licht{
  0%{background:linear-gradient(100deg,color-mix(in srgb,var(--puls) 0%,transparent) 0%,color-mix(in srgb,var(--puls) 0%,transparent) 100%)}
  20%{background:linear-gradient(100deg,color-mix(in srgb,var(--puls) 85%,transparent) 0%,color-mix(in srgb,var(--puls) 45%,transparent) 55%,color-mix(in srgb,var(--puls) 0%,transparent) 100%)}
  100%{background:linear-gradient(100deg,color-mix(in srgb,var(--puls) 0%,transparent) 0%,color-mix(in srgb,var(--puls) 0%,transparent) 55%,color-mix(in srgb,var(--puls) 0%,transparent) 100%)}
}
@media (prefers-reduced-motion:reduce){.md-ansicht .md-licht{animation:none}}
.md-ansicht .md-leer{margin:0;padding:0;border:0;pointer-events:none}      /* der leere Bereich vorn und hinten (lesefokus.js): Platz zum Rollen, nichts zu sehen */

/* Die GPU-Ansicht: Werkzeuge, Bühne, Beschriftungen, Angaben und Text des Datenpunkts */
.mf-werkzeug{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:end;margin:0 0 .8rem}
.mf-werkzeug fieldset{border:1px solid var(--lin);border-radius:8px;padding:.2rem .7rem;margin:0}.mf-werkzeug legend{font-size:.8rem;color:var(--tx2)}
.mf-werkzeug fieldset label{display:inline-flex;align-items:center;gap:.35rem;margin:0 .6rem 0 0;font-weight:400;min-height:36px}
.mf-werkzeug fieldset input{width:auto;min-height:0}.mf-werkzeug select,.mf-werkzeug input[type=search]{width:auto;min-width:12rem}
.mf-werkzeug button[aria-pressed=true]{background:var(--tun);border-color:var(--tun-rand);color:var(--tx);font-weight:600}
.mf-buehne{position:relative;border:1px solid var(--lin);border-radius:var(--r);background:radial-gradient(ellipse at center,var(--mitte-innen) 0%,var(--mitte-aussen) 100%);overflow:hidden;aspect-ratio:16/10;max-height:78vh;touch-action:none}
.mf-buehne:focus-visible{outline:3px solid var(--fok);outline-offset:2px}.mf-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.mf-label{position:absolute;left:0;top:0;pointer-events:none;font:1.0625rem var(--schrift);color:var(--tx);padding:0 .3rem;white-space:nowrap;will-change:transform;text-shadow:0 0 2px var(--fl),0 0 2px var(--fl),0 0 4px var(--fl),0 0 6px var(--fl)}      /* durchsichtig: ein Saum statt eines Untergrunds -- Kanten laufen unter der Schrift */
.mf-titel{margin-top:0}.mf-farbe{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;vertical-align:baseline}
.mf-label.fokus{font-weight:700}
.mf-label.hinten,.mf-strich.hinten{opacity:.7}      /* im Hintergrund: Schrift und Schatten gleichmäßig leicht durchsichtiger */
.mf-strich{position:absolute;left:0;top:0;height:0;border-top:1.5px solid var(--tx);transform-origin:0 50%;pointer-events:none;will-change:transform;filter:drop-shadow(0 0 2px var(--fl))}      /* der Gedankenstrich am Ende einer Beschriftung: weist zum Datenpunkt */
.mf-strich[hidden]{display:none}
.mf-kante{position:absolute;left:0;top:0;pointer-events:none;font:500 .9375rem var(--schrift);letter-spacing:.02em;color:var(--kante-schrift);white-space:nowrap;will-change:transform;transform-origin:0 0;text-shadow:0 0 4px var(--kante-glow),0 0 8px var(--kante-glow),0 0 13px var(--kante-glow),0 0 19px var(--kante-glow),0 0 26px var(--kante-glow)}      /* Kantenbeschriftung: weiß, mit dunklem Schatten **zentral hinter den Buchstaben**, ohne Versatz und groß (bis 26 px) und weich -- kein enger Saum, der die feinen Striche grau macht (Festlegungen des Menschen vom 12.11.2026); läuft an der Mittelachse der Kante entlang, die Füße der Buchstaben nach unten */
.mf-kante.gewaehlt{font-size:1.0625rem;font-weight:600}
#mf-themen{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}#mf-themen a.mf-thema{display:block;min-height:36px;padding:.35rem .5rem;border-radius:6px;text-decoration:none;overflow-wrap:anywhere}
#mf-themen a.mf-thema:hover{background:color-mix(in srgb,var(--tun) 40%,transparent)}#mf-themen a.mf-thema[aria-current]{background:var(--tun);border:1px solid var(--tun-rand);color:var(--tx);font-weight:600}
#mf-info{display:flex;flex-direction:column;gap:.6rem;min-height:0}#mf-info[hidden]{display:none}
.mf-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--knapp);line-height:1.5;max-height:22rem;overflow:auto;padding:.6rem .7rem;background:var(--hg);border:1px solid var(--lin);border-radius:8px}
.mf-angaben{font-size:var(--klein)}.mf-titel{margin:0;font-size:1.05rem}
.layout.maximal .mf-buehne{aspect-ratio:auto;max-height:none;flex:1 1 0;min-height:10rem}
/* Die Ansicht füllt den Fensterbereich der Mitte; die Mitte scrollt nur, wenn selbst das Mindestmaß nicht passt */
.layout.maximal .mitte-feld{overflow:hidden}
@media (max-width:34rem){.mf-buehne{aspect-ratio:3/4}.mf-werkzeug select,.mf-werkzeug input[type=search]{width:100%}.layout.maximal .mf-buehne{flex:none;aspect-ratio:auto;height:clamp(16rem,calc(100svh - 24rem),110vw)}}
.mitte.hat-stapel>.mitte-feld>.mf-buehne,.mitte.hat-stapel>.mitte-feld>svg{flex:1 1 auto}

/* Akkordeon im linken Feld (ohne Skript: details mit gleichem name; ein Abschnitt offen) */
.akk{border-bottom:1px solid var(--lin)}.akk>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.5rem;font-weight:600;list-style:none;padding:.2rem .1rem}
.akk>summary::-webkit-details-marker{display:none}.akk>summary::before{content:"▸";display:inline-block;width:1rem;transition:transform .15s}
.akk[open]>summary::before{transform:rotate(90deg)}.akk>summary:focus-visible{outline:3px solid var(--fok);outline-offset:-3px}
.akk-inhalt{padding:.2rem .1rem .8rem}.akk[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.akk>summary::before{transition:none}}
/* Im linken Feld ist jede Falte eine Schaltfläche mit Symbol und Text (Festlegung des Menschen vom 13.11.2026): gefüllt, mit Rand wie die Falten im Stapel;
   vorn das Symbol der Falte (data-symbol), hinten das Zeichen für zu und offen; die offene ist unterlegt wie alles Gewählte. Höhe: 91-knoepfe-kompakt.css. */
.layout>.links .akk{border-bottom:0;margin:0 0 .35rem}
.layout>.links .akk>summary{border:1px solid var(--lin);border-radius:var(--r);background:var(--fl);color:var(--tx);padding:.2rem .6rem;font-size:var(--knopf,1rem)}
.layout>.links .akk>summary::before{content:attr(data-symbol);width:1.2rem;text-align:center;flex:none;transition:none;transform:none}
.layout>.links .akk[open]>summary::before{transform:none}
.layout>.links .akk>summary::after{content:"▸";margin-left:auto;padding-left:.4rem;flex:none}.layout>.links .akk[open]>summary::after{content:"▾"}
.layout>.links .akk[open]>summary{background:var(--k-rat);border-color:var(--k-rat-rand);margin-bottom:.35rem}
.layout.maximal .mf-text{max-height:none}
/* Zähler im linken Feld des Raums: dicht, damit das Akkordeon darunter ohne Scrollen erreichbar bleibt */
.layout.maximal>.links .zahlen{gap:.3rem;margin:0 0 .5rem}.layout.maximal>.links .zahl{flex:1 1 7rem;padding:.25rem .5rem;font-size:var(--klein);line-height:1.3}
.layout.maximal>.links .zahl b{display:inline;font-size:1.05rem;margin-right:.25rem}
[data-glow-knopf]{touch-action:none;user-select:none;min-width:5.5rem}
[data-beschr-knopf]{touch-action:none;user-select:none;white-space:nowrap;padding-inline:.2rem}
/* Der Inhalt des gewählten Datenknotens im rechten Feld (12.11.2026): groß der Titel, der Text als Blatt -- schwarz auf lichtem Gelb --, Regler für die Kürze, Drucken, PDF */
.mt .mf-titel{font-size:1.4rem;line-height:1.25;font-weight:600}
.mt-werkzeug{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center}.mt-werkzeug[hidden]{display:none}
.mt-regler{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;flex:1 1 13rem;font-size:var(--klein)}.mt-regler[hidden]{display:none}
.mt-regler input{flex:1 1 8rem;min-width:6rem;min-height:28px;accent-color:var(--ak)}.mt-regler output{color:var(--tx2)}
.mt-knoepfe{display:flex;gap:.4rem;margin-left:auto}.rechts .mt-knoepfe button,.rechts .mt-knoepfe .knopf{width:auto;min-height:36px;padding:.25rem .8rem}
.mf-text.mt-blatt,.layout.maximal .mf-text.mt-blatt{background:var(--blatt);color:var(--blatt-tx);border:1px solid var(--blatt-rand);border-radius:var(--r);padding:1rem 1.15rem;font-size:1.06rem;line-height:1.6}
.mt-stufenwort{margin:0 0 .3rem;font-size:var(--klein);font-weight:600}.mt-stufenwort small{font-weight:400}.mt-geregelt .mt-stufenwort{display:none}
.mt-stufe[hidden]{display:none}.mt-stufe+.mt-stufe{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--blatt-rand)}.mt-geregelt .mt-stufe+.mt-stufe{margin-top:0;padding-top:0;border-top:0}
@media print{body:has(.mt-blatt)>header,body:has(.mt-blatt)>footer,body:has(.mt-blatt) .sprung,body:has(.mt-blatt) .links,body:has(.mt-blatt) .mitte,body:has(.mt-blatt) .trenner,body:has(.mt-blatt) .feld-knopf,body:has(.mt-blatt) .feld-leiste,body:has(.mt-blatt) .mt>h2,body:has(.mt-blatt) .mt .akk:not(:has(.mt-blatt)),body:has(.mt-blatt) .mt .akk>summary,body:has(.mt-blatt) .mt-werkzeug{display:none!important}
body:has(.mt-blatt),body:has(.mt-blatt) main{background:Canvas;margin:0;padding:0;height:auto;overflow:visible}body:has(.mt-blatt) .layout{display:block;height:auto;overflow:visible}
body:has(.mt-blatt) .rechts{display:block!important;border:0;padding:0;background:Canvas;position:static;overflow:visible;max-height:none}
.mf-text.mt-blatt,.layout.maximal .mf-text.mt-blatt{border:0;background:Canvas;color:CanvasText;padding:0;font-size:11pt;max-height:none;overflow:visible}.mt .mf-titel{color:CanvasText;font-size:15pt}@page{margin:18mm}}
/* Ladesymbol der Wissenskarte (13.11.2026): ein drehender Ring über der Bühne, solange die Karte lädt oder angeordnet wird; kein Text (Meldungen stehen in der Statuszeile) */
.mf-lade{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--fl) 30%,transparent);cursor:progress}
.mf-lade[hidden]{display:none}
.mf-lade-ring{width:3.2rem;height:3.2rem;border-radius:50%;border:.32rem solid color-mix(in srgb,var(--tx2) 28%,transparent);border-top-color:var(--tx);animation:mf-drehen 1s linear infinite}
@keyframes mf-drehen{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mf-lade-ring{animation:none}}

/* Die Anmeldung über dem Bild von Seite 1 des Kolophon-Vortrags (kos_demo/praesentationen/kolophon-umweltbibliothek/kolophon-vortrag/01-titel.html):
   der Schriftzug Kolophon und das Pixelband -- farbige Quadrate über dem Farbverlauf des Bandes, einige decken ab, einige halb. Ohne Skript, nur Tokens. */
.anmelde-buehne{position:relative;isolation:isolate;min-height:min(72dvh,42rem);display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1rem;padding-block:1.5rem}
.anmelde-grund{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;gap:1.4rem;pointer-events:none;overflow:hidden}
.anmelde-wort{font-weight:400;font-size:clamp(3.4rem,13vw,10.5rem);line-height:.9;letter-spacing:-.045em;color:var(--tx);opacity:.88;white-space:nowrap}
.pixelband{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));background:var(--band);border:1px solid var(--lin)}
.pixelband i{aspect-ratio:1;background:var(--hg);animation:deckauf 1.2s both}
.pixelband i.b{--o:.55}.pixelband i.k{animation:none}
.pixelband .d1{animation-delay:.4s}.pixelband .d2{animation-delay:.7s}.pixelband .d3{animation-delay:1s}.pixelband .d4{animation-delay:1.3s}
.pixelband .d5{animation-delay:1.6s}.pixelband .d6{animation-delay:1.9s}.pixelband .d7{animation-delay:2.2s}
@keyframes deckauf{0%{opacity:1}100%{opacity:var(--o,0)}}
/* Das Anmeldefeld als Glas, mit Transparenzen verschiedener Art (Festlegung des Menschen vom 10.11.2026):
   1 Milchglas -- was dahinter liegt, verschwimmt (backdrop-filter); 2 Lasur -- die Fläche selbst ist nur zum Teil gedeckt;
   3 Lichtkante -- oben ein heller, durchscheinender Rand, unten ein dunklerer; 4 Farbschleier -- ein Hauch des Bandverlaufs über dem Glas;
   5 Felder -- klarer als die Karte, beim Schreiben gedeckt; 6 Knopf -- durchscheinend getönt, beim Zeigen satter; 7 Schatten -- weich und durchsichtig.
   Ohne Milchglas im Browser (oder bei „mehr Kontrast“) wird die Lasur dichter: lesbar bleibt es immer. */
.anmelde-karte{position:relative;isolation:isolate;overflow:hidden;width:min(100%,24rem);margin:5rem clamp(0rem,4vw,3rem) 0 0;
  background:color-mix(in srgb,var(--fl) 52%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid color-mix(in srgb,var(--fl) 55%,transparent);border-bottom-color:color-mix(in srgb,var(--tx) 14%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fl) 85%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--tx) 6%,transparent),
    0 .6rem 2.2rem color-mix(in srgb,var(--tx) 16%,transparent),0 .1rem .3rem color-mix(in srgb,var(--tx) 10%,transparent)}
.anmelde-karte::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--band);opacity:.14;pointer-events:none}
.anmelde-karte::after{content:"";position:absolute;inset:0 0 auto;height:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--fl) 40%,transparent),transparent)}
.anmelde-karte label{color:var(--tx)}
.anmelde-karte input{background:color-mix(in srgb,var(--fl) 62%,transparent);border-color:color-mix(in srgb,var(--tx) 22%,transparent);transition:background .2s ease}
.anmelde-karte input:hover{background:color-mix(in srgb,var(--fl) 78%,transparent)}
.anmelde-karte input:focus{background:var(--fl)}
.anmelde-karte button{background:color-mix(in srgb,var(--tun) 72%,transparent);border-color:color-mix(in srgb,var(--tun-rand) 70%,transparent);color:var(--tx);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s ease}
.anmelde-karte button:hover,.anmelde-karte button:focus-visible{background:var(--tun);border-color:var(--tun-rand)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.anmelde-karte,.anmelde-hinweis{background:color-mix(in srgb,var(--fl) 90%,transparent)}}
@media (prefers-contrast:more){.anmelde-karte,.anmelde-hinweis{background:var(--fl);-webkit-backdrop-filter:none;backdrop-filter:none}.anmelde-karte::before,.anmelde-karte::after{display:none}}
@media (prefers-reduced-motion:reduce){.anmelde-karte input,.anmelde-karte button{transition:none}}
.anmelde-hinweis{max-width:24rem;margin-right:clamp(0rem,4vw,3rem);text-align:center;padding:.35rem .7rem;border-radius:999px;
  background:color-mix(in srgb,var(--hg) 40%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--fl) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.pixelband i{animation:none;opacity:0}.pixelband i.b{opacity:.55}.pixelband i.k{opacity:1}}
@media (max-width:34rem){.pixelband{grid-template-columns:repeat(8,minmax(0,1fr))}.pixelband i:nth-child(n+33){display:none}.anmelde-wort{font-size:clamp(3rem,19vw,6rem)}
.anmelde-buehne{align-items:stretch;justify-content:flex-start;min-height:0}.anmelde-grund{position:relative;inset:auto;gap:1rem}
.anmelde-karte{width:auto;margin:-7rem .8rem 0}.anmelde-hinweis{max-width:none;margin:0 .8rem;border-radius:var(--r)}}

/* Vortrag und Fernbedienung (kos.vortrag, kos.fern; 13.11.2026): die Anzeige mit dem Rahmen und dem QR-Code, die Fernbedienung für das Telefon. Farben nur als var(--…). */
.vortrag-liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.vortrag-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}
.vortrag-pfad{color:var(--tx2);font-size:var(--klein,.9rem)}
.vortrag-flaeche{display:flex;gap:1rem;align-items:stretch;width:100%}
.vortrag-rahmen{flex:1 1 auto;min-width:0;width:100%;height:calc(100dvh - 11rem);min-height:24rem;border:1px solid var(--lin);border-radius:.4rem;background:var(--fl)}
.vortrag-fern{flex:0 0 15rem;display:flex;flex-direction:column;gap:.5rem;padding:.6rem;border:1px solid var(--lin);border-radius:.4rem;background:var(--fl);overflow:auto}
.vortrag-fern h2{margin:0}
.vortrag-qr{display:block;width:100%;height:auto;max-width:13rem;margin:0 auto;border:1px solid var(--lin)}
.vortrag-code{margin:0;font-size:1.1rem}.vortrag-code strong{letter-spacing:.12em}
.vortrag-code-wort{color:var(--tx2)}
.vortrag-adresse{margin:0;font-size:var(--klein,.9rem);overflow-wrap:anywhere}
@media (max-width:800px){.vortrag-flaeche{flex-direction:column}.vortrag-rahmen{height:70dvh;min-height:18rem}.vortrag-fern{flex-basis:auto}}
.fern{display:flex;flex-direction:column;gap:1rem;max-width:30rem;margin:0 auto}
.fern-titel{margin:0;padding:.6rem .8rem;border:1px solid var(--lin);border-radius:.4rem;background:var(--fl);font-size:1.05rem;overflow-wrap:anywhere}
.fern-warnung{margin:0;padding:.5rem .8rem;border-radius:.4rem;border:1px solid var(--k-gefahr-rand);background:var(--k-gefahr);color:var(--k-tx)}
.fern-knoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.fern-knopf{min-height:56px;touch-action:manipulation}
.fern-gross{grid-column:span 3;min-height:6.5rem;font-size:1.6rem}
.fern-knopf[aria-busy="true"]{opacity:.7}
.fern-eingabe{display:flex;flex-direction:column;gap:.7rem;max-width:24rem;margin:0 auto}
.fern-eingabe input{min-height:56px;font-size:1.4rem;letter-spacing:.18em;text-transform:uppercase}

/* Bäume im linken Feld: kompakt, vor allem in der Höhe (Festlegung des Menschen vom 13.11.2026: „Alle hierarchischen Baumdarstellungen in Panel Links
   sollen vor allem in der Höhe wesentlich kompakter dargestellt werden“). Eine Stelle für alle Baumarten -- .baum (Gliederung, Scans, Export, Sache),
   .etk-baum (Standorte), .sb-baum und .pb-baum (Signieren), .sy-baum, .ek-baum (Erkennen). Nur mit feinem Zeiger (Maus): auf dem Telefon bleiben die
   Tippflächen 44 px hoch (40-knoepfe.css, pointer:coarse). */
/* Sprungmarke vor jedem Baum mit Mehrfachauswahl: für Hilfsmittel und Tastatur da, sichtbar erst im Fokus (baumwahl.js nimmt sie heraus, wo das Skript läuft) */
.baum-sprung{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.baum-sprung:focus{position:static;width:auto;height:auto;clip:auto;display:inline-block;margin:.2rem 0 .3rem;padding:.15rem .5rem;border:1px solid var(--lin);border-radius:var(--r);background:var(--fl)}
.baum-ende{display:block;width:1px;height:1px;margin:0 0 -1px;overflow:hidden}
@media (pointer:fine){
.layout>.links :is(.baum,.etk-baum,.sb-baum,.pb-baum,.sy-baum,.ek-baum) li{margin-top:0;margin-bottom:0}
.layout>.links :is(.baum,.etk-baum,.sb-baum,.pb-baum,.sy-baum,.ek-baum) li+li{margin-top:1px}
.layout>.links :is(.baum,.etk-baum,.sb-baum,.pb-baum,.sy-baum,.ek-baum) :is(ul,details){margin-top:0;margin-bottom:0}
.layout>.links :is(.baum,.etk-baum,.sy-baum,.ek-baum) :is(a,summary,summary>a,summary>span,.sy-knoten,.ek-knoten){min-height:0;padding-top:.05rem;padding-bottom:.05rem;line-height:1.3}
.layout>.links :is(.sb-zeile,.pb-zeile){min-height:0;padding:.05rem .45rem;line-height:1.3}
.layout>.links :is(.sb-baum,.pb-baum) details>summary{height:1.5rem;line-height:1.5rem}
.layout>.links :is(.baum,.etk-baum,.sb-baum,.pb-baum,.sy-baum,.ek-baum) small{display:inline;margin-left:.3rem}      /* die Angabe zum Knoten steht in derselben Zeile, nicht darunter */
.layout>.links :is(.baum,.etk-baum,.sb-baum,.pb-baum,.sy-baum,.ek-baum) .bw-haken input{width:1rem;height:1rem;min-height:0}      /* die Mindesthöhe der Eingabefelder (44 px) gilt nicht für das Kästchen im Baum */
.layout>.links .bw-kopf{margin:.15rem 0 .3rem}
.layout>.links :is(.baum,.etk-baum,.sb-baum,.pb-baum,.sy-baum,.ek-baum) .bw-haken{margin-top:0;margin-bottom:0}      /* das Kästchen ist ein label: dessen Abstand nach oben (für Formulare) machte jede Zeile doppelt so hoch */
.layout>.links :is(.baum,.etk-baum,.sb-baum,.pb-baum,.sy-baum,.ek-baum) :is(a,summary,.sb-zeile,.pb-zeile,.sy-knoten,.ek-knoten){font-size:var(--knapp);line-height:1.25}
.layout>.links nav[data-baumwahl] summary>.bw-haken+a,.layout>.links nav[data-baumwahl] summary>.bw-haken+span{width:calc(100% - 3.4rem)}      /* Dreieck, Kästchen und Name stehen in einer Zeile: neben dem Dreieck ist weniger Platz, sonst rutschte der Name darunter */
}

/* Schaltflächen: kompakt (Festlegung des Menschen vom 13.11.2026: „Alle Schaltflächen vom Layout her wesentlich kompakter“). Die Grundform steht in
   40-knoepfe.css (Höhe 1,75 rem, wenig Polster); hier die eine Stelle, die es für **alle** durchsetzt -- viele Seiten gaben ihren Schaltflächen eine
   eigene Höhe (40, 44, 52 px). Nur mit feinem Zeiger (Maus): auf dem Telefon bleiben Tippflächen 44 px hoch (40-knoepfe.css, pointer:coarse).
   Ausgenommen ist das kleine Symbol „Feld in eigenem Fenster“ (.feld-knopf: eine feste Fläche, kein Text). */
@media (pointer:fine){
:is(button,.knopf,input[type=submit],input[type=button]):not(.feld-knopf){min-height:1.75rem!important;padding-top:.15rem!important;padding-bottom:.15rem!important;line-height:1.25}
.knopfreihe{gap:.35rem;margin:.4rem 0}.stapel{gap:.3rem}
/* was im Kopf wie eine Schaltfläche aussieht, wird mit ihnen flacher: die Schritte des Arbeitsgangs, die Auswahl links, das Zahnrad */
.arbeitsgang a{min-height:1.75rem;line-height:1.75rem}.ablaufwahl summary{min-height:1.75rem}.einstellungen summary{min-width:1.9rem;min-height:1.75rem}
.einstellungen svg{width:1.15rem;height:1.15rem}
.layout>.links .akk>summary{min-height:1.75rem;line-height:1.25}      /* die Falten im linken Feld sind Schaltflächen (13.11.2026) */
}

/* Der Inhalt der Bänder wächst mit ihnen (Festlegung des Menschen vom 13.11.2026: „Inhalt soll mitwachsen“). Die Höhe eines Bands ist das Maß --bandhoehe
   (Stilpaket: 2,7 % des Mittels aus Breite und Höhe des Fensters); die Schrift im Band ist 38 % davon, nie kleiner als die Grundschrift -- und alles, was im
   Band steht, misst sich an dieser Schrift (em statt rem): Schaltflächen, die Schritte des Arbeitsgangs, die Auswahl links, Nutzer und Rolle, das Zahnrad.
   Aufgeklappte Menüs bleiben in Textgröße. Nur über dem Umbruch und mit feinem Zeiger: auf dem Telefon und auf Touch bestimmen die Tippflächen. */
@media (min-width:34rem) and (pointer:fine){
header>.ui-al,header>.ui-kl,footer>.ui-status,footer>.ui-info{--bandschrift:max(1rem,calc(var(--bandhoehe) * .38));font-size:var(--bandschrift);padding:.4em 1em;gap:.25em 1em}
header>.ui-kl{font-size:calc(var(--bandschrift) * .9375);padding-block:.2em}
header :is(button,.knopf):not(.menue *){font-size:.9375em!important;min-height:1.75em!important;padding:.15em .7em!important}
header .arbeitsgang{gap:.25em}header .arbeitsgang a{min-height:1.75em;line-height:1.75em;padding:0 .8em}
header .ablaufwahl summary{min-height:1.75em;min-width:13em;padding:0 .7em 0 .9em;gap:1em}
header .einstellungen summary{min-width:1.9em;min-height:1.75em}header .einstellungen svg{width:1.15em;height:1.15em}
header .kl-wahl{gap:.35em}header .kl-wahl input{height:1.8em;min-width:7em;width:9em;padding:0 .4em}
header .menue{font-size:1rem}
}

/* Schaltflächen, die zwischen zwei Zuständen umschalten (Festlegung des Menschen vom 13.11.2026): der Text nennt den aktuellen Zustand,
   rechts steht das Umschaltsymbol -- eine Bahn mit Knauf; rechts und gefüllt heißt „an“ (die Lage trägt es, nicht nur die Farbe). Eine Stelle für alle (helfer.kippknopf). */
.kipp,.menue .umschalter button.kipp,.umschalter-leiste .umschalter button.kipp{display:inline-flex;align-items:center;justify-content:space-between;gap:.6em;text-align:left;white-space:nowrap}
.kipp-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.kipp-zeichen{flex:none;position:relative;box-sizing:border-box;width:2em;height:1.1em;border-radius:999px;border:1px solid var(--k-neutral-rand);background:var(--hg)}
.kipp-zeichen::after{content:"";position:absolute;top:2px;bottom:2px;left:2px;aspect-ratio:1;border-radius:50%;background:var(--tx2)}
.kipp[data-lage=an] .kipp-zeichen{background:var(--tun);border-color:var(--tun-rand)}
.kipp[data-lage=an] .kipp-zeichen::after{left:auto;right:2px;background:var(--tx)}
/* im Umschalter (Zahnrad, Filter) füllt die eine Schaltfläche die Zeile */
.menue ul.umschalter-1,.umschalter-leiste ul.umschalter-1{grid-auto-columns:minmax(0,1fr)}.umschalter-1 button.kipp{width:100%;padding-inline:.8em .5em}
.menue .staerke-regler.kipp{padding-inline:.8em .5em}
/* im Stapel rechts der Mitte ist wenig Breite: der Text bricht um, statt abgeschnitten zu werden; das Symbol bleibt rechts */
.knopfreihe .kipp{white-space:normal;gap:.35em;padding-inline:.5em .35em}.knopfreihe .kipp .kipp-text{overflow:visible;line-height:1.15}.knopfreihe .kipp .kipp-zeichen{width:1.7em;height:1em}

/* Ziehen und Ablegen (ablegen.js, 13.11.2026): das Ziel bekommt einen Rahmen, solange etwas darüber schwebt; ziehbare Zeilen zeigen es mit der Hand.
   Farbe und Rahmen nur aus dem Stilpaket. */
.ablegen-ziel{outline:3px dashed var(--fok);outline-offset:2px;background:var(--tun)}
[data-griff=ja]{cursor:grab}[data-griff=ja]:active{cursor:grabbing}

/* 95-diagnose -- eine Auskunft ohne Skript: wird das Stilblatt angewendet, fragt der Browser diese Adresse ab; der Server schreibt „Browser: css geladen“
   in seine Konsole. Zusammen mit dem Bild am Anfang der Seite („html angekommen“) und diagnose.js („Seite gezeichnet“) zeigt die Folge, wo es hängt. */
.kos-diag{display:block;width:1px;height:1px;overflow:hidden;background:url("/anmelden?diag=css%20geladen")}
@media print{.kos-diag{display:none}}

/* Layout minimal (die Vorgabe): die Mitte füllt den Raum; rechts bei Bedarf die Befehle, links bei Bedarf die Auswahl; der Stapel am Rand der Mitte (beide Layouts) */
.layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:1rem;align-items:stretch}
/* links, Mitte und rechts scrollen je für sich, nie gemeinsam (Festlegung des Menschen vom 12.11.2026, alle Seiten); der Rand lässt dem Fokusring Platz */
.layout>.links,.layout>.rechts,.layout>.mitte{overflow:auto;min-height:0;overscroll-behavior:contain}.layout:not(.maximal)>.mitte{padding:.3rem}
/* Die Breiten sind **Vorschläge** (Festlegung des Menschen vom 13.11.2026: rechts breiter, „immer und auf jeder Seite ist die Breite der Panele interaktiv
   einstellbar und wird gemerkt“): ``--links`` und ``--rechts`` setzt layout.js, wenn der Mensch am Trenner gezogen hat (gemerkt im Archiv). */
.layout.hat-links{grid-template-columns:var(--links,16rem) minmax(0,1fr)}.layout.hat-rechts{grid-template-columns:minmax(0,1fr) var(--rechts,min(22rem,34%))}
.layout.hat-links.hat-rechts{grid-template-columns:var(--links,16rem) minmax(0,1fr) var(--rechts,min(22rem,34%))}
/* Der Trenner liegt im kleinen Layout **auf** dem Rand seines Feldes (in dessen Spalte, in die Lücke ragend) -- er braucht keine eigene Spalte, darum
   bleiben die Spaltenregeln einzelner Seiten gültig. Dafür stehen die Felder fest in ihren Spalten. */
@media (min-width:34rem){
.layout:not(.maximal)>:is(.links,.mitte,.rechts){grid-row:1}.layout:not(.maximal)>.links{grid-column:1}.layout:not(.maximal).hat-links>.mitte{grid-column:2}
.layout:not(.maximal).hat-links.hat-rechts>.rechts{grid-column:3}.layout:not(.maximal).hat-rechts:not(.hat-links)>.rechts{grid-column:2}
.layout:not(.maximal)>.trenner{grid-row:1;width:8px;z-index:4;border-radius:4px;background:transparent}
.layout:not(.maximal)>.trenner[data-seite=links]{grid-column:1;justify-self:end;margin-right:calc(-.5rem - 4px)}
.layout:not(.maximal).hat-links.hat-rechts>.trenner[data-seite=rechts]{grid-column:3;justify-self:start;margin-left:calc(-.5rem - 4px)}
.layout:not(.maximal).hat-rechts:not(.hat-links)>.trenner[data-seite=rechts]{grid-column:2;justify-self:start;margin-left:calc(-.5rem - 4px)}
.layout:not(.maximal)>.trenner:is(:hover,:focus-visible,.zieht){background:var(--tun-rand)}}
@media (max-width:34rem){.layout:not(.maximal)>.trenner{display:none}}
.mitte{min-width:0}.links,.rechts{background:var(--fl);border:1px solid var(--lin);border-radius:var(--r);padding:.8rem;min-width:0}
.links h2,.rechts h2{font-size:var(--klein);font-weight:600;color:var(--tx2);margin:.1rem 0 .5rem}.links>*+*,.rechts>*+*{margin-top:.6rem}
/* Feldüberschrift (Festlegung des Menschen vom 12.11.2026): die Überschrift über links, Mitte und rechts steht ganz oben, auf gleicher Höhe und sieht in allen drei Feldern gleich aus;
   gemeint ist das h2, mit dem ein Feld beginnt (auch in einer Hülle ohne Rand, nicht in einer Karte) */
.layout>:is(.links,.rechts,.mitte)>:is(h2:first-child,.feld-knopf+h2),.layout>:is(.links,.rechts,.mitte)>:is(div:not(.karte):first-child,.feld-knopf+div:not(.karte))>h2:first-child{font-size:1.05rem;line-height:1.3;font-weight:700;color:var(--tx);margin:0 0 .6rem;padding:0 2rem 0 0;overflow-wrap:anywhere}
.layout:not(.maximal)>.mitte>:is(h2:first-child,.feld-knopf+h2),.layout:not(.maximal)>.mitte>:is(div:not(.karte):first-child,.feld-knopf+div:not(.karte))>h2:first-child{margin-top:calc(.5rem + 1px)}.layout>.links:has(.etk-baum)>:is(h2:first-child,.feld-knopf+h2),.layout>.links:has(.etk-baum)>:is(div:not(.karte):first-child,.feld-knopf+div:not(.karte))>h2:first-child{margin-top:.2rem}
.rechts .knopfreihe,.rechts .mf-werkzeug{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;margin:0}
.rechts .knopfreihe form,.rechts .knopf,.rechts button{width:100%;text-align:center}
/* der Stapel: Schaltflächen als Spalte am rechten Rand des Mittelfeldes; Umschalter ändern ihre Beschriftung (Platz) */
.mitte-feld{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto}.mitte:not(.hat-stapel)>.mitte-feld{flex:none}
.stapel{flex:0 0 auto;display:flex;flex-direction:column;gap:.5rem;align-items:stretch;width:11.5rem;max-width:36%;overflow:auto}
.stapel .knopf,.stapel button{width:100%;text-align:center;min-height:44px;padding:.4rem .6rem}.stapel form{margin:0}
.stapel .knopfreihe{flex-direction:column;align-items:stretch;margin:0}.stapel .knopfreihe form{width:100%}
.layout:not(.maximal)>.mitte.hat-stapel{display:flex;flex-direction:row;gap:.8rem;align-items:flex-start}
.layout:not(.maximal) .stapel{position:sticky;top:0;overflow:visible}
@media (max-width:34rem){.layout,.layout.hat-links,.layout.hat-rechts,.layout.hat-links.hat-rechts{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:.8rem;align-items:start}
.layout>.links,.layout>.rechts,.layout>.mitte{overflow:visible;overscroll-behavior:auto}.layout:not(.maximal)>.mitte{padding:0}
.layout:not(.maximal)>.mitte.hat-stapel{flex-direction:column;align-items:stretch;gap:.8rem}.layout:not(.maximal) .stapel{position:static}
.layout>.mitte{order:-1}.stapel .knopfreihe{flex-direction:row;flex-wrap:wrap;width:100%}
.stapel{width:auto;max-width:none;flex-direction:row;flex-wrap:wrap;order:-1}.stapel .knopf,.stapel button{width:auto;flex:1 1 9rem}}
/* Felder in eigenen Fenstern (12.11.2026, beide Layouts): oben rechts in jedem Feld ein kleines Symbol; ein ausgelagertes Feld fehlt, bis es zurückgeholt wird; ein Fenster mit nur einem Feld */
.layout{position:relative}.layout>[hidden]{display:none!important}
.feld-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;box-sizing:border-box;width:28px;height:28px;min-height:0;padding:0;border:1px solid var(--k-neutral-rand);border-radius:6px;background:var(--k-neutral);color:var(--k-tx);cursor:pointer;text-decoration:none;opacity:0;transition:opacity .12s}
/* die Symbole der Fenster zeigen sich erst, wenn man im Feld ist (Zeiger oder Tastatur) -- sonst stehen sie dem Inhalt im Weg; ohne Zeiger (Telefon) bleiben sie leise sichtbar */
.links:hover>.feld-knopf,.rechts:hover>.feld-knopf,.mitte:hover>.feld-knopf,.feld-knopf:focus-visible,.feld-knopf.feld-holen,.nur-feld .feld-knopf{opacity:1}
@media (hover:none){.feld-knopf{opacity:.6}}.feld-knopf:focus-visible{outline:3px solid var(--fok);outline-offset:1px}.feld-knopf svg{flex:none}
.links>.feld-knopf,.rechts>.feld-knopf{float:right;position:sticky;top:0;z-index:3;width:28px;margin:-.3rem -.3rem -28px .4rem}
.mitte{position:relative}.mitte>.feld-knopf{position:absolute;top:.2rem;right:.2rem;z-index:3}.layout.maximal>.mitte>.feld-knopf{right:1rem}
.feld-leiste{position:absolute;top:.2rem;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:.3rem}
.feld-knopf.feld-holen{width:auto;padding:0 .5rem}.feld-holen[hidden]{display:none}
.layout.nur-feld,.layout.maximal.nur-feld{grid-template-columns:minmax(0,1fr)!important}body:has(.layout.nur-feld)>header{display:none}
.layout.nur-feld>.links,.layout.nur-feld>.rechts{max-height:none}
@media print{.feld-knopf,.feld-leiste{display:none!important}}
/* Der Stapel rechts der Mitte (Festlegung des Menschen vom 13.11.2026): oben die Navigation, unter der Trennlinie die Aktionen, ganz unten das Zahnrad mit den Einstellungen der Eigenschaften */
.stapel{align-self:stretch}.stapel .stapel-trenner{width:100%;margin:.2rem 0;border:0;border-top:1px solid var(--lin)}
.stapel .stapel-falte{width:100%}.stapel .stapel-falte>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:1.75rem;border:1px solid var(--lin);border-radius:var(--r);padding:.2rem .5rem;background:var(--fl)}
.stapel .stapel-falte>summary::-webkit-details-marker{display:none}.stapel .stapel-falte[open]>summary{margin-bottom:.4rem}
.stapel .stapel-falte:first-child>summary{padding-right:2.2rem}      /* die erste Falte steht unter dem Symbol „Feld in eigenem Fenster“ */
.stapel .stapel-eigenschaften{margin-top:auto}      /* das Zahnrad ganz unten */
/* Die Eigenschaften unten im rechten Feld (Festlegung des Menschen vom 13.11.2026): immer unten, auch bei langem Inhalt (haftet am unteren Rand des Feldes) */
.rechts{display:flex;flex-direction:column}.rechts-eigenschaften{margin-top:auto;position:sticky;bottom:0;padding-top:.5rem;background:inherit}
.rechts-eigenschaften .kippwahl{margin:0 0 .35rem}.rechts-eigenschaften .kippwahl ul{margin:0;padding:0;list-style:none}
.rechts-eigenschaften .stapel-falte{width:100%}.rechts-eigenschaften .stapel-falte>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:1.75rem;border:1px solid var(--lin);border-radius:var(--r);padding:.2rem .5rem;background:var(--fl)}
.rechts-eigenschaften .stapel-falte>summary::-webkit-details-marker{display:none}.rechts-eigenschaften .stapel-falte[open]>summary{margin-bottom:.4rem}
.rechts-eigenschaften .knopfreihe{flex-direction:column;align-items:stretch;margin:0}.rechts-eigenschaften .knopfreihe .knopf,.rechts-eigenschaften .knopfreihe button{width:100%}
.rechts>.feld-knopf{align-self:flex-end;flex:none;margin:-.3rem -.3rem -28px 0}      /* im Flex-Feld ohne float: das Symbol bleibt oben rechts */

/* Layout maximal (der Raum): dazu links und rechts je ein Feld in einstellbarer Breite, getrennt durch Trenner */
.layout.maximal{gap:0;align-items:stretch;grid-template-rows:minmax(0,1fr)}
.layout.maximal.hat-links.hat-rechts{grid-template-columns:var(--links,min(15rem,26%)) 8px minmax(0,1fr) 8px var(--rechts,min(25rem,34%))}
.layout.maximal.hat-links:not(.hat-rechts){grid-template-columns:var(--links,min(15rem,26%)) 8px minmax(0,1fr)}
.layout.maximal.hat-rechts:not(.hat-links){grid-template-columns:minmax(0,1fr) 8px var(--rechts,min(25rem,34%))}
.layout.maximal>.links,.layout.maximal>.rechts{overflow:auto;border-radius:0;min-height:0;max-height:100%}
.layout.maximal>.mitte{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:auto;padding:0 .8rem}
.layout.maximal>.mitte.hat-stapel{flex-direction:row;gap:.6rem}
.trenner{cursor:col-resize;background:var(--lin);position:relative;touch-action:none}.trenner::after{content:"";position:absolute;inset:0 -6px}
.trenner:hover,.trenner:focus-visible,.trenner.zieht{background:var(--tun-rand)}
@media (max-width:34rem){.layout.maximal,.layout.maximal.hat-links.hat-rechts,.layout.maximal.hat-links:not(.hat-rechts),.layout.maximal.hat-rechts:not(.hat-links){grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:.8rem}
.layout.maximal>.trenner{display:none}.layout.maximal>.links,.layout.maximal>.rechts{overflow:visible;max-height:none;border-radius:var(--r)}
.layout.maximal>.mitte,.layout.maximal>.mitte.hat-stapel{padding:0;order:-1;flex-direction:column}}
.layout.maximal>.mitte.hat-stapel>.stapel{width:9.5rem;max-width:30%}
/* Das Netz (2D) spannt das Mittelfeld aus: Breite **und** Höhe des verbleibenden Bereichs */
.layout.maximal svg.netz{flex:1 1 0;min-height:12rem;width:100%;height:auto;max-height:none}
@media (max-width:34rem){.layout.maximal svg.netz{flex:none;height:min(110vw,75vh)}}
/* Wird das Feld schmal (Fenster, Hochformat), geht der Stapel der Befehle als Reihe über die Mitte -- sie behält die ganze Breite */
.layout.maximal{container-type:inline-size;container-name:lay}
@container lay (max-width:66rem){
.layout.maximal>.mitte.hat-stapel{flex-direction:column}
.layout.maximal>.mitte.hat-stapel>.stapel{width:auto;max-width:none;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;order:-1;overflow:visible}
.layout.maximal>.mitte.hat-stapel>.stapel .knopf,.layout.maximal>.mitte.hat-stapel>.stapel button{width:auto;flex:1 1 6rem;min-height:40px;padding:.3rem .5rem}}
/* Auf dem Telefon zuerst die Zeichenfläche, die Befehle darunter (12.11.2026): sonst schob die Reihe der Befehle die Fläche unter den Rand */
@media (max-width:34rem){.layout.maximal>.mitte.hat-stapel>.stapel{order:1}
.layout.maximal>.mitte.hat-stapel>.stapel .knopf,.layout.maximal>.mitte.hat-stapel>.stapel button{min-height:44px}}

/* Wischen auf Touchscreens (Festlegung des Menschen vom 13.11.2026; wischen.js setzt ``wisch`` an die Seite): wo die Felder untereinander stünden,
   liegen links und rechts als Schubfächer am Rand -- vom linken Rand wischen zeigt das linke, vom rechten das rechte. Ohne Skript gilt nichts davon. */
@media (max-width:34rem){
html.wisch .layout>.links,html.wisch .layout>.rechts{position:absolute;top:0;height:100vh;width:min(88vw,24rem);max-height:none;box-sizing:border-box;margin:0;z-index:30;overflow:auto;overscroll-behavior:contain;border-radius:0;visibility:hidden}
/* die Bewegung erst, wenn die Seite steht (``wisch-bereit``) -- sonst glitten die Felder bei jedem Laden sichtbar aus der Mitte an den Rand */
html.wisch.wisch-bereit .layout>.links,html.wisch.wisch-bereit .layout>.rechts{transition:transform .18s ease-out,visibility 0s .18s}
html.wisch .layout>.links{left:-.7rem;transform:translateX(-105%)}html.wisch .layout>.rechts{right:-.7rem;transform:translateX(105%)}
html.wisch.wisch-links .layout>.links,html.wisch.wisch-rechts .layout>.rechts{transform:none;visibility:visible}html.wisch.wisch-bereit.wisch-links .layout>.links,html.wisch.wisch-bereit.wisch-rechts .layout>.rechts{transition:transform .18s ease-out}
html.wisch .layout>.wisch-grund{position:absolute;left:-.7rem;right:-.7rem;top:0;height:100vh;z-index:29;background:var(--tx);opacity:.4}
html.wisch .layout>.wisch-grund[hidden]{display:none}
html.wisch .layout>.wisch-griff{position:absolute;z-index:28;display:flex;align-items:center;justify-content:center;width:1.4rem;height:4.5rem;min-height:44px;margin-top:-2.25rem;padding:0;border:1px solid var(--k-neutral-rand);background:var(--k-neutral);color:var(--k-tx);font-size:1.2rem;line-height:1;opacity:.85}
html.wisch .layout>.wisch-griff-links{left:-.7rem;border-left:0;border-radius:0 8px 8px 0}html.wisch .layout>.wisch-griff-rechts{right:-.7rem;border-right:0;border-radius:8px 0 0 8px}
html.wisch.wisch-links .layout>.wisch-griff-links{left:calc(min(88vw,24rem) - .7rem);z-index:31}html.wisch.wisch-rechts .layout>.wisch-griff-rechts{right:calc(min(88vw,24rem) - .7rem);z-index:31}
html.wisch.wisch-links .layout>.wisch-griff-rechts,html.wisch.wisch-rechts .layout>.wisch-griff-links{display:none}
html.wisch .layout>.wisch-griff:focus-visible{outline:3px solid var(--fok);outline-offset:1px}
html.wisch main{overflow-x:clip}html.wisch .layout>.wisch-grund{touch-action:none}
html.wisch .layout.maximal{container-type:normal}
html.wisch .layout.maximal>.mitte.hat-stapel>.stapel{width:auto;max-width:none;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;overflow:visible}
html.wisch .layout.maximal>.mitte.hat-stapel>.stapel .knopf,html.wisch .layout.maximal>.mitte.hat-stapel>.stapel button{width:auto;flex:1 1 6rem}
}
@media (min-width:34rem){.wisch-griff,.wisch-grund{display:none}}
@media (prefers-reduced-motion:reduce){html.wisch .layout>.links,html.wisch .layout>.rechts{transition:none}}
@media print{.wisch-griff,.wisch-grund{display:none!important}}
/* Am Ende der Mitte, nur wo die Felder nicht daneben stehen: je ein Verweis zum linken und zum rechten Feld (13.11.2026) */
.feld-sprung{display:none}
@media (max-width:34rem){.feld-sprung{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;margin:1.2rem 0 .4rem}.feld-sprung .knopf{flex:1 1 9rem;text-align:center}
/* Navigation durch Wischen nach oben und unten (Festlegung des Menschen vom 13.11.2026; wischen.js setzt ``baender-weg``): nach oben gewischt (die Seite
   rollt nach unten) weichen die Bänder oben und lassen der Mitte den Platz, nach unten gewischt sind sie wieder da. Ohne Skript bleiben sie stehen. */
html.wisch-baender header{transition:transform .18s ease-out}html.wisch-baender.baender-weg header{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){html.wisch-baender header{transition:none}}
@media print{.feld-sprung{display:none!important}}