/*Wirkung auf alles: *   */
* 	
{
	font-family:arial, sans-serif;
	line-height:1.2;     /* Mind. 1.2, sonst wird die Unterstreichung eines Links durch die Zeile darunter verdeckt */
    margin: 0;
    margin-bottom: 0.3em;  /* Abstand nach jedem Absatz oder Aufzählungspunkt: 0,3-fache Zeilenhöhe */
	/*padding: 0; */
}
	
body
{ 
    background: url(img/backgroundlarge.jpg) no-repeat left top;
    background-attachment: fixed;   /* beim Scrollen bleibt Bild immer sichtbaren Fenster-Bereich */
	background-size: 840px auto;   /* geändert 22.9.2015: Default: 60% der Pixelgröße */
    margin: 0;
    background-color: #ECECEC;     /* 01.04.18 hinzu gefügt. Dieser Befehl muss NACH dem Background-image kommen */
}

/* Zurücksetzen der Auto-Schriftskalierung */
html
{   -webkit-text-size-adjust: none;
}

h1
{
    clear: both;
    padding-top: 18px;
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    text-align: left;
    padding-bottom: 0.25em;    /* geändert 4.1.2016 */	                
}

h2
{
    clear: both;
    /* margin-top: 16px; */   /* besser als padding-top, wenn man den Hintergrund färben will */
                        /* erfordert aber <p style="clear: both"></p>  vor jeder h2 */
    padding-top: 10px;   /* ein bisschen padding: Wenn man zur Textmarke springt, damit dann ein bisschen Rand oben ist */ 
    font-size: 18px;
    font-weight: bold;
    text-align: left; 
}

h3
{
    clear: both;
    padding-top: 0.5em;
    font-size: 16px;
    font-weight: bold;
    text-align: left; 
}

p
{ 
    /*margin-top: 0.3em; */
	font-size: 15px;
	text-align: justify;   /* 23.05.2015 eingefügt */
	-webkit-text-size-adjust: none;
}

p.fragen
{
    font-size: 11px;
    color: #606060;
    /* background-color:lightgrey;
    padding: 0.5%; */
    /* padding-top: 0.5em;  */     /* gelöscht 4.1.2016 */
}

ul, p ul 
{
    margin:0;
    text-align: left;  /* damit zwischen Aufzählungspunkt und 1. Zeichen immer der gleiche Abstand ist */
    list-style-type: square; 
    /*list-style-color: #FF0000;   ändert nix */
    list-style-position:inside;
    padding: 0;
    /*padding-left: 1em;*/ /* nur bei "outside" nötig, damit Aufzählungspunkt nicht hinter figure versteckt */
    /*display: table;  */     /* bei "outside" nötig, damit alle Aufzählungspunkte rechts der figure schieben, auch unterhalb der figure */

    /*padding-right: 1em; */  /* muss genauso groß sein wie "left" bei li */
    /* padding-left:25px; */
    /*border: 1px solid black; */
    
    /*margin-right: 1em;*/
    min-width: 50%;
    font-size: 15px; 
}

ol
{
    margin:0;
    text-align: left;  /* damit zwischen Aufzählungspunkt und 1. Zeichen immer der gleiche Abstand ist */
    /* list-style-type: square; */
    list-style-color: #FF0000;  
    list-style-position:inside;
    padding: 0;
    font-size: 15px;
}

li, p ul li, ul li
{
    /*position: relative;
    left: 2em; */          /* nur damit ist der erste Aufzählungspunkt rechts von der float:left-figure */
    /*display: table;*/
}

img
{
    margin: 0;  /* hinzu am 25.6.2015 => Tabellen mit Wortwahl brauchen weniger Platz */
}

#kopfzeile
{
    z-index: 1;           /* Liegt über anderen Inhalten der Webseite oben drüber */ 
    border: 0;            /* keine Linie um die Kopfzeile herum */
    /*position: absolute;*/   /* schiebt sich beim Scrollen hoch */
    width: 100%;          /* immer über gesamte Fensterbreite */
    height: auto;        /* automatisch die Höhe des Kopfzeilenbilds übernehmen */    
    top: 0;   left: 0;    /* Position ganz oben links in die Ecke */
    margin: 0;            /* an allen Seiten keinen Abstand */
    overflow: hidden;     /* das Kopfzeilenbild soll nicht in den Bereich außerhalb des Fensters ragen => dadurch gibt es keinen Scrollbalken) */
    /* background: url(kopfzeile.jpg) no-repeat left top; */
}

#kopfzeile img
{
    width: 840px;   /* geändert 22.9.2015: Default: 60% der Pixelgröße */
    height:auto;        /* Höhe immer passend zu Breite */
    overflow:hidden;
    margin:0;
}

#buttons
{   
    margin-top: 1px;    /* geändert 24.9.2015 links und rechts 4px -> 1% */
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 4px;
}

#buttons a
{
    font-size: 0px;         /* Schrift der Button-Links so klein, dass man sie nicht sieht */
    color: gray;           /* dunkelgrau */
    text-decoration: none;  /* keine Unterstreichung */
}

.notselected, .selected
{
    float: left;
    width: 66px;   height: 66px;
    border-radius: 8px;
}

.notselected
{
    box-shadow: 0px 1px 3px 2px #000000;  /* X-Versatz  Y-Versatz  verwischung, Übergröße */
    margin-top: 3px;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 5px;
}

.selected
{
    box-shadow: 0px 0px 1px 1px black,
                0px 0px 5px 5px #00FF00;
    margin-top: 4px;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
}


/* Vorgaben für alle divs mit normalem Inhalt */
/* id,      class,    id,           id        */
#inhalte, .inhalt, #gefaehrlich, #geschenke
{
    clear: both;
    padding-left: 1%;    /* geändert 24.9.2015 5px -> 1%. Ab 23.8.2017: padding statt margin zum Hintergrund färben */
    padding-right: 1%;   /* geändert 24.9.2015 5px -> 1%. Ab 23.8.2017: padding statt margin zum Hintergrund färben */
    /*max-width:1396px; */   /* entfernt 24.9.2015 */
    /* text-align: justify;*//* 23.5. gelöscht, damit es nicht für Banner wirkt */
    text-aligh: left;
    padding-bottom: 0.5em;
    margin: 0;
}
#gefaehrlich  {   background-color: rgba(255, 128, 80, 0.15);   }   /* rot-oranger Hintergrund */
#geschenke    {   background-color: rgba(128, 255, 80, 0.15);   }   /* grüner Hintergrund */



#fusszeile
{
    clear: both;  /* sicherheitshalber */
    z-index: 2;
    /*max-width:1406px;*/   /* entfernt 24.9.2015 */
    margin-top: 8em;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 0; /* oben viel Abstand, sonst Null */
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: black;
    /*background-color: #CCFFCC;*/
    border-top: 1px solid grey;
}

#fusszeile a /* Angaben für Links in der Fußzeile */ 
{
    color: black;         /* dunkelgrau */
    text-decoration: none;  /* keine Unterstreichung */
}    

figure
{
    /*padding: 5px;*/
    float: left;
    margin-left: 0;
    margin-top: 2px;
    margin-right: 4px; /* Abstand seitlich zum Text */
    margin-bottom: 2px;
    /* border-radius: 8px 8px 8px 8px;  */
    border-radius: 0px 0px 8px 8px;
    background-color: #BBCCCC;
    line-height:1.0;
    width: 33%;
    max-width: 240px;
    /* box-shadow: 0px 0px 10px 1px #FFFFFF; */ /* X-Versatz  Y-Versatz  Verwischung, Übergröße */
}

figure img
{
    /* border-radius: 8px 8px 0px 0px; */
    margin: 0;
    width: 100%;
    height: auto;
    /*display: table-row;*/
}

figure figcaption
{
  padding: 0px 5px 0px 5px;
  margin: 0;
  line-height:1.0;
  /*background-color: #BBBBBB;*/
  color: #000000;   /* 11.4.2016 aktiviert: Immer schwarz, auch bei Links */
  text-align: center;
  /* font-style: italic; */
  /* border-radius: 0 0 8px 8px;  */
  padding-bottom: 0.2em;
  /*max-width: 100%; */
  /*display: table-row;  */
  display: run-in; /*width: 230px;*/
  font-size: 14px;
}


table
{
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;    
}

.fixtable /* zusätzliche Angaben für table mit fixer Spaltenbreite */
{
    table-layout: fixed;
    width: 100%;
}

.narrowtable /* zusätzliche Angaben für schmale table */
{
    table-layout: fixed; /* ´wichtig, damit Smileys in allen Spalten gleich groß sind */
    width: 66%;          /* so dass sie neben ein figure (max 33% breit) passt */
    margin-left:auto;    /* sorgt dafür, dass die Tabelle ... */ 
    margin-right:auto;   /* ...zentriert in der Mitte sitzt   */
}

/* flextable ist grundsätzlich schmal, wird bei schmalem Bildschirm aber über volle Breite gezeigt */
.flextable /* zusätzliche Angaben für table der narrow oder bei schmalem Bildschirm über volle Breite geht*/
{
    table-layout: fixed; /* ´wichtig, damit Smileys in allen Spalten gleich groß sind */
    width: 66%;          /* so dass sie neben ein figure (max 33% breit) passt */
    margin-left:auto;    /* sorgt dafür, dass die Tabelle ... */
    margin-right:auto;   /* ...zentriert in der Mitte sitzt   */
}

th
{
    vertical-align: top;
    border: 4px solid #888888;
	padding: 0.4%;            /* bei schmalem Display (iPhone) weniger padding */
	font-size: 100%;
	overflow: hidden;
	background-color:white;   /* Hervorhebung der Headings */
	font-weight:normal;       /* damit auf iPhone usw. mehr Buchstaben passen */
}
td
{
    vertical-align: top;
    border: 4px solid #888888;
	padding: 0.4%;
	font-size: 100%;
	overflow: hidden;
}

th img, th a img /*, td img */  /* Sonderregeln für Bilder in einer Tabelle */
{
    margin: 0;
    max-width: 240px;
    width: 100%;
    height: auto; /* wichtig, falls breite <240px */
}

th p /* SOnderregeln für p im th */
{
    text-align: center;
}

/* Vorgaben für Tabellenfelder mit Smileys */
td.fav  {   background-color: #80FF50; border-radius: 8px 8px 0px 0px;   }
td.alt  {   background-color: #70E0FF; border-radius: 8px 8px 0px 0px;   }
td.gut  {   background-color: #80FF50;    }
td.mid  {   background-color: #FFFF50;    }
td.bad  {   background-color: #FF8050;    }
td.non  {   background-color: #D0D0D0;    }
td.reg  {   background-color: #70E0FF; border-radius: 8px 8px 8px 8px;   }
/* Vorgaben für die Smiley-images: */
td.gut img, td.mid img, td.bad img, td.non img 
{
    float: left;
    max-width: 25%; /* img is 32 x 32px, so image will always be <= 32 x 32px without any command */   
    height: auto;
    margin-right: 2%; /* hinzu am 25.6.2015 => bisschen Platz rechts neben Smiley */
}

a img
{
    max-width: 100%;    /* Damit Werbebanner auf Smartphone verkleinert werden */
    margin: 0;
}

iframe     /* für amazon Werbebanner */
{
    margin: 0;
}                        
    

/* Sonderregeln für kleine Smartphone-Bildschirme: */
/* ================================================*/
@media screen and (min-width: 840px)    /* für breite Bildschirme >840px */
{
    #kopfzeile img  {  width: 103%;                 }  /* sicherstellen, dass Kopfzeilenbild und ... */
    body            {  background-size: 103% auto;  }  /* ...Hintergrundbild über die gesamte Breite des Fensters gehen */
}

@media screen and (max-width: 290px) /* für sehr schmale Smartphone-Bildschirme */
{
    #kopfzeile img  {  width: 300%;                 } /* Kopfzeilenbild und ... */
    body            {  background-size: 300% auto;  } /* Hintergrundbild kleiner */
}


@media screen and (max-width: 639px) /* <640px Breite wird's in den Tabellen zu eng */
{
    td, th            {  font-size: 14px;              /* daher Tabellenschrift kleiner */
                         border: 3px solid #666666; }  /* und Linien dünner und dunkler, */
    p, ul, ol         {  font-size: 14px;  }           /* entsprechend den Text außerhalb der Tabellen kleiner */
    figure figcaption {  font-size: 13px;  }           /* und Bildunterschriften auch kleiner. */
    
    
}

@media screen and (max-width: 499px) /* <500px Breite wird's in den Tabellen noch enger */
{
    td, th            {  font-size: 13px;              /* daher Tabellenschrift kleiner */
                         border: 2px solid #444444; }  /* und Linien dünner und dunkler, */
    p, ul, ol         {  font-size: 13px;  }           /* entsprechend den Text außerhalb der Tabellen kleiner */
    figure figcaption {  font-size: 12px;  }           /* und Bildunterschriften auch kleiner. */
    p.fragen          {  font-size: 10px;  }
    /* * {  transform: scale(0.8);  }  */
}


@media screen and (max-width: 999px) /* <1000px Breite bleibt bei 3 Bildern nebeneinander zuwenig Platz daneben für Text. */
{
    figure.drittesbild {  clear:both; }       /* Daher keine 3 Bilder nebeneinander. Nur noch untereinander. */
}

@media screen and (max-width: 759px) /* <760px Breite bleibt bei 2 Bildern nebeneinander zuwenig Platz daneben für Text. */
{
    figure            {  clear:both;        /* Daher keine 2 Bilder nebeneinander. Nur noch untereinander. */
                         width: 50%;   }    /* das hier greift erst <480px Breite: Bilder max. auf halbe Bildschirmbreite */
    table.flextable   {  width: 100%;  }    /* ausgleichend: flextable jetzt auf volle Breite */
}