/* Dies ist die PRODUKTIVE screen.css Datei zum freien Layout von selfhtml.org
 * geschrieben von Jeena Paradies <http://jeenaparadies.net/webdesign/leistungen>
 */

/* -- Allgemeines - für alle Display Größen (für Desktop-Anzeige siehe weiter unten) -- */
body {
  background: url(../img/no-img.png) #e6e8ea; /* #e6e8ea Bild als Hintergrund plus Hintergrundfarbe außerhalb des Textblockes*/
  color: black;
  margin: 0;
  padding: 1%; /* Abstand für Eindruck "Blatt an der Wand" */
  /* min-width: 640px; /* Scrollbalken bei weniger als 640px Breite */
  line-height: 1.6em;
  font-size: 111.01%; /* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
  font-family: sans-serif ;
}

a { 
   color: #0B4D8C; 
   text-decoration: underline; 
   padding-right: 1em;
   background: 
    url('data:image/svg+xml;utf-8,\
    <svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
      <polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/>\
      <polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/>\
    </svg>') right no-repeat;	
}   /* unbesuchte Links leicht bläuliche Farbe + unterstrichen + kleines Link-Symbol nach dem Text */

a:visited { 
   color: black; 
} /* Besuchte Links schwarz + unterstrichen */

h1 { /* Haupt-Überschrift jeder Seite */
  font-weight: normal;
  line-height: 1.2em;
  font-size: 4vw;
  padding: 0.6em 0 0.2em 0;
  margin: 0;
  color: #ff3200;
  border-bottom: 0px dashed #c0c0c0; /* im Original-Template: #E6E6FA */
}

h2, h3, h4 { font-weight: normal; }
h2, h3, h4, h5, h6 { /* restliche Überschriften */
  color: #ff3200;
  /* line-height: 1.6em; */
  font-family: sans-serif ;
}

img { /* alle Bilder bekommen einen Rahmen */
  border: solid 1px #aaa;
  padding: 1px;
  max-width: 95%; /* Verkleinerung des Bildes. Funktioniert beim IE leider nicht. */
}

.fleft { /* Sachen, an denen der Text vorbeifließen soll */
  float: left;
  margin: 0 1em 0.2em 0; /* Abstand, sonst kleben die Sachen am Text. */
}
.fright {
  float: right;
  margin: 0 0 0.2em 1em;
}


/* -- Unterschiedliches Verhalten bei Desktop-Anzeige > 1280 px -- */
@media screen and (min-width: 1280px) {
   body {
      width: 1080px; /* Anzeigebreite auf 1080 px setzen */
   }
   
   h1 { /* Haupt-Überschrift jeder Seite */
      font-weight: normal;
      line-height: 1.2em;
      font-size: 2.5em; /* Schriftgröße passend für 1080 */
      padding: 0.6em 0 0.2em 0;
      margin: 0;
      color: #ff3200;
      border-bottom: 0px dashed #c0c0c0; /* im Original-Template: #E6E6FA */
  }
}


/* - Der Hauptinhaltsteil - */
#main {
  background: url(../img/NO-IMG.png) no-repeat 98% 0 #F9F9F9; /* Logo rechts oben in der Ecke, Farbe F9F9F9 = leichtes Hellgrau */
  padding: 0 31% 0 20px; /* rechter Abstand (31%) stellt zwei-Spalten-Eindruck sicher */
  line-height: 1.5em; /* Zur besseren Lesbarkeit Zeilenhöhe erhöhen */
}