/* --------------------------------------------------------------------------------------------------------------------------------------------------
HTML
-------------------------------------------------------------------------------------------------------------------------------------------------- */

body {margin:0; line-height:26px; font-size:16px; color: #14395d;}
address, blockquote, dl, fieldset, form, h1, h2, h3, h4, h5, h6, ol, p, table, ul {margin:15px 0;}
@import url('https://fonts.googleapis.com/css2?family=Gluten:wght@300&display=swap');



h1 { 
  font-size: 1.7em;
  text-shadow:  1px  1px 1px black,
  1px -1px 1px black,
 -1px  1px 1px black,
 -1px -1px 1px white;
 color: #fff;
  background-color: #c20000;
  font-weight: bolder;
  padding: 2px 50px; 
  border: solid 1px #fff;
  box-shadow:  1px  1px 1px black,
  1px -1px 1px black,
 -1px  1px 1px black,
 0px 0px 1px white;
}

h2 { 
  font-size: 1.1em;
  color: #fff;
  background-color: #14395d;
  font-weight: bolder;
  padding: 1px 20px; 
  margin-bottom:-10px;
}

h3, h4, h5, h6 {font-size:17px; font-weight:bold;}
ul li {padding-left:15px;}
ul ul {margin:0; font-size:15px;}
ul ul li {padding-left:15px; }
table th {padding:5px; font-weight:bold; text-align:center;}
table td {padding:5px; border:non;}
fieldset {padding:9px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
fieldset legend {font-weight:bold;}
fieldset form, fieldset dl {margin:0;}
fieldset dd {margin-bottom:5px;}
img.f-left {margin-right:9px;}
img.f-right {margin-left:9px;}
.input-text {width:95%; padding:4px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:url("../design/input-text.png") 0 0 repeat-x;}
.input-submit {padding:4px;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
LAYOUT
-------------------------------------------------------------------------------------------------------------------------------------------------- */
#container {margin: auto; max-width: 850px; padding:2px; }
#wrapper {position:relative; min-height:100%; overflow:auto; background: #14395d;   box-shadow: 2px 2px 2px black;  border: 5px solid #14395d; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;}
#header {position:relative; height:60px; padding:0 9px; border-bottom: 0px solid #668BCC;}
#header #logo {position:absolute; top:7px; left:100px; margin:0;}
#header #logo a {text-decoration:none;}
#pic2 {position:absolute; width:70px; height:70px; margin-left: 22px; border-left: 3px solid #fff; box-shadow: 3px 3px 7px black; }
#content {display: flex; justify-content: center; align-items: center;	flex-wrap: wrap;  padding:15px 35px; background:url("../design/back12.jpg");}
#footer {position:relative;  box-shadow: 20px 20px 50px black;  padding:4px 4px;  background-color:#14395d;  font-size:12px; border-top: solid 3px #c20000;}
#footer #footer-button a {display:block; position:absolute; top:9px; right:9px; padding:5px 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:url("../design/footer-button.png") 0 100% repeat-x; font-size:12px; text-decoration:none; text-align:center; font-weight:bold;}
#footer p {margin:0; color: rgb(179, 179, 179);}
#navibereich {
  background-color: #14395d;        /* Hintergrundfarbe für die Navigation */ 
  padding: 4px 0;                   /* Innenabstand: oben/unten 4px, li/re 0 */
  border-top: 0px solid #14395d;    /* Rahmenlinie oben */
  border-bottom: 3px solid #c20000; /* Rahmenlinie unten */
  margin: 0;                        /* Keinen Außenabstand */ 
  font-weight:bolder;
  font-size: 1.0em;
  box-shadow: 2px 2px 5px black;
}
#navibereich li {
  display: inline;            /* Listenelemente nebeneinander */
  list-style-type: none;      /* Aufzählungszeichen entfernen */
}
#navibereich a {
  color: #fff;                  /* Schriftfarbe schwarz */ 
  text-decoration: none;         /* Unterstreichung entfernen */ 
  padding: 10px 10px;              /* oben/unten 4px, re/li 8px */
}

#navibereich a:hover,        /* mit Komma am Ende */
#startseite #navi01 a,       /* mit Komma am Ende */
#kontaktseite #navi02 a {    /* ohne Komma am Ende */
  background-color: #c20000;
  transition: 1.5s;
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: HOMEPAGE
-------------------------------------------------------------------------------------------------------------------------------------------------- */

.box {
  background-color: #fff; 
	width: 350px;
  height: auto;
	margin: 10px;
	text-align: left;
  box-shadow: 2px 2px 5px black;
  border: solid 5px #14395d;
  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
  font-size: 0.9em;
}

.boxg {
	width: 365px;
  height: 565px;
	margin-top: 5px;
  box-shadow: 3px 3px 7px black;
  border: solid 5px #14395d;
  border-left: solid 10px #14395d;
  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
  font-size: 0.9em;
}

.boxg2 {
  background-color: #fff; 
	width: 700px;
  height: auto;
	margin: 10px;
	text-align: left;
  box-shadow: 2px 2px 5px black;
  border: solid 5px #14395d;
  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
  font-size: 0.9em;
}
.boxg2 p {padding:15px; margin-bottom: -10px;}


/* Nach Oben */
.obenkreis {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: rgba(51,51,51,0.6);		/* Hintergrundfarbe (Kreis) */
    animation: anitop 1s;
  }
  @keyframes anitop {
    0%{opacity:0}
    100%{opacity:1}
    }
  .obenpfeil-1, .obenpfeil-2 {
    border: solid #fff;						/* Farbe Pfeile */
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
    position:absolute;
     left:50%;
     margin-left:-6px;
    transition: all 0.2s ease;
    }
  .obenpfeil-1 {
    top:15px;
    }
  .obenpfeil-2 {
    top:22px;
    }
  .obenkreis:hover .obenpfeil-2 {
    top:8px;
  }
  #back-top2 {
  position: fixed;
  bottom: 5%;
  right:5%;
  z-index: 1000;
  }
  #back-top2  span{
  display: block;
  }
  @media (max-width: 1680px) {
  #back-top2 {
  bottom: 5px;
  right:5px;
  }}

/* LINK */

a:link {
  text-decoration: none;
}



/* GALERIE */

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #c20000;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}