/* Hintergrund und Schriftart */

@font-face {
  font-family:"Open Sans";
  src:local("Open Sans"), url("OpenSans-VariableFont_wdth,wght.ttf");
}

body {
  font-family:"Open Sans",sans-serif; 
  font-weight:370;
  margin:0.2em;
  hyphens:auto;
  text-align:justify;
}

/* Bilder allgemein */
img {
  margin:0.2em;
  width:26em;
  max-width:95%;
}

a img {
    border:0;
}

/* Mein Logo, der Schmetterling */
img.logo {
  width:70%;
  margin-bottom:1em;
}

/* Überschriften */
h1 {
  font-size:175%;
  font-weight:bold;
  text-align:left;
}

h2 {
  font-size:150%;
  font-weight:bold;
  text-align:left;
}

h3 {
  font-size:125%;
  font-weight:bold;
  text-align:left;
}

h4 {
  font-size:100%;
  font-weight:bold;
  text-align:left;
}

/* Tabellen */
table {  
  border-collapse:collapse;
  margin-top:0.5em;
  margin-bottom:0.5em;
}

td {
  border:1px solid #808080;
  padding:0.3em;
  text-align:left;
}

th {
  border:1px solid #808080;
  padding:0.3em;
  background-color:#F0F0F0;
  text-align:left;
}

th sup {
  font-weight: normal;
}

/* Listen */
li {
  text-align:left;
}


/* Quelltexte */
div.code {
  overflow:auto;
  background-color:#F5F6CE;
  margin-top:0.5em;
  margin-bottom:0.8em;
  border-style:solid;
  border-width:1px;
  border-color:#000000;
  font-family:monospace;
  font-size:90%;
  padding-top:0;
  padding-bottom:0;
  padding-left:0.3em;
  padding-right:0.3em;
  border-radius:0.5em;
  hyphens:manual;
  text-align: left;
}

/* Hervorhebung in Quelltexten */
div.code b {
  background-color:#FCFC00;
  font-weight:bold;
}

/* Fußnoten */
ol.footnote {
  font-size:80%; 
  padding-left: 2em;
}

ol.footnote::before {
  content: "________________________________";
}


/* Vorformatierten Text notfalls mit Scrollbalken */
pre {
  overflow:auto;
}

/* Steuert den Google Übersetzer, absichtlich leer */
.notranslate {}

/* Platz für die linke Spalte freihalten */
div.inhalt {   
  margin-left:16.5em;
}

/* Linke Spalte für die Haupt-Navigation */
div.links {
  float:left;
  width:20em;
  font-size:80%;
  text-align:left;
}

/* Rechte Spalte für Bilder, Gliederung, Randnotizen. */
div.rechts {
  float:right;  
  width:25%;
  max-width:20em;
  font-size:80%;
  margin-left:1em;
  text-align:left;
}

/* Bilder in der rechten Spalte */
div.rechts img {
  max-width:98%;
  float:none;
  display:block; 
  margin-left:auto;
  margin-right:auto;
}

/* Grauer Kasten */
div.kasten {
  background-color:#C0C0C0;
  padding:0.3em;
  font-weight:bold;
  margin-bottom:1em;
  border-radius:0.5em;
}

div.kasten a {
  text-decoration:none;
}

div.kasten a:hover {
  background-color:#808080;
}

div.kasten p {
  background-color:#F0F0F0;  
  padding:0.5em;
  margin:0;
  font-weight:normal;  
  border-radius:0.5em;
}

/* Navigationsliste */
div.navigation {
  background-color:#C0C0C0;
  padding:0.3em;
  font-weight:bold;
  margin-bottom:1em;
  border-radius:0.5em;
}

div.navigation ul {
  list-style:none;
  background-color:#F0F0F0;
  padding:0.5em;
  margin:0;
  font-weight:normal;
  border-radius:0.3em;
  text-align: left;
}

div.navigation ul ul {
  padding-top:0;
  padding-bottom:0;
  padding-left:1em;
  padding-right:0;
}

div.navigation li {
  margin-top:0.4em;
  margin-bottom:0.4em;
  list-style:none;
}

div.navigation a {
  display:block;
  text-decoration:none;
  color:black;
  border-style:none;
  outline-style:none;
}

div.navigation a:hover {
  background-color:#808080;
}


/* Das Javascript hebt die aktive Seite in der Navigation hervor */
div.navigation a.active {
  color:purple;
}

/* Sachen die nur auf kleinem Display sichtbar sein sollen */
.only_small {
  display:none;
}

/* Sachen die nur auf großem Display sichtbar sein sollen */
.only_large {
  display:none;
}

/* Ausnahmen für große Displays */
@media only screen and (min-width:70em) {
    
    /* Hintergrundbild und begrenzter Textbreite */
    body {
      background-image:url(pcb2.png);
      background-repeat:repeat;
      margin:auto;
      padding:0.5em;  
      max-width:90em;
    }
    
    /* Weißes Blatt mit runden Ecken */
    div.inhalt {
      background-color:white;
      padding-left:1em;
      padding-right:1em;
      padding-top:0.1em;
      padding-bottom:0.2em;
      border-radius:0.5em;
      margin-bottom:2em;
    }
       
    /* Die linke Spalte fixieren und mit eigendem Scrollbalken versehen */   
    div.links {
      position:fixed;
    }    
    div.links div.navigation .scrollbar {
      max-height:92vh;
      overflow-y:auto;
    }
       
    /* Sachen die nur auf großen Displays sichtbar sein sollen */
    .only_large {
      display:initial;
    }
}

/* Ausnahmen für kleine Displays (Tablets) */
@media only screen and (max-width:60em) {    
    
    /* Die linke Spalte ausblenden, aber nicht auf der Startseite */    
    div.links:not(.startpage) {
      display:none;
    }    
    div.inhalt:not(.startpage) {
      margin: 0;
    }
       
    /* Sachen die nur auf kleinem Display sichtbar sein sollen */
    .only_small {
      display:initial;
    }      
}

/* Zusätzliche Ausnahmen für sehr kleine Displays (Smartphones) */
@media only screen and (max-width:34em) {
   
    /* Die Navigation auf der Startseite erscheint über dem Text in ganzer Display-Breite */    
    div.links.startpage {
      display:initial;
      float:initial;
      font-size:110%;
    }    
    div.inhalt.startpage {
      margin: 0;
    }
    
    /* Font der rechten Spalte sehr klein */
    div.rechts {
      font-size:60%;
    }
           
    /* Die rechte Navigationsleiste (Gliederung) wird ausgeblendet */
    div.rechts div.navigation {
      display:none;
    }
}

/* Ausnahmen für Drucker */
@media only print {

    /* Seitenränder */
    @page {
      margin-left:2.5cm;
      margin-right:2cm;
      margin-top:1.5cm;
      margin-bottom:1.5cm;
    }

    /* Etwas kleinere Schrift als normal */
    body {
      font-size:10pt;
    }
    
    /* Linke Spalte wird ausgeblendet */
    div.links {
      display:none;
    }
    div.inhalt {
      margin:0;
    }
              
    /* Keine Scrollbalken und kein farbiger Hintergrund in Quelltexten */
    div.code {
      overflow:hidden;
      background:none;
    }
    
    /* Kästen ohne Hintergrundfarbe, dafür aber mit Rahmen */
    div.kasten {
      border:1px solid black;
      background-color:transparent;
    }
    
    /* Navigation und Gliederung ohne Hintergrundfarbe, dafür aber mit Rahmen
    div.navigation {
      border:1px solid black;
      background-color:transparent;      
    } */
       
    /* Navigation und Gliederung ausblenden */
    div.navigation {
      display:none;
    }

    /* Links nicht hervorheben */
    a {
      text-decoration:none;
      color:currentcolor;
    }
    
    /* URL hinter Links schreiben */
    a:after {
      content:" (" attr(href) ") ";
      font-weight:normal;
    }
       
    /* In der Navigation sollen die URLs aber nicht gedruckt werden. */
    div.navigation a:after {
      content:"";       
    }
    
    /* Bei anklickbaren Bildern soll die URL nicht gedruckt werden. Kann nicht jeder Browser */
    a:has(> img):after {
      content:"";       
    }


    /* Links, deren URL nicht gedruckt werden soll. */
    a.noprint:after {
      content:"";       
    }

    /* Andere Sachen, die nicht gedruckt werden sollen */
    :not(a).noprint {
      display:none;
    }
              
    /* Seitenwechsel */
    .neueSeite {
      clear: all;
      page-break-before: always;
    }
}