/*----------------------------------------------------------------------------
Autor: Johann Haller, Bildackerstrasse 83, D-78054 Villingen-Schwenningen
Letzte Änderung: 21.10.2017 
----------------------------------------------------------------------------*/
/* -- Alles -- */
* {
  box-sizing: border-box;
  font-family:"Segoe UI",Arial,sans-serif;
}
/* -- Grundbereich -- */
body {
  background-image: url("hintergrund.jpg");
  background-repeat: repeat;
  background-color: #000000;
}
/* -- Oberer Kopf Bereich -- */
.kopf {
  height: 18px;
}
.index{
}
/* --------------------------------------------------------------
   Navigations- Bereich oben 
------------------------------------------------------------------*/
.navigation {
  border:none; /* Rahmen um die Zellen */
  width: 800px;
}
.navigation a {
  font-size: 22px;
  background: radial-gradient(#207B72, #103F3A); /* Fabrverschiebung zur Mitte */
  border-radius:10px;           /* Rahmen abgerundet */
  border: 1px solid #fff;
  float: left;
  color: #FFFFFF;
  margin:  0px   2px 10px  2px; /* Abstand aussen: oben rechts unten links */
  padding: 8px 14px 8px 14px; /* Abstand innen:  oben rechts unten links */
  text-decoration: none;
}
.navigation a:hover, .navigation-innen a:hover {
  background: radial-gradient(#103F3A,#207B72); /* Fabrverschiebung zur Mitte */
}
#aktiv{
  background: radial-gradient(#FF0000,#FF9595); /* Fabrverschiebung zur Mitte */
}
/* --------------------------------------------------------------
   Navigations- Bereich innen 
------------------------------------------------------------------*/
.navigation-innen {
	height: 40px;
}
.navigation-innen a {
  font-size: 16px;              /* Text Größe */
  background: radial-gradient(#207B72, #103F3A); /* Fabrverschiebung zur Mitte */
  border-radius:8px;            /* Rahmen abgerundet */
  float: left;
  color: #ffffff;               /* Text Farbe */
  margin: 10px   2px 10px 10px; /* Abstand aussen: oben rechts unten links */
  padding: 8px 14px 8px 14px;   /* Abstand innen:  oben rechts unten links */
  text-decoration: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* --------------------------------------------------------------
   Mittlerer Bereich - Home Seite
------------------------------------------------------------------*/
.mitte {
  width:   800px;
  height:  500px;
  border: 10px solid #ffffff;
  border-radius:20px;           /* Rahmen abgerundet */
  margin:  0px 0px 0px 0px;     /* Abstand aussen: oben rechts unten links */
  padding: 0px 0px 0px 0px;     /* Abstand innen:  oben rechts unten links */
  background: radial-gradient(#FF8000, #FFA851); /* Fabrverschiebung zur Mitte */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*===============================================================
   Datei: aktuell.html 
-----------------------------------------------------------------*/
.aktuell-links {
  width: 210px;
}
.aktuell-links iframe {
  position: relative;/* position: static|absolute|fixed|relative|sticky|initial|inherit */
  left:   10px;      /* Position von links */
  width: 200px;      /* Breite */
  height:460px;      /* Höhe   */
  border: 0px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius:20px;           /* Rahmen abgerundet */
  }
.aktuell-rechts iframe {
  position: relative;/* position: static|absolute|fixed|relative|sticky|initial|inherit */
  left:    0px;      /* Position von links */
  width: 550px;      /* Höhe   */
  height:460px;      /* Breite */
  border: 0px;       /* Rahmen: Breite Art Farbe */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius:20px;           /* Rahmen abgerundet */
  }
/* --------------------------------------------------------------
   Datei: aktuell-list.html - Position Links in aktuell.html
-----------------------------------------------------------------*/
.aktuell-list-body-html {
  background: #FFA851;
  padding: 0px 0px 0px 0px; /* Abstand innen:  oben rechts unten links */
}
.aktuell-list-body-html a{
  text-decoration: none;   /* Link hat kein Unterstrich */
  color: #000000;          /* Text Farbe */
	}
.aktuell-list-body-html a:hover {
  color: #FFFFFF;          /* Text Farbe */
  }
/* --------------------------------------------------------------
   Datei: aktuell-unwetter.html - Position rechts in aktuell.html
-----------------------------------------------------------------*/
.aktuell-unwetter-body-html {
  background: #FFA851;
  padding: 8px 0px 0px 4px; /* Abstand innen:  oben rechts unten links */
}
/* --------------------------------------------------------------
   Datei: aktuell-blutspenden.html - Position rechts in aktuell.html
-----------------------------------------------------------------*/
.aktuell-blutspenden-body-html {
  background: white;
  padding: 10px 0px 0px 10px; /* Abstand innen:  oben rechts unten links */
}
/* --------------------------------------------------------------
   Datei: aktuell-spacelivecast.html - Position rechts in aktuell.html
-----------------------------------------------------------------*/
.aktuell-spacelivecast-body-html {
  background: black;
  padding: 50px 0px 0px 04px; /* Abstand innen:  oben rechts unten links */
}
/*===============================================================*/
.x003 { /*--- Text Landing Seite ---*/
  color: #000000;               /* Text Farbe */
  font: normal 22px Arial,serif;
}
.x004 { /*--- Datum Uhrzeit Landing Seite ---*/
  color: #000000;               /* Text Farbe */
  font-size: 22px;              /* Text Größe */
}
.x005 {
  opacity: 1;
  display: block;
  width: auto;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  margin: 20px 0px 0px 20px;     /* Abstand aussen: oben rechts unten links */
  border-radius:20px;           /* Rahmen abgerundet */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.x006 { /*--- facebook ---*/
  padding: 0px 0px 0px 20px;    /* Abstand innen:  oben rechts unten links */
  line-height: 40px;            /* Text Zeilenhöhe */
  margin: 20px 0px 0px 0px;    /* Abstand aussen: oben rechts unten links */
}
.x007 { /*--- QR Code ---*/
  border-radius:10px;           /* Rahmen abgerundet */
}
/* --------------------------------------------------------------
   Bild Johann Haller 
------------------------------------------------------------------*/
.container {
  position: relative;
  width: 100%;
  text-align: center;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}
.container:hover .image {
  opacity: 0.4;
}
.container:hover .middle {
  opacity: 1;
}
.middle #text {
  border-radius:10px;           /* Rahmen abgerundet */
  background-color: #FFFFFF;
  color: black;
  font-size: 16px;
  padding:   10px 20px;
  width: 150px;
  position: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*---------------------------------------------------------------
   Textdatei in Object anzeigen
  ---------------------------------------------------------------*/
object {                        /* <object ...></object> */
  background-color: white;      /* Hintergrundfarbe */
  width: 660px;                 /* Breite */
  height:420px;                 /* Höhe   */
  position: relative;           /* relative / static / fixed / absolute */
  border-radius:10px;           /* Rahmen Radius */
  border: 2px solid black;      /* Rahmen:         Breite Art Farbe */
  margin: 0px  0px 0px 20px;    /* Abstand aussen: oben rechts unten links */
  padding:10px 10px 10px  10px; /* Abstand innen:  oben rechts unten links */
  }
/* --------------------------------------------------------------
   Bereich job-werdegang
------------------------------------------------------------------*/
.job-werdegang, .mitte-unten-information {
  color: #000000;               /* Text Farbe */
  font-size: 18px;              /* Text Größe */
  width: 500px;                 /* Breite */
  margin: 0px 0px 0px 8px;      /* Abstand aussen: oben rechts unten links */
  padding:0px 0px 0px 0px;      /* Abstand innen:  oben rechts unten links */
  line-height: 24px;            /* Text Zeilenhöhe */
  text-align: left;             /* Textausrichtung */
}
/* --------------------------------------------------------------
   kontakt-privat.html und kontakt-geschaftlich.html
------------------------------------------------------------------*/
.kontakt td{
  font-size: 16px;           /* Text: Größe */
  font-family:"Segoe UI",Arial,sans-serif;
  color: #FFFFFF;            /* Text: Farbe */
  text-align: left;          /* Text: Ausrichtung */
  text-decoration: none;     /* Text: Unterstrich */
	}
.kontakt table {
	margin: 0px 0px 0px 10px; /* Tabelle: Abstand aussen: oben rechts unten links */
	padding: 8px 0px 0px 8px; /* Tabelle: Abstand innen:  oben rechts unten links */
	line-height: 24px; /* Text: Zeilenhöhe */
	border: 4px solid #C6F0EC; /* Tabelle: Rahmen: Breite Art Farbe */
	border-radius: 10px; /* Tabelle: Rahmen: Radius */
	background: radial-gradient(#207B72, #103F3A); /* Fabrverschiebung zur Mitte */
	width: 750px; /*Tabelle: Breite */
	height: 400px;
}
/* --------------------------------------------------------------
   Datei Job-List 
------------------------------------------------------------------*/
.job-list table {
  width: 598px;
}
.job-list img {
  position: relative;           /* position: static|absolute|fixed|relative|sticky|initial|inherit */
  top:   0px;                   /* position von oben */
  left:  5px;                   /* position von links */
  width: 20px;
  height:20px;
}
.job-list .row {
  width: 40px;
  height:80px;
}
/* --------------------------------------------------------------
   Datei Maschinenbau Schnittstelle
------------------------------------------------------------------*/
.maschinenbau-schnittstelle iframe {
  position: relative;           /* position: static|absolute|fixed|relative|sticky|initial|inherit */
  left:   10px;                 /* position von links */
  width: 200px;
  height:300px;
  background: #FFFFFF;
}
.maschinenbau-schnittstelle div {
  position: relative;           /* position: static|absolute|fixed|relative|sticky|initial|inherit */
  left:   10px;                 /* position von links */
  width: 380px;
  height:280px;
  }
/* --------------------------------------------------------------
   Datei Job-Bilder 
------------------------------------------------------------------*/
.job-bilder .job-bild img {
  position: relative;           /* position: static|absolute|fixed|relative|sticky|initial|inherit */
  top:   0px;                   /* position von oben */
  left:  140px;                 /* position von links */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius:20px;           /* Rahmen abgerundet */
}
/* --------------------------------------------------------------
   Datei Immobilien Text 
------------------------------------------------------------------*/
.imo-bild img {
  position: relative;           /* position: static|absolute|fixed|relative|sticky|initial|inherit */
  top:   0px;                   /* position von oben */
  left:  20px;                 /* position von links */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius:10px;           /* Rahmen abgerundet */
}
.imo-text {
  width: 300px;
  color: #000000;               /* Text Farbe */
  font-size: 18px;              /* Text Größe */
}

/* position: static|absolute|fixed|relative|sticky|initial|inherit 
| Value    | Description                                                                                               |
|----------|-----------------------------------------------------------------------------------------------------------|
| static   | Standardwert. Elemente werden in der Reihenfolge gerendert, wie sie im Dokument erscheinen                |
| absolute | Das Element wird relativ zu seinem ersten positionierten (nicht statischen) Vorgängerelement positioniert |
| fixed    | Das Element wird relativ zum Browserfenster positioniert                                                  |
| relative | Das Element wird relativ zu seiner normalen Position positioniert,                                        |
|          | so dass "left: 20px" 20 Pixel zur LEFT-Position des Elements addiert                                      |
| sticky   | Das Element wird basierend auf der Scrollposition des Benutzers positioniert                              |
|          | Ein klebriges Element schaltet abhängig von der Scrollposition zwischen relativ und fest.                 |
|          | Es wird relativ positioniert, bis eine bestimmte Versatzposition im Ansichtsfenster erreicht ist.         |
|          | Dann wird es "festgeklebt" (wie Position: fest).                                                          |
|          | Hinweis: Wird in IE / Edge 15 oder früher nicht unterstützt.                                              |
|          | In Safari ab Version 6.1 mit einem -webkit-Präfix unterstützt.                                            |
| initial  | Legt diese Eigenschaft auf ihren Standardwert fest.                                                       |
| inherit  | Übernimmt diese Eigenschaft aus dem übergeordneten Element.                                               |
------------------------------------------------------------------------------------------------------------------------
*/