:root {
	--orange: #EE713A;  /*#e55d29; */
    --grau: #EaEbEc;
	--blau: #003366;
	--schwarz: #000000;
	--weiss: #ffffff;
    --dunkelgrau: #555;
    --hellblau: #B8e2F2;
}

@font-face {

font-family: 'sen';

/*src: url('sen-Bold.otf'); */
src: url('fonts/sen-regular.otf');
}

@font-face {

font-family: 'KaushanScript-Regular';
src: url('fonts/KaushanScript-Regular.otf');
}


   body {
    background: var(--hellblau);
    background-size:contain;
}


/* folgende Definition bezieht sich auf TAG h1 */
h1 {
  color:var(--blau);   /* Farbe rot */
  font-size:3em;  /* Größe 28pt   */
  font-family:sen, "sen-regular", sans-serif; /* Schriftart */
}

h2 {
  color:var(--schwarz);   /* Farbe schwarz */
  font-size:2.5em;  /* Größe 20pt   */
  font-family:sen, "sen-regular", sans-serif;
  /*font-style: italic; /* Schriftart */
}

h3 {
  color:var(--hellblau);   /* Farbe weiß  */
  font-size:2em;  /* Größe 28pt   */
  font-family:sen, "sen-regular", sans-serif; /* Schriftart */
}

/* folgende Definition bezieht sich auf TAG h2 */
h4 {
  color:var(--dunkelgrau);   /* Farbe */
  font-size:1.5em;  /* Größe 20pt   */
  font-family:sen, "sen-regular", sans-serif;
  /* font-style: italic; /* Schriftart */
}
h5 {
  color:var(--hellblau);   /* Farbe schwarz SW-Bauwelt */
  font-size:3em;  /* Größe 20pt   */
  /*font-family:Brush Script MT, "Brush Script Std", cursive;   */
  font-family:sen, "sen-regular", sans-serif;
  /* font-style: italic;*//* Schriftart */
}
h6 {
  color:var(--weiss);   /* Farbe schwarz SW-Bauwelt */
  font-size:1.5em;  /* Größe 20pt   */
  font-family:sen, "sen-regular", sans-serif, sans-serif;
}

/* folgende Definition bezieht sich auf TAG p */
p {
  color:var(--dunkelgrau);   /* Farbe schwarz SW-Bauwelt */
  font-size:1.1em;  /* Größe 12pt   */
  font-family:sen, "sen-regular", sans-serif; /* Schriftart */
}

 #centerblock {
  border-top: 0px solid var(--blau);
  border-left: 0px solid var(--blau);
  border-right: 0px solid var(--blau);
  margin-left: 35%;
  /*margin-right: auto;   */
  width: 480px;
  height: 240px;
  background-color: transparent; /*var(--grau); */
  display: flex;
  /*align-items: center;
  justify-content: center;
  -webkit-align-items: center; */
}

 #Logo {
 margin-left: 1%;
 float:left;
 width:20%;
 background-color: var(--weiss);
 }

 #Kopfleiste {
 width: 100%;
 padding-left: 120px;
 border-top: 1px solid var(--hellblau);    /* Rahmenlinie oben */
 border-bottom: 1px solid var(--hellblau); /* Rahmenlinie unten */
 background-color: var(--weiss);
 }

 #inhaltsbereich {
 margin-left: 0%;
 width:100%;
 padding: 10px;
 background-color: var(--grau);
}
 #trenner {
 margin-left: 0%;
 width:100%;
 padding: 15px;
 background-color: var(--orange);
}


#navigationsbereich {
 float:left;
 margin-left: 0%;
 width:15%;
 background-color: var(--blau);
 position: fixed;
 }
#fussbereich li {
      display: inline;            /* Listenelemente nebeneinander */
      list-style-type: none;      /* Aufzählungszeichen entfernen */
}

#fussbereich {
     clear: both;
     bottom: 0;
     width: 100%;
     background-color: var(--grau);
}
#fussbereich a {
     color: var(--blau);       /* Schriftfarbe schwarz */
     text-decoration: none;         /* Unterstreichung entfernen */
     padding: 8px 12px;              /* oben/unten 4px, re/li 8px */
     font-size: 1.5em;  /* Größe 28pt   */
     font-family:sen, "sen-regular", sans-serif;
}
 ul {
  list-style-type: none;
  margin: 5px;
  padding: 5px;
  width: 350px;
  background-color: var(--blau);
}

li a {
  display: block;
  color: var(--weiss);
  padding: 5px 12px;
  text-decoration: none;
  font-size: 1.1em;  /* Größe 28pt   */
  font-family:sen, "sen-regular", sans-serif;
}

/* Change the link color on hover */
li a:hover {
  background-color: var(--dunkelgrau);
  color: var(--hellblau);
}

li img {
  width: 100px;
  padding-left: 20px;
  padding-right: 20px;
}


.kopf_box {
      float:left;
      margin: 20px 20px 0px 0px;       
      background: var(--hellblau);
      border: 1px solid   var(--blau);
      border-radius: 0 0.5em 0.5em;
      opacity:0.9;
      color: var(--weiss);
      width:100%;
      font-size: 2em;
      text-align: center;
      font-family:sen, "sen-regular", sans-serif;
}

 .blink {
   background: var(--blau);
   border: 1px solid   var(--weiss);
   border-radius: 0 0.5em 0.5em;
   box-shadow: 5px 10px 7px silver;
   color: var(--weiss);
   padding: 20px;
   margin-left: 10%;
   width:85%;
   font-size: 1.3em;
   text-align: left;
   font-family:sen, "sen-regular", bold, sans-serif;
   animation: blinker 6s linear infinite;
}

@keyframes blinker
{
  50% {
  opacity: 0;
  }
}
.info_box_float{
    float:left;
    margin: 20px 20px 0px 0px;
    background: var(--weiss);
    border: 1px solid   var(--blau);
    border-radius: 0 0.5em 0.5em;
    box-shadow: 5px 10px 7px silver;
    opacity:0.9;
    color: var(--blau);
    padding:20px 20px 20px 20px;
    width:380px;
    height:420px;
    font-size: 1em;
    text-align: left;
    font-family:sen, "sen-regular", sans-serif;
    transition: transform 0.1s, width 0.1, height 0.1s;
}
.info_box_float:hover{
    transform: scale(1.05);
}


.info_box_float_orange{
    margin: 20px 20px 0px 0px;
    float:left;
    background: var(--blau);
    border: 1px solid   var(--weiss);
    border-radius: 0 0.5em 0.5em;
    box-shadow: 5px 10px 7px silver;
    color: var(--weiss);
    padding:20px 20px 20px 20px;
    width:380px;
    height:420px;
    font-size: 1em;
    text-align: left;
    font-family:sen, "sen-regular", sans-serif;
    transition: transform 0.1s, width 0.1s, height 0.1s;
}
.info_box_float_orange:hover{
    transform: scale(1.05);
}


.info_box_float_blau{
    margin: 20px 20px 0px 0px;
    float:left;
    background: var(--weiss);
    border: 1px solid   var(--weiss);
    border-radius: 0 0.5em 0.5em;
    box-shadow: 10px 20px 15px silver;
    color: var(--weiss);
    padding:0px 20px 20px 20px;
    width:380px;
    height:280px;
    font-size: 1em;
    text-align: left;
    font-family:sen, "sen-regular", sans-serif;
}
.info_box_links_mini {
      margin: 10px 10px 0px 0px;
      float:left;
      background: var(--blau);
      border: 1px solid   var(--weiss);
      border-radius: 0 0.5em 0.5em;
      opacity:0.9;
      color: var(--weiss);
      padding: 15px;
      width:200px;
      height:320px;
      font-size: 1em;
      text-align: left;
      font-family:sen, "sen-regular", sans-serif;
      transition: transform 0.1s, width 0.1s, height 0.1s;
}
.info_box_links_mini:hover{
    transform: scale(1.05);
}

.minibanner {
      margin: 10px 10px 0px 0px;
      float:left;
      background: var(--weiss);
      border: 1px solid   var(--blau);
      border-radius: 0 0.5em 0.5em;
      opacity:0.9;
      color: var(--weiss);
      padding: 10px;
      width:320px;
      height:120px;
      font-size: 1em;
      text-align: left;
      font-family:sen, "sen-regular", sans-serif;
      transition: transform 0.1s, width 0.1s, height 0.1s;
}
.minibanner:hover{
    transform: scale(1.05);
}
.info_box_links_schmal {
      float:left;
      margin: 20px 20px 0px 0px;
      background: var(--blau);
      border: 1px solid   var(--weiss);
      border-radius: 0 0.5em 0.5em;
      box-shadow: 10px 20px 15px silver;
      color: var(--weiss);
      padding: 20px;
      width:380px;
      font-size: 1em;
      text-align: left;
      font-family:sen, "sen-regular", sans-serif;
}
.info_box_right_breit {
      margin: 20px 20px 0px 0px;
      float:left;
      background: var(--grau);
      border: 1px solid   var(--weiss);
      border-radius: 0 0.5em 0.5em;
      box-shadow: 10px 20px 15px silver;
      opacity:0.9;
      color: var(--dunkelgrau);
      padding: 20px;
      border: 1px solid var(--orange);
      width: 380px;
      font-size: 1em;
      text-align: left;
      font-family:sen, "sen-regular", sans-serif;
      font-weight: normal
}
 .info_box {
      float:left;
      margin: 20px 20px 0px 0px;
      background: var(--blau);
      border: 1px solid   var(--weiss);
      border-radius: 0 0.5em 0.5em;
      box-shadow: 10px 20px 15px silver;
      opacity:0.9;
      color: var(--weiss);
      padding: 15px;
      border: 1px solid var(--weiss);
      margin-left: 0%;
      width:40%;
      font-size: 1em;
      text-align: left;
      font-family:sen, "sen-regular", sans-serif;
}
.info_box_right {
      margin: 20px 20px 0px 0px;
      background: var(--grau);
      border: 1px solid   var(--weiss);
      border-radius: 0 0.5em 0.5em;
      opacity:0.9;
      color: var(--dunkelgrau);
      padding: 20px;
      border: 1px solid var(--blau);
      margin-left: 42%;
      width:40%;
      font-size: 1em;
      text-align: left;
      font-family:sen, "sen-regular", sans-serif;
      font-weight: normal
}

img {
    width: 100%;
	object-fit: cover;
    height: auto;
    border: 0px solid   var(--blau);
    border-radius: 0 0.5em 0.5em;
}

    {
        font-family:sen, "sen-regular", sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    input[required] {
          border-color: red;
    }

    input[type=checkbox] {
        margin-left: 1%;
        width: 30px;
        height: 30px;
        border: 4px solid var(--blau);
        border-radius: 4px;
        background-color: var(--orange);
    }
    input[type=email],
    select,
    textarea {
        margin-left: 1%;
        width: 50%;
        padding: 8px;
        border: 1px solid var(--blau);
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 8px;
        margin-bottom: 16px;
        resize: vertical;
    }

    input[type=text],
    select,
    textarea {
        margin-left: 1%;
        width: 50%;
        padding: 8px;
        border: 1px solid var(--blau);
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 8px;
        margin-bottom: 16px;
        resize: vertical;
    }
    input[type=submit] {
        background-color: var(--blau);
        color: var(--weiss);
        margin-left: 1%;
        padding: 12px 20px;
        border: none;
        border-radius: 7px;
        cursor: pointer;
    }
    input[type=submit]:hover {
        background-color: var(--dunkelgrau);
        margin-left: 1%;
    }

    .container {
        margin-left: 1%;
        width: 86%;
        border-radius: 8px;
        background-color: var(--grau);
        padding: 15px;
    }

  .button {
  background-color: var(--blau);
  border-radius: 5px;
  border: 1px solid var(--weiss);
  color: var(--weiss);
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  }


  .moreless-btn {
  background-color: var(--orange);
  border-radius: 5px;
  border: 1px solid var(--weiss);
  color: var(--dunkelgrau);
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  }
  
  .times {
    font-family:KaushanScript-Regular,"KaushanScript-Regular"; /*Lucida Handwriting; /*Brush Script MT, "Brush Script Std", cursive;    */
  }
  .verdana {
    font-family:sen, "sen-regular", sans-serif;
  }
  #cookie-popup {
  text-align: center;
  background: #fff;
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 9999;
  font-size:14px;
  line-height:20px;
  padding: 20px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }

#cookie-popup.hidden {
  display: none;
}

.shortText.small {
            -webkit-mask-image: -webkit-gradient(linear, left top,
                left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
        }

        .shortText span.more {
            display: inline;
        }

        .shortText.small span.more {
            display: none;
        }

        .shortText:not(.small) span.dots {
            display: none;
        }

.mobile-container {
    max-width: 200px;
    margin: 0px; /*auto; */
    background-color: var(--blau);
    height:1px;
    color: var(--hellblau);
    border-radius: 10px;
}

.topnav {
    border-radius: 0 0.5em 0.5em;
    border: 1px solid var(--hellblau);
    overflow: hidden;
    background-color: var(--blau);
    position: fixed; /*relative;  */
    width: 200px;
}

.topnav #myLinks {
    display: none;
}

.topnav a {
    color: blau;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

.topnav a.icon {
    background: var(--blau);
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

.topnav a:hover {
    background-color: var(--grau);
    color: var(--hellblau);
}

.active {
    background-color: var(--blau);
    color: var(--hellblau);
}


.galerie20 {
    display: flex;
    flex-wrap: wrap;
}
.galerie20 img {
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: transform 0.2s;
}
.galerie20 img:hover {
    transform: scale(1.1);
}