:root
{
 --background-color:#112d37;
 --text-color:#acab;
 --pre-color:#2e7892;
 --secondary-color:#e8d5c4;
 --heading-color:#3a98b9;
 --background-shade-color:#eee1;
 --input-color:#110;
 --keypress-background-color:#deadbeef;
 background-color:var(--background-color);
 color:var(--text-color);
 min-height:calc(100% - 4ex);
 margin:1rem 2.5rem;
 hyphens:auto;
 scroll-behavior:smooth;
}
body
{
 display:flex;
 flex-direction:column;
 align-items:center;
 margin:0;
}
main
{
 max-width:min(80ch,100%);
 margin:0;
 margin-left:min(160ch - 100%,100% - min(80ch,100%));
}
@media(min-width:256ch)
{
 main
 {
  margin-left:0;
 }
}
h1,h2,h3,h4,h5,h6
{
 margin-top:3rem;
 color:var(--heading-color);
}
h3,h4,h5,h6
{
 position:sticky;
 z-index:1;
 top:0;
 background-color:var(--background-color);
 line-height:1.5rem;
}
details h3,details h4,details h5,details h6
{
 position:static;
 background-color:inherit;
}
pre
{
 background-color:var(--pre-color);
 color:var(--secondary-color);
 padding:1rem;
 border-radius:.9rem;
 overflow-x:auto;
}
a, a > span
{
 color:var(--heading-color);
 background-position:left;
 background-size:1rem 1rem;
 background-repeat:no-repeat;
 text-decoration:underline;
}
a:hover, a:hover > span
{
 text-shadow:0 0 .06rem;
 text-decoration:underline;
}
main a:hover /*, main a:hover > span*/
{
 filter:brightness(1.2);
}
/*a::has(img)
{
 display:contents;
}
main a:has(> img):hover
{
 filter:none;
}*/
main a.popup:hover
{
 filter:none;
}
summary
{
 cursor:pointer;
 text-indent:.5rem;
}
summary:hover::marker
{
 color:var(--heading-color);
}
summary > h1,summary > h2,summary > h3,summary > h4,summary > h5,summary > h6
{
 display:inline;
}
@media(max-width:60rem)
{
 h1
 {
  font-size:1.5rem;
 }
 h2
 {
  font-size:1.25rem;
 }
}

/* anschalten, geht – wenn der Browser nicht immer den Lightmode wählt */
/*@media(prefers-color-scheme:light)
{
 :root
 {
  --background-color:#eee;
  --text-color:#000;
  --pre-color:#2e7892;
  --secondary-color:#e8d5c4;
  --heading-color:#112d37;
  --background-shade-color:#1312;
 }
}*/

@media(min-width:60rem)
{
 :root
 {
  font-size:1.5rem;
 }
}
details
{
 background-color:var(--background-shade-color);
 padding:.5rem 1rem;
 position:relative;
}
details[open]
{
 padding-bottom:.5rem;
}
pre kbd
{
 color:var(--input-color);
}
pre kbd > kbd
{
 background-color:var(--keypress-background-color);
}
code
{
 hyphens:none;
}
pre > *
{
 margin-right:1rem; /* nicht optimal, weil das den Abstand nur in der letzten Zeile macht */
}
/* Navi-Layout angelehnt an https://secushare.org/PGP */
nav
{
 top:max(10vh,5rem);
 position:fixed;
 z-index:2;
 left:0;
 width:0;
 line-height:1rem;
 font-size:80%;
 hyphens:none;
 transform:rotate(-90deg);
 transform-origin:right top;
}
nav > ol
{
 background-color:var(--heading-color);
 margin:1.15rem 0 0 max(10vh,5rem);
 display:none;
 color:var(--background-color);
 border-radius:.9rem;
 padding-top:1rem;
 padding-bottom:1rem;
 min-width:min(42ch,80vw);
 box-shadow:0 0 1rem 1rem var(--background-shade-color);
 transform:rotate(90deg);
 transform-origin:left top;
}
nav:hover > ol
{
 display:block;
}
nav:hover > label
{
 border-color:var(--heading-color);
}
nav a
{
 color:var(--background-color);
 text-decoration:none;
}
nav > input:checked ~ ol
{
 display:block;
}
nav > input
{
 display:none;
}
nav > label
{
 white-space:nowrap;
 font-weight:bold;
 position:absolute;
 z-index:3;
 right:0;
 top:0;
 cursor:pointer;
 background-color:var(--heading-color);
 padding:0 .7rem .7rem;
 color:var(--background-color);
 border-radius:0 0 2rem 2rem / 0 0 .9rem .9rem;
 border:.2rem solid var(--text-color);
 border-top:0;
}
nav > label::before
{
 content:'↓ ';
}
nav > input:checked ~ label::before
{
 content:'↑ ';
}
nav > input:checked ~ label
{
 border-color:var(--heading-color);
}
nav > label:hover
{
 text-shadow:0 0 .06rem;
}
@media(min-width:194ch)
{
 nav > ol
 {
  display:block;
 }
 nav > label
 {
  border-color:var(--heading-color);
  cursor:inherit;
 }
 nav > label::before,nav > input:checked ~ label::before
 {
  content:'';
 }
 nav > label:hover
 {
  text-shadow:inherit;
 }
}
a.popup:has(> popup)
{
 display:contents;
}
a.popup > img
{
 position:absolute;
 max-width:calc(100% - 2rem);
 /* Wenn die Browser das unterstützen, kann man das anschalten: */
 /*left:max(1rem,50% - attr(width px,740) / 2);*/
}
a.popup > img.w448
{
 left:max(1rem,50% - 224px);
}
a.popup > img.w480
{
 left:max(1rem,50% - 240px);
}
a.popup > img.w740
{
 left:max(1rem,50% - 370px);
}
a.popup:hover > img
{
 display:block;
}
a[href^="https://de.wikipedia.org/wiki/"]
{
 padding-left:1.2rem;
 background-image:url(img/wp.svg);
}
a[href^="https://en.wikipedia.org/wiki/"]:not(:has(> img))
{
 padding-left:1.2rem;
 background-image:url(img/wp.svg);
}
a.wplink
{
 padding-left:1.2rem;
 background-image:url(img/wp.svg);
}
a[href^="https://web.archive.org/web/"],a#archivelink
{
 padding-left:1.2rem;
 background-image:url(img/archive.svg);
}
a[href^="https://media.ccc.de/"],a#voclink
{
 padding-left:1.2rem;
 background-image:url(img/voc.svg);
}
a[href*="gnupg.org"],a#gpglink
{
 padding-left:1.2rem;
 background-image:url(img/gpg.svg);
}
a[href$=".onion"],a#torlink
{
 padding-left:1.2rem;
 background-image:url(img/tor.svg);
}
main a[href^="#"]::before
{
 content:'#';
}