body		{padding-top:1px;counter-reset:FIG TAB LINE}	/* Platz für Inhaltsverzeichnis und Sprachauswahl */
div,blockquote	{overflow:hidden;}
div.a		{margin:0.5em 0;}	/* Absatz, ordentlicher als <p>, <ul class=tight> besser einschließend */

/* Überschriften */
h1,h2,h3,h4,h5	{border-radius:8px;overflow:hidden;background-repeat:no-repeat!important;background-position:0.5em!important;}
h1		{background:rgba(128,128,128,0.4);padding:2px 1em;counter-reset:H2}
h2		{background:rgba(128,128,128,0.3);padding:2px 2em;counter-increment:H2;counter-reset:H3}
h3		{background:rgba(128,128,128,0.2);padding:2px 3em;counter-increment:H3;counter-reset:H4}
h4		{background:rgba(128,128,128,0.1);padding:2px 4em;counter-increment:H4;counter-reset:H5}
h5		{background:rgba(128,128,128,0.05);padding:2px 5em;counter-increment:H5}
@media(min-width:600px) {	/* auf Desktops Zähler einblenden */
 h2:before 	{content:counter(H2)".";padding-right:1em}
 h3:before	{content:counter(H2)"."counter(H3);padding-right:1em}
 h4:before	{content:counter(H2)"."counter(H3)"."counter(H4);padding-right:1em}
 h5:before	{content:counter(H2)"."counter(H3)"."counter(H4)"."counter(H5);padding-right:1em}
 h2 img.pm,h3 img.pm,h4 img.pm,h5 img.pm	{display:none;}	/* Plusminus-Knöpfe */
}
@media(max-width:599px) {
 h1		{font-size:150%;border:outset 2px #666}
 h1:after	{padding-left:2em;font-size:50%;font-style:italic;color:gray}
 h1:after	{content:"Mobil-Ansicht"}
 h1:lang(en):after	{content:"small-screen view"}
 h1,h2,h3,h4,h5	{padding:0 0 0 30px;margin:0.3em 0;}
/* TODO: Besser wäre Selektor "section.collapsed *" für "display:none" aber irgendwie geht das nicht! */
/* Das würde das unpassende <span> ersparen */
 section.collapsed>:not(h2):not(h3):not(h4):not(h5),nav,#Nav,#NavBar	{display:none;}
 section.collapsed>h2,section.collapsed>h3,section.collapsed>h4,section.collapsed>h5	{background-image:url("icons/plus.gif");}
 section:not(.collapsed)>h2,section:not(.collapsed)>h3,section:not(.collapsed)>h4,section:not(.collapsed)>h5	{background-image:url("icons/minus.gif");}
 body		{margin:1em 1px}
}
:root		{color-scheme: light dark}		/* kann alles! */
/*h5		{font-size:120%;overflow:hidden}	/* für Zwischenüberschriften */

/* Bilder und Tabellen */
h6,figcaption,caption		{margin:0;font-size:100%;font-style:italic;font-weight:normal;overflow:hidden;}
:not(td)>table>caption		{caption-side:bottom;margin-top:0.2em;}
h6 i,aside i,figcaption i,:not(td)>table>caption i,i>i	{font-style:normal}			/* zurückschalten von <i> */
/* Footer (experimentell) */
f1,f2,f3,f4	{display:block;}
figure,.fig,.tab	{text-align:center;margin:0.5em 0;max-width:100%;overflow-x:auto}	/* div class=fig - Zentriertes Bild mit Unterschrift */
/* .fig img		{max-width:99%}	// Platz für Rand lassen */
.tab		{overflow:auto}
.fig h6,figure h6,figcaption	{margin-top:4px;counter-increment:FIG}
.tab h6,:not(td)>table>caption		{margin-bottom:4px;counter-increment:TAB}
@media(min-width:600px) {	/* auf Desktops Zähler einblenden */
 .fig h6:before,figure h6:before,figcaption:before	{content:"Bild "counter(FIG)": "}	/* für Bilder (zwecks Verzeichniserstellung) */
 .fig:lang(en) h6:before,figure:lang(en) h6:before,figcaption:lang(en):before	{content:"Figure "counter(FIG)": "}
 .tab  h6:before,:not(td)>table>caption:before		{content:"Tabelle "counter(TAB)": "}	/* für Tabellen (zwecks Verzeichniserstellung) */
 .tab:lang(en) h6:before,:not(td)>table>caption:lang(en):before	{content:"Table "counter(TAB)": "}
}
/* HTML5-Tags für ältere Browser (Firefox 2) */
header,hgroup,nav,article,figure,figcaption,section,aside,footer{display:block;}
section footer	{font-style:italic;margin:0 1em;margin-top:1em;border-top:1px solid black;overflow:hidden}
section footer p	{margin:2px;}	/* kleinerer Rand */
/* Achtung! <p> in <aside> muss mit </p> abgeschlossen werden, sonst Darstellungsfehler in Firefox 3.6 */

body	{hyphens:auto;}
/* Mehrspaltiger Text */
.sxs	{}	/* side-by-side = zweispaltig auf breiten Bildschirmen, hintereinander auf Telefon (für Überschriften; Weiterverarbeitung in JavaScript, TODO) */

table.leftalign th,table.leftalign td,table.leftalign.list td,table fieldset	{text-align:left;}

/* Zeichenformate und Syntaxhervorhebung */
q:not(:lang(en)):before	{content:"„";}
q:not(:lang(en)):after	{content:"“";}
o,.o,sqrt	{text-decoration:overline;}		/* Überstrich (invertiertes Signal; Wurzelausdruck) */
sqrt:before	{content:"√";text-decoration:none;}
.u	{border-bottom:1px gray dotted;text-decoration:none;vertical-align:-3%;cursor:help}	/* dotted underline for <u style=u title=explanation> */
g,.g	{color:gray;}
[title]:not([title=""]):not(.lb):not(.lf):not(a):not(img):not(.shadowed)	{cursor:help}
a[nohref]	{color:light-dark(#00F,#88F)}
.b	{display:inline-block;transform:skew(16deg,0deg);}	/* rückwärts fallender Text; Text darf nicht umbrechen */
/*:not(table) .b	{display:inline-block;white-space:nowrap;} klappt nicht*/
ss,.ss	{font-family:Arial,sans-serif;}		/* serifenlose Schrift */
.c	{font-stretch:condensed;}		/* eng (Tabellen und Etiketten) */
/* Umdefinition: <em> im Fließtext ist /gesperrter/ Text, nicht kursiv wie ohne Definition */
em		{letter-spacing:0.1em;word-spacing:0.2em;font-style:inherit;}
em:before	{content:'';margin-left:0.3em;}
em:after	{content:'';margin-right:0.3em;}
/* fett und breit; die Breite muss leider gesondert angegeben werden! <strong style="width:3em">Text</strong>*/
/*p strong,li strong	{display:inline-block;transform:scale(1.5,1);}*/
p strong,li strong	{color:red;}
/*:not(table) strong	{text-align:center;white-space:nowrap;}	klappt nicht*/
pre	{background:rgba(128,128,128,0.1);margin:10px;padding:5px;overflow:auto;}	/* boxed code block */
pre d	{color:light-dark(darkblue,#FF8);}	/* Präprozessor-Makro	*/
pre i	{color:light-dark(darkgreen,#8F8);}	/* Kommentar		*/
pre.sh i,pre.dos i {color:#0C0;}		/* vor schwarzem Hintergrund heller*/
pre n	{color:light-dark(#077,#8FF);}		/* Zahl			*/
pre b	{color:light-dark(darkblue,#8CF);}	/* Schlüsselwort; Assemblerbefehl */
pre b.m	{color:light-dark(blue,#8EF);}		/* Emulierter Assemblerbefehl */
pre b.e	{font-style:italic;}			/* Nicht-Standard-Schlüsselwort */
pre r	{color:light-dark(#C00,#F88);}		/* Regulärer Ausdruck	*/
pre s	{color:light-dark(#707,#F8F);text-decoration:inherit;}	/* String, Zeichen	*/
pre l	{color:light-dark(darkred,red);}	/* Sprungziel		*/
span.ln		{background:rgba(128,128,128,0.3);text-decoration:none;font-style:normal;color:black;}	/* Zeilennummern für Listings */
.invis	{display:none;}			/* per JavaScript wird ein <img> davorgesetzt */
div.invis	{background:rgba(0,0,0,0.125)}
*[hidden]	{display:none!important;}	/* für Browser, die das Hidden-Attribut (noch) nicht kennen */
img[src='icons/minus.gif']+span.invis	{display:inherit;}	/* Zeigen wenn's zu Minus wird */
img[src='icons/minus.gif']+div.invis	{display:block;}	/* Zeigen wenn's zu Minus wird und Hintergrundfarbe übernehmen */
code	{font-weight:bold;}			/* in opposite to <tt> */
tt	{font-size:1.2em;}			/* otherwise too small at least on German Windows systems */
li	{margin:0.5em 0;}			/* Im Normalfall Platz zwischen den Listenelementen lassen */
/* Listen mit geringem Zeilenabstand (wenige Punkte im Fließtext) */
p[compact]	{margin-bottom:0.2em;}	/* vor der Liste */
ul[compact],ul[compact] li,ol[compact],ol[compact] li	{margin:0.2em;}	/* Liste */
ul[compact]+p[compact],ol[compact]+p[compact]	{margin-top: 0.2em;}	/* nach der Liste (CSS2) */
/* Listen ohne Zeilenabstand (deprecated) */
ul.tight,ul.tight li,td ul li	{margin:0;}	/* keinen Platz lassen */
ol.tight,ol.tight li,td ol,td ol li	{margin:0;padding-left:1em;}
ol.sv,ol.sv li	{margin-top:0; margin-bottom:0;}	/* Steckverbinder */
aside ul,td ol,td ul	{margin:0;padding-left:1em;}		/* weniger einziehen */
ol.footnote	{font-size:small;border-top:1px solid blue;background:rgba(0,0,255,0.05);margin:1em 2em;}
figure:first-child	{margin-top:0;}
figure:last-child	{margin-bottom:0;}
dl.long dt	{padding-top:0.6em;margin-top:0.6em;}
dl.long dt:not(:first-child)	{border-top:dotted gray 1px;}
dt		{margin:0.5em 0;}
dt.faq		{margin:1em 0 0.5em 0;}			/* another FAQ list */
dt.faq:before	{content:url(/~heha/icons/frage.gif)" ";}
dd.faq:before	{content:url(/~heha/icons/antwort.gif)" ";}
.nolig		{font-variant-ligatures:none;}
/* Pfeil-Canvas (Syntaxhervorhebung) */
canvas.pointers {
	position:absolute;
	left:0;
	top:0;
	width:40px;
	height:100%;
}
canvas.divider {	/* nur für die Maus */
	position:absolute;
	left:30px;
	top:0;
	width:10px;
	height:100%;
	cursor:ew-resize;
}
tip {
	font-family:Tahoma,sans-serif;
	font-size:8pt;
	position:absolute;
	display: none;
	background: #FFFFE1;
	border: 1px solid;
	padding:0.2em;
	box-shadow: 3px 3px 2px -1px #8888;
}
div.stl {position:relative;width:500px;height:500px;flex-shrink:0;background:rgba(0,0,255,0.2);min-width:30px;min-height:30px}
div.stl:focus,a:focus,input:focus	{outline: auto;}	/* verbessert die Sichtbarkeit des Fokus: Blaue Umrandung 2 Pixel */
div.stl>canvas.stl3d,div.stl>canvas.stl2d {position:absolute;left:0;top:0;pointer-events:none;}	/*ohne left/top Problem bei in Tabelle platzierten Parent-DIVs*/
figure>div.stl {margin:5px auto;}	/* zentrieren, erspart Extra-Div */
p>input[type='checkbox']	{margin-left:1em;}
#linenumb,#linewrap	{position:absolute;top:-99px;left:-99px;}
/* :before verschiebt Tabstops nicht, Gesamtbreite "4.5em+5px" scheint zu stimmen */
#linenumb:checked~pre,#linenumb:checked~* pre
	{padding-left:0;}	/* horizontales Padding wegnehmen (verschiebt Tabstops) */
#linenumb:checked~pre line:before,#linenumb:checked~* pre>line:before
	{counter-increment:LINE;content:counter(LINE);width:3.5em;background:#DED;color:black;text-decoration:none;display:inline-block;text-align:right;padding-right:0.5em;margin-left:5px;margin-right:0.5em;font-style:normal;font-weight:normal;}
#linewrap:checked~pre line,#linewrap:checked~* pre>line
	{display:block;white-space:pre-wrap;padding-left:5em;text-indent:-5em;}
line:hover	{background:light-dark(#FFF,#666);}

/* Verschiedenes (::before [zwei Doppelpunkte] wird nicht von IE8 verstanden) */
a[href*="/g.cgi?"]::before	{content:url(icons/pdf.gif);padding-right:0.2em;vertical-align:top;text-decoration:none}
/* a[href$=".zip"]:before	{content:url(/icons/compressed.gif);padding-right:0.2em;vertical-align:top;text-decoration:none} */
a[href^="#"]	{color:light-dark(green,#8F8)}	/* internes Sprungziel */
/* Reihenfolge muss so sein (Firefox) */

/*	Das Emoji kann nicht allein nicht-unterstrichen dargestellt werden,
	deshalb hier der ganze Link nicht-unterstrichen */
a::before,
a::after	{vertical-align:bottom;text-decoration:none;display:inline-block}
a::before	{padding-right:0.2em}
a::after	{padding-left:0.2em}
a.picture,
a.video		{text-decoration:none}
a.picture::before	{content:"🖼️"}
a.video::before		{content:"🎥"}
a[href^='http']::before	{content:url(icons/extern.gif)}
a[href*='wikipedia']::before	{content:url(icons/wikipedia.png)}
a.buy::before,	/* Leider addieren sich die verschiedenen ::before nicht! Daher Sprachflaggen danach. */
a[href~='reichelt']::before,
a[href~='conrad']::before,
a[href~='farnell']::before,
a[href*='rs-online']::before,
a[href~='mouser']::before,
a[href~='digikey']::before,
a[href*='pollin.de']::before,
a[href*='trade-shop']::before	{content:url(icons/einkauf.gif)}
a[lang=en]::after,
a[href$='lang=en']::after	{content:"🇬🇧"}
a[lang=de]::after,	/* Nicht alle Brauser unterstützen Emoji; SVG mittlerweile schon. */
a[href$='lang=de']::after	{content:"🇩🇪"}
a[lang=de-en]::after		{content:"🇩🇪 🇬🇧";}
a.dead::after	{content:"†";font-weight:bold;color:black}

.locked::before		{content:"🔒"}
.webusb::before		{content:"🔌"}
a.tracked		{cursor:url("/~heha/icons/bomb.png") 28 6,pointer}
a.tracked::before	{content:"🍪"!important}
a.tracked:hover		{color:red}
/* Download-Link */
a.desktop::before	{content:url(icons/desktop.svg);vertical-align:-10%}	/* WebHID, WebSerial, WebUSB */
a.mobile::before	{content:url(icons/mobile.svg);vertical-align:-10%}	/* WebUSB */
a.dl::before,
a[download]::before,
a[href*='.zip/']:not([href*='?'])::before
		{content:url(icons/dl24.gif);vertical-align:-30%;}
a.button	{display:inline-block;font-size:120%;font-family:Arial,sans-serif;font-style:normal;text-decoration:none;color:inherit;background:rgba(128,128,128,0.2);padding:0.2em 0.5em;margin:0.5em;border:#888 2px solid;border-radius:6px;}
a.right		{clear:right;float:right;margin:0;}
/* Die Pfeilrichtung wird durch h.js ermittelt und dabei die Link-Klasse ("lb" oder "lf") gesetzt */
a.lf::before,
a.lb::before	{padding:0 0.2em;margin-right:0.1em;background:rgba(128,128,128,0.2);border:1px #888 solid;border-radius:3px;}
a.lf::before	{content:"↓"}
a.lb::before	{content:"↑"}

img.prelink	{padding-right:0.2em;border:0;vertical-align:top;}
/* Frage-Antwort-Listen (FAQ) */
dl.faq		{counter-reset:DL}
dl.faq dt::before	{content:"F"counter(DL)" ";font-weight:bold;font-size:200%;counter-increment:DL}
dl:lang(en).faq dt::before	{content:"Q"counter(DL)" ";font-weight:bold;font-size:200%;counter-increment:DL}
dl.faq dt {font-weight:bold;margin-left:35px;text-indent:-35px;padding-left:35px;color:#008000}
dl.faq dd::before	{content:"A ";font-weight:bold;font-size:200%;vertical-align:bottom;position:relative;top:0.12em;}
/* die Fummelei mit der Position ist erforderlich, um den Zeilenabstand zwischen erster und zweiter Zeile nicht zu vergrößern.
   Das geht nur ohne Unterlängen (vom "A") gut. */
dl.dt dd		{margin-bottom:10px}

resp:not([class])::before	{content:"geheim";visibility:visible;font-style:oblique;}
resp:not([class])	{visibility:hidden}		/* wie <span> */
.invis-resp	{display:none}	/* wird per JavaScript auf "resp" geändert, wenn innerhalb TUC/ENAS */
							/* small in-document navigation box, <div class=nav {width=}> */
nav	{clear:right;float:right;padding:2px;margin:0 0.5em;border:1px solid #6558;
	background:linear-gradient(#0000,light-dark(#F003,#F006));
	border-radius:5px;box-shadow:5px 5px 5px #8888;font-size:small;
	}

@media (prefers-color-scheme: dark) {
/* .inv	{filter:invert(1)hue-rotate(180deg)}	/* für farbige Grafiken */
 .bw,				/* für Schwarzweiß- und Grauwert-Grafiken */
 a[src$=".svg"],
 iframe[src$="?as=SVG"] {filter:invert(1)}
 h1 a:link,h2 a:link,h3 a:link,h4 a.link	{color:#8CF}
 h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited	{color:#C8F}
 a[href*='wikipedia']::before	{filter:invert(0.85)}	/* Notbehelf für fehlendes Alpha bei diesem Icon */
}

@keyframes slidein {
 from {transform:translateX(512px)skewX(30deg)}
 to  {transform:none}
}
/* small in-document navigation box, <div class=nav {width=}> */

/* Eingerahmter Text mit verschiedenen Hintergrundfarben */
/* TODO: Umstellen auf Schreibweise class="red box" vereinfacht CSS */
.rounded	{border-radius:8px;}
.box		{background:rgba(128,128,128,0.2);padding:0.5em 1em;margin:0.5em 0.2em;border:#888 1px solid;}		/* Gray notice box <blockquote class=box> */
/*.box>.box	{margin:0.5em 0}	*/	/* Für geschachtelte Boxen: Weniger Rand */
/* Zusammenfallende Ränder simulieren: Nur auf <h1> folgt kein <span>;
   alle anderen <h?> bekommen von h.js einen <span> (für Mobilansicht) verpasst.
   Daher genügt für den Rest :first-child.*/
/*h1+.box,.box:first-child	{margin-top:0}	*/
/*.box:last-child			{margin-bottom:0}*/
.redbox		{border:1px solid red;    background:#F883;padding:0.5em 1em;margin:1em;border-radius:8px;box-shadow:0.5em 0.5em 0.5em #8888;}
h1+.redbox,.redbox:first-child	{margin-top:0}
.greenbox	{border:1px solid #C0FFC0;background:rgba(128,255,128,0.2);padding:0.5em 1em;margin:1em;border-radius:8px;box-shadow:0.5em 0.5em 0.5em #8888;}
.bluebox	{border:1px solid #C0C0FF;background:rgba(128,128,255,0.2);padding:0.5em 1em;margin:1em;border-radius:8px;box-shadow:0.5em 0.5em 0.5em #8888;}
.yellowbox	{border:2px solid #FFFF80;background:rgba(255,255,  0,0.2);padding:0.5em 1em;margin:1em;border-radius:8px;box-shadow:0.5em 0.5em 0.5em #8888;}
.dos,.sh	{color:#CCC;background:#111;font-weight:bold}	/* DOS box: <div … oder <pre class=dos> */
/*.sh		{font-size:large}*/
pre.dos,pre.sh	{padding:0.5em;margin:0.5em;border:#CCC 4px ridge}	/* DOS box: <div … oder <pre class=dos> */
li>pre.sh	{padding:1px;margin:0;border:none}
/* Auch für Texthinterlegungen geeignet */
.red		{border-color:red;    background:rgba(255,128,128,0.2);}
.green		{border-color:#C0FFC0;background:rgba(128,255,128,0.2);}
.blue		{border-color:#C0C0FF;background:rgba(128,128,255,0.2);}
.yellow		{border-color:#FFFF80;background:rgba(255,255,  0,0.2);}
.dark		{background:#224C}
.light		{background:#EEDC}
.net		{color:light-dark(blue,cyan)}

/* Gestapelte Fotos */
div.multi	{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:0 5px;gap:5px;}
figure .box	{text-align:left;border-radius:8px;}	/* für MultiBild */
span.box,b.box,i.box,em.box	{padding:0 0.2em;margin:0;}
img.pixelart	{image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}	/* <img class=pixelart width=...> */
img.vga		{width:640px; height:480px;}
kbd		{border:1px solid #ADB3B9;border-radius:3px;margin:0 0.1em;padding:0 0.2em;white-space:nowrap;display:inline-block;box-shadow:0 1px 0 rgba(12,13,14,0.2),0 0 0 2px #FFF inset;}

label		{padding:1px}
label:hover	{border:1px black dotted;padding:0px}

/* Alles außer das Sprungziel abdunkeln */
body.shadowed	{background:#888;}
:not(body).shadowed {opacity:0.25;cursor:not-allowed;}	/* erfordert JavaScript-Hilfe, da sich opacity multipliziert, nicht überschreibt */
.hilited	{background:#FFFFFF;}

.droptarget	{background:rgba(0,255,0,0.25)!important;border:1px solid green;}

canvas.fullclient,svg.fullclient	{display:block;position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:5;box-sizing:border-box;}
aside, div.r	{
	font-size:smaller;
	font-style:italic;
	line-height:1.3em;
	border:solid 1px #CCC;
	padding:0.5em;
	clear:right;
	float:right;
	margin:0.5em;
	max-width:30em;}
	/* right-side floating box <div class=r style="width:30em"> */
h1+aside, aside:first-child	{margin-top:0;}
aside p:last-child, blockquote p:last-child		{margin-bottom:0;}
aside p:first-child, blockquote p:first-child	{margin-top:0;}
aside.w30	{width:30em;}
@media (max-width:599px) {
 aside,div.r	{max-width:100%;clear:none;float:none;max-width:none;}
 aside img,div.r img	{max-width:100%}
 dl.faq dt,dl.faq dd	{margin-left:0;}
 li>ul,li>ol		{padding-left:1em;}	/* Unterpunkte weniger tief einrücken */
}
a.hl	{color:#888;opacity:0.5;visibility:hidden;margin-left:0.5em;text-decoration:none}	/* headerlink (see wiki.ubuntuusers.de) */
a.hl:hover	{opacity:1}
h2:hover a.hl,h3:hover a.hl,h4:hover a.hl,dt:hover a.hl	{visibility:visible}
a.nul:link,a.nul:visited	{text-decoration:none}		/* no-underline: Keine Unterstreichung von Links */

/* Listen-Tabelle (.list), Steckverbinder-Tabelle (.sv) */
table.list th.l,table.list td.l,table.list.l>tbody>tr>td	{text-align:left}
table.list th.r,table.list td.r			{text-align:right}
table.list,table.sv	{border-collapse:collapse;margin:0 auto}
table.list>thead>tr:first-child>th	{background:rgba(0,0,0,0.25);}
table.long.list>thead[style^=transform]>tr:first-child>th,
table.long.list>thead[style^=transform]>tr:first-child>td,
table.long.list>tfoot[style^=transform]>tr:first-child>th,
table.long.list>tfoot[style^=transform]>tr:first-child>td	{background:rgba(190,190,190,0.9375);}
table.list>thead>tr>th,table.list th[colspan]	{padding:2px 0.3em;background:rgba(128,128,128,0.5);}
table.list td.nopad		{padding:0 0}
table.list td.nopad>table	{border-collapse:collapse}
/* Pivotelement (oben links = "tl") mit schräger Unterteilung */
table.list>thead>tr:first-child>th:first-child.tl	{padding:0;background-image:linear-gradient(to top right,rgba(128,128,128,0.3) 50%,rgba(128,128,128,0.5) 51%,rgba(128,128,128,0.5));}
table.list>thead>tr:first-child>th:first-child.tl>div:first-child	{text-align:right;white-space:nowrap;}
table.list>thead>tr:first-child>th:first-child.tl>div:first-child:after	{content:"→";}
table.list>thead>tr:first-child>th:first-child.tl>div:last-child	{text-align:left;white-space:nowrap;}
table.list>thead>tr:first-child>th:first-child.tl>div:last-child:before	{content:"↓";}
/* Diagonalelemente einer (quadratischen) Matrix */
table.list>tbody>tr>td.diag	{padding:0;background-image:linear-gradient(to top right,rgba(0,0,0,0) 49%,rgba(0,0,0,1) 49% 51%,rgba(0,0,0,0) 51%);}
/* Erste Spalte (ggf. sortierbar) mit hellerem Grau, passend zum Pivotelement "tl" */
table.list>tbody>tr>th:first-child,
table.list>tbody>tr>td:first-child+th		{background:rgba(128,128,128,0.3);}
/* Alles zentriert */
table.list td,table.sv td	{padding:2px 0.3em;text-align:center;}
table.list ul,table.list ol	{text-align:left;}	/* Innerhalb der Tabelle solche Abschnitte linksbündig */
td.l>table	{margin-left:0; margin-right:auto;}
td.r>table	{margin-left:auto; margin-right:0;}
table.list .gn	{background:lightgreen;}
table.sv,table.sv td	{border-color:gray;}
table.sv td.tl		{text-align:right;border:1px solid gray;}	/* Text links */
table.sv td.nl		{text-align:right;}	/* Pin-Nummer linksseitig */
table.sv td.nr		{text-align:left;}	/* Pin-Nummer rechtsseitig */
table.sv td.tr		{text-align:left;border:1px solid gray;}	/* Text rechts */
table.sortable>thead {cursor:pointer;}
table.sortable>thead>tr:first-child>th:not(.sorted):not(.reversed):not(.nosort):not(.tl):after {content:"⇅";color:gray;}
table.sortable>thead>tr:first-child>th.sorted:after {content:"▾";color:red;}
table.sortable>thead>tr:first-child>th.reversed:after {content:"▴";color:red;}
table.list>tbody>tr.endgroup	{border-bottom:double;}	/* endgroup wird ggf. von JavaScript beim Sortieren gesetzt */
table.hcompact th,table.hcompact td {padding-left:2px!important;padding-right:2px!important;}
table.filelist {font-family:Arial,sans-serif;background:rgba(0,0,0,0.02);padding:0.2em 0.5em;margin:0.5em;border:#888 2px solid;border-radius:6px;}
table.filelist td	{padding:1px 3px;}
table.filelist td>a	{text-decoration:none;padding:1px 3px;}
table.filelist td:not(:nth-child(3))>a	{border:1px solid;border-radius:3px;	/* Die Extension-Spalte nicht mit Buttonrändern versehen */
			border-left-color:rgba(255,255,255,1);
			border-top-color:rgba(255,255,255,1);
			border-right-color:rgba(0,0,0,0.75);
			border-bottom-color:rgba(0,0,0,0.75) 1px solid;
		}
table.filelist>tbody>tr:nth-child(even)	{background:rgba(0,0,0,0.1);}
table.filelist>tbody>tr:nth-child(odd)	{background:rgba(0,0,0,0.05);}
/* Firefox, Chrome, IE (die beiden letzteren leider nur von links lesbar) */
.ccw span	{writing-mode:sideways-lr;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;white-space:nowrap;}
.bggray02	{background:rgba(128,128,128,0.2);}
.nowrap,.nowrap td	{white-space:nowrap;}

/* Tabellenformatierung für Bauteillisten */
table.longlist		{border-spacing:0;border:1px outset}
table.longlist th,
table.longlist td	{border:1px inset;padding:3px}
table.longlist>thead>tr>th,
table.longlist>thead>tr>td	{position:sticky;inset-block-start:0;background:light-dark(#DDD,#444);box-shadow:0 1px light-dark(#444,#CCC)}
table.longlist>tfoot>tr>th,
table.longlist>tfoot>tr>td	{position:sticky;inset-block-end:0;background:light-dark(#EEE,#333);box-shadow:0 -1px light-dark(#CCC,#444)}
table.longlist>tfoot>tr>td	{text-align:center}	/* Extrawurst für Bauteilliste */

/* Inhaltsverzeichnis zum Einblenden */
#NavBar	{position:absolute;top:0px;right:0px;background:#F882;margin:0 0;border:1px solid #6558;font-weight:bold;padding:0 2px;cursor:pointer}
#Nav	{position:absolute;top:0px;right:0px;background:light-dark(#FEEE,#322E);margin:0 0;padding-right:2em;border:1px solid #E0C0C0;font-size:small;visibility:hidden;clip:auto}
ol#Nav	{margin:0 0;}
#Nav ol ol,#Nav ol ol ol	{padding-left:1em}
#X	{position:absolute;top:2px;right:2px;color:gray;background:lightgray;padding:0 4px;border:2px solid gray;cursor:pointer;font:bold 1em Helvetica}
#LangSel{position:absolute;top:0px;left:0px;background:rgba(128,128,255,0.2);margin:0 0;border:1px solid #6558;padding:0px 10px;}
nav.slidein	{animation:slidein 0.5s;backdrop-filter: blur(6px)}
nav:not(.slidein)	{display:none;}
nav>a	{padding:0.5em;}	/* in der Fußzeile etwas auseinanderhalten */
/* Browserfehler ausbügeln: Natürlich wurde dieses Linkziel bereits besucht! */
a[href='javascript:history.back()']:link	{color:light-dark(#551A8B,#FFADFF)}	/* Standardfarbe für :visited */
/* section	{display:flex;}	Oh das funktioniert nicht so einfach! */
figure x3d	{width:800px;height:600px;border:1px solid gray;margin-left:auto!important;margin-right:auto!important;}
/* sizeable typischerweise für <DIV>, vielleicht <TABLE>, nicht für <CANVAS>, <IFRAME> */
.sizeable	{position:relative;overflow:visible;margin:5px;min-width:30px;min-height:30px;max-width:100%;max-height:100vh;}	/*die 4 sichtbaren Ecken müssen herausstehen können, deshalb overflow:visible und margin*/
.sizeable>div.resizer{width:10px;height:10px;border-radius:50%;position:absolute;}
.sizeable>div.resizer.e0,div.resizer.e1,div.resizer.e2,div.resizer.e3
		{background:rgba(0,0,0,0);}			/* transparente Seiten */
.sizeable>div.resizer.e4,div.resizer.e5,div.resizer.e6,div.resizer.e7
		{background: white;border: 3px solid #4286f4;}	/* sichtbare Ecken */
.sizeable>div.resizer.e0	{left:  -5px;top:    0  ;height:100%;cursor:ew-resize;}
.sizeable>div.resizer.e1	{top:   -5px;left:   0  ;width: 100%;cursor:ns-resize;}
.sizeable>div.resizer.e2	{right: -5px;top:    0  ;height:100%;cursor:ew-resize;}
.sizeable>div.resizer.e3	{bottom:-5px;left:   0  ;width: 100%;cursor:ns-resize;}
.sizeable>div.resizer.e4	{left:  -5px;top:   -5px;cursor:nwse-resize;}
.sizeable>div.resizer.e5	{right: -5px;top:   -5px;cursor:nesw-resize;}
.sizeable>div.resizer.e6	{left:  -5px;bottom:-5px;cursor:nesw-resize;}
.sizeable>div.resizer.e7	{right: -5px;bottom:-5px;cursor:nwse-resize;}

/* Tabelle im Adress-Feld = Telefonnummern */
address table {border:1px solid red;border-radius:3px;margin:2px;font-style:normal;border-spacing:0;}
address table td {padding:2px;vertical-align:top;}
address table th {padding:4px;color:red;font-size:2em;}
address table th:before {content:"📞";}	/* Moderne Browser generieren mehrfarbiges Icon wenn groß*/
address table td[title="Festnetz"]:before {content:"☎";}
address table td[title="Smartphone"]:before {content:"📱";}
address table td[title="Handy"]:before {content:"📱";}
address table td[title="Arbeit"]:before {content:"🎧";}
address a[href^="email"]:before {content:"✉";text-decoration:none;font-size:large;font-style:normal;padding-right:0.2em;display:inline-block;}

/* Thumbnails (Voransichten) für Artikel-Listen, Popup wird von JavaScript behandelt */
img.tn	{width:48px;height:48px}
/* Gezoomte Kopie des Bildes als Overlay (wird per JavaScript instantiiert) */
img.tnh	{
 position:fixed;
 width:auto;
 height:auto;
 display:none;
 z-index:9;
 border:2px solid rgba(255,255,255,0.8);
 animation:fadein 0.25s;
}
@keyframes fadein {
 from{opacity:0;}
 to  {opacity:1;}
}

blink,:not(g).blink	{animation:blink 1s step-start 0s infinite;}
@keyframes blink {
 50%	{opacity: 0;}
}
/* Siebensegment-Anzeige: Standardfarbe, überschreibbar mit lokalem CSS */
svg.sevenseg:not(.rainbow)>g:not(.off)>:not(.off)	{fill:red;}
/* Siebensegment-Anzeige: Ausgeschaltete Digits oder Segmente */
svg.sevenseg>g.off>*,
svg.sevenseg>g>.off	{fill:none;stroke:gray;}
/* Siebensegment-Blinken: digitweise, segmentweise */
svg.sevenseg>g.blink>*,
svg.sevenseg>g>.blink	{animation:blinkG 1s step-start 0s infinite;}
@keyframes blinkG {
 50%	{fill:none;stroke:gray;}
}

/* Unterstützung für app-plot.js */
.popup		{position:absolute;}
table.plot	{background-color:rgb(255, 251, 240);border:1px solid rgb(231,193,87);border-radius:0px 0.5em 0.5em;padding:5px;font-family:Arial,sans-serif;font-size:12px}
table.plot input, table.plot select	{font-size:10px;margin:0;}

/* Autoindex-Teil */
#indextitle	{padding:2px 1em;background:rgba(128,128,128,0.4);border-radius:8px}
#indexlist	{font-family:Arial,sans-serif;
		background:rgba(0,0,0,0.02);
		padding:0em 0.5em 0.5em 0.5em;
		border:#888 2px solid;
		border-radius: 6px;}
#indexlist .even{background: rgba(0,0,0,0.05)}
#indexlist .odd	{background: rgba(0,0,0,0.1)}
#indexlist td	{padding:0 0.4em}
.indexhead th	{padding-bottom:0.4em}
.indexbreakrow	{display:none}
tr.even .indexcolsize,tr.odd .indexcolsize {text-align:right;}