@import "schriften.css";

/* Farben in Variablen, um sie im dark-mode überschreiben zu können */
:root {
--hintergrund:#ffffff;
--text:#333333;
--ueberschrift:#ff6400;
--link:#0082c9;
--rahmen:#eeeeee;
}
@media (prefers-color-scheme: dark) { :root {
--hintergrund:#222222;
--text:#dddddd;
--ueberschrift:#e65c00;
--link:#25abf4;
--rahmen:#333333;
}}

html { overflow:scroll; }
body { color:var(--text); background-color:var(--hintergrund); font-family:norm,sans-serif; font-size:large; letter-spacing:0.01em; line-height:123%; margin:1em 0; padding:0; }

div#seite { clear:left; text-align:left; margin:0 auto; padding:0; width:60em; background-color:var(--hintergrund); }

div#spalte { float:left; padding:1.3em 0 1em 0; line-height:100%; }

div#karte p { color:var(--text); font-size:0.8em; margin:0 0 0.5em 0; }
div#karte p a { color:inherit; }

div#menue { margin-top:2em; }
div#menue ul { list-style-image:url(listicon.svg); margin-left:0; padding-left:25px; }
@media (prefers-color-scheme: dark) { div#menue ul { list-style-image:url(listicon-dark.svg); } }
div#menue ul .noicon { list-style-image:none; list-style-type:none; font-size:0.875em; }
div#menue .aktuell { color:var(--link); font-family:fett,sans-serif; }
div#menue .unter { color:var(--link); font-family:kurs,sans-serif; }

div#inhalt { min-height:30em; border-left:2px dotted var(--link); margin:0 0 0 15.5em; padding:1em 0 1em 2.2em; }
div#inhalt p { font-size:1em; margin:1em 0; }
div#inhalt p.zurueck { margin:2.1em 0 0 0; padding:0.35em 0 0 0; }
div#inhalt p.fuss { border-top:1px solid currentcolor; margin:1.5em 0 0 0; padding:0.35em 0 0 0; }
div#inhalt p.beschriftung { font-family:kurs; font-style:normal; }
div#inhalt h3.abstand { margin-top:1em; }
div#inhalt h3+p { margin-top:0.6em; }
div#inhalt h4+p { margin-top:0.4em; }
div#inhalt section.nebeneinander { display: flex; }
div#inhalt section.nebeneinander p { margin:0; }

h2 { font-family:fett,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.3em; color:var(--ueberschrift); margin:0 0 0.2em 0; padding-top:0; }
h3 { font-family:fett,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.15em; color:var(--ueberschrift); margin:0.35em 0 0 0; padding-top:1em; }
h4 { font-family:norm,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.15em; color:var(--ueberschrift); margin:0.2em 0 0 0; padding-top:0.2em; }
h5 { font-family:norm,sans-serif; font-weight:normal; font-size:1em; color:var(--ueberschrift); margin:0; padding-top:0.2em; }
h2.abstand { margin-top:3em; }
h3.fortlaufend { padding-top:0; }
#rahmen>h2,#rahmen>h4 { margin-top:1em; padding-top:0; }

b { font-family:fett,sans-serif; font-weight:normal; }
i { font-family:kurs,sans-serif; font-style:normal; }
code { font-family:mono,monospace; font-weight:normal; }
a { color:var(--link); text-decoration:none; }
o { color:var(--ueberschrift); }

#rahmen { padding:0.1em 1em; background-color:var(--rahmen); border-radius:6px; }

img { border:0; }
img.logo { max-width:15em; height: auto; }
img.border { border:1px solid var(--ueberschrift); }
img[eql] { content:attr(eql); padding:0.5em; border:2px solid var(--link); position:relative; max-width:35em; margin: 0 0 0 1.5em; }
img[eqlb] { content:attr(eqlb); padding:0.5em; position:relative; max-width:35em; margin-left:1.5em; }

ol { margin-top:0em; line-height:1.25em; }
ol li { margin-top:0.5em; }
ol li.nobullet { list-style-type:none; counter-increment:none;}

ul { margin-top:0em; list-style-type:circle; line-height:1.25em; }
ul li { margin-top:0.5em; }
ul li[tog] { content:attr(tog); line-height:1em; }
ul li.eng { margin-top:0; }
ul li.nobullet { list-style-type:none; }
ul ul { list-style-type:circle; line-height:1.2em; }
ul ul li { margin-top:0; }

td,th { vertical-align:top; }
th.b { font-family:fett,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.15em; }
th.h4 { padding-top:1.5em; font-family:norm,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.15em; color:var(--ueberschrift); }
th.td { padding-top:1.5em; font-family:norm,sans-serif; font-weight:normal; }

abbr { border-bottom:1px dotted var(--text); text-decoration:none; }
abbr:hover { color:var(--link); }
abbr[erkl] { position:relative; }
abbr[erkl]:hover::after, abbr[erkl]:focus::after { display:inline-block; content:attr(erkl); position:absolute; text-align:center; background-color:var(--link); color:var(--hintergrund); max-width:30em; min-width:10em; border-radius:6px; padding:8px; bottom:150%; font-size:1em; left:-5em; }
abbr[erkl]:hover::before { content:""; width:0px; height:0px; position:absolute; border-left:24px solid var(--link); border-right:12px solid transparent; border-top:12px solid var(--link); border-bottom:20px solid transparent; left:2em; bottom:1em; }

details>summary { width:100%; position:relative; cursor:pointer; list-style:none; }
details>summary::-webkit-details-marker { display:none; }
details>summary:hover h3,details>summary:hover h4,details>summary:hover h5 { color:var(--link); }
details>summary:after { content:"+"; position:absolute; right:0; margin-top:-1.15em; font-size:1.15em; font-weight:bold; }
details[open]>summary:after { display:none; /** alternativ: transform:rotate(45deg); **/ }
summary>h3 { padding-top:0; }
summary>h3.abstand { margin-top:1em; }

a.print { display:none; }
@media print { .print {display:block !important;} }