/* CSS - style.css SP 6*/

/* Top-Scroller */

#scrollToTopBtn {
 position: fixed;
 bottom: 40px;
 right: 40px;
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: #222;
 color: #fff;
 font-size: 28px;
 border: none;
 cursor: pointer;
 opacity: 0.7;
 z-index: 2147483647;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: opacity 0.3s, background 0.3s;
 padding: 0; /* Wichtig */
}
#scrollToTopBtn:hover {
 opacity: 1;
 background: #f60;
}

/* Top-Scroller */

/* Home-Button */
.homebutton {
 color: #FFFFFF;
 text-decoration: none;
 transition: color 0.2s;
}

a.homebutton:hover {
 color: #FFFFFF; !important;
 text-decoration: none;
}
/* Home-Button */

/* Links in Textseiten */
.autolink {
 color: #0071ce;
 text-decoration: underline;
 transition: color 0.2s;
}

a.autolink:hover {
 color: #ff6600 !important;
 text-decoration: underline;
}
/* Links in Textseiten */

img {
 border-radius: 8px;
}

/* Handy-Menü */
.mobile-nav, .nav-burger, .nav-menu, .nav-toggle {
  display: none;
}

@media (max-width: 1024px) {
.nav-overlay {
  display: none;
}

.nav-toggle:checked ~ .nav-overlay {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}

  .mobile-nav {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 8px 24px;
    position: relative;
    background: #F15C22;
    margin-bottom: 5px;
  }
.nav-social {
    display: flex;
    gap: 10px;
}
  .nav-toggle {
    display: none;
  }

.nav-container {
 position: relative;
}
  .nav-burger {
    position: absolute;
    right: 0.5em;
    display: inline-block; 
    font-size: 1.5em;
    cursor: pointer;
    padding: 0.5em 0.7em;
    user-select: none;
    color: #fff;
  }

  .nav-menu {
    display: none;
    position: absolute;
    left: 0; top: 3em;
    width: 100vw;
    background: #222;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
  }

  .nav-toggle:checked + .nav-burger + .nav-menu {
    display: block;
  }

  .nav-menu li a {
    display: block;
    padding: 1em;
    color: #fff;
    border-bottom: 1px solid #444;
    text-decoration: none;
    font-size: 1.2em;
  }
  .nav-menu li:last-child a {
    border-bottom: none;
  }
  .nav-menu li a:hover {
    background: #333;
  }
}

/* Handy-Menü */

/* Bilderreihe in Textseiten*/
.bilder-im-text {
  float: right;
  display: block;
  margin: 0 0 10px 40px;
  text-align: center;
  max-width: 200px;
  padding-right: 25px;
}

.bilder-im-text.lightbox-thumb {
  display: block;
  margin: 0 auto 7px auto;
  float: none;
  width: auto;
}

.kleine-bilderreihe {
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: center;
}

.kleine-bilderreihe.lightbox-thumb-klein {
  width: 45px;
  margin: 0;
}

.kleine-bilderreihe img {
  width: 45px;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.10);
}
/* Bilderreihe  in Textseiten*/


/* Bilderreihe allgemein*/
.bilderreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
  justify-items: center;
  width: 100%;
  padding-bottom: 20px;
}

.bilderreihe.lightbox-thumb-klein {
  width: 100%;
  max-width: 120px;
  margin: 0;
  box-sizing: border-box;
}

.bilderreihe img {
  width: 100%;
  height: auto;
  display: block;
}
/* Bilderreihe allgemein*/

/* IMG Vergrößerer*/

.lightbox-thumb {
  float: right;
  height: auto;
  width: 100%;
  max-width: 200px;
  margin-left: 4%;
  margin-bottom: 4%;
  cursor: pointer;
}

.lightbox-toggle {
  display: none;
}

.lightbox {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox img {
 max-width: 90vw;
 max-height: 90vh;
 width: auto;
 height: auto;
 box-shadow: 0 6px 30px #222;
 display: block;
 margin: auto;
}

.lightbox-toggle:checked + img + .lightbox {
  display: flex;
}

/* IMG Vergrößerer*/
/* IMG Vergrößerer-klein*/

.lightbox-thumb-klein {
  display: inline-block;
  margin: 4%;
  cursor: pointer;
}

.lightbox-toggle-klein {
  display: none;
}

.lightbox-klein {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox-klein img {
 max-width: 90vw;
 max-height: 90vh;
 width: auto;
 height: auto;
 box-shadow: 0 6px 30px #222;
 display: block;
 margin: auto;
}

.lightbox-toggle-klein:checked + img + .lightbox-klein {
  display: flex;
}
/* IMG Vergrößerer-klein*/

/* IMG Switch*/
.img-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
}

.img-switch img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
  display: block;
}

.img-switch .img-main {
  opacity: 1;
  z-index: 1;
}

.img-switch .img-hover {
  opacity: 0;
  z-index: 2;
}

.img-switch:hover .img-main {
  opacity: 0;
}

.img-switch:hover .img-hover {
  opacity: 1;
}
/* IMG Switch*/

@media (max-width: 450px) {

.bilder-im-text {
 float: none;
 display: block;
 margin: 0 0 10px 0;
 max-width: 100%;
 padding-right: 0;
 text-align: center;
 }

.lightbox-thumb {
 float: none;
 margin: 0 auto 7px auto;
 width: auto;
 display: block;
 max-width: 100%;
 }

.kleine-bilderreihe {
 display:none;
 flex-direction: row;
 justify-content: center;
 gap: 6px;
 width: 100%;
 }

.kleine-bilderreihe.lightbox-thumb-klein {
 width: 45px;
 margin: 0;
 }
}

/*HTML, Body*/

html, body {
 margin: 0;
 padding: 0;
 overflow-x: hidden;
 min-height: 0;
 height: auto;
 box-sizing: border-box;
}

body {
 overflow-x: hidden;
}

/*HTML, Body*/

.checkbox {
width: 30px;
height: 30px;
padding: 10px;
}

.buttons {
font-family: Arial;
font-size: 20px;
}

.text {
font-family: Arial;
font-size: 20px;
}

@font-face { font-family: 'Arial'; }

 a.normal:link {
font-family: Arial;
font-size: 24px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
  color:#F15C22;
  }
 a.normal:visited {
font-family: Arial;
font-size: 24px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #BF0000;
  }
 a.normal:hover {
font-family: Arial;
font-size: 24px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #BF0000;
  }

body {
background: url('IMG/bg_blau.png');
}

* {
padding: 0;
margin: 0;
}

#logo { 
background: url('IMG/logo_sprechplanet.png') no-repeat;
background-color: #fff;
width: 390px;
height: 190px;
margin-left: auto;
margin-bottum: 30px;
box-shadow: 0px 5px 6px #999;
}

#nachricht {
float:center;
margin-top: 20%;
background-color: #fff;
box-shadow: 0px 5px 6px #999;
}

#nachricht img {
max-width: 25px;
}

#star img {
height: auto;
width: 70%;
margin-top: 50px;
margin-left: 10%;
margin-bottom: 2%;
max-width: 400px;
}


.hoverbild {
  content: url('lib/img/facebook-logo.png');
  transition: 0.2s;
}
.hoverbild:hover {
  content: url('lib/img/facebook-logo-klick.png');
}

#bild img {
float:left;
height: auto;
width: 100%;
max-width: 200px;
border-style:solid;
border-color:white;
border-width:10px;
box-shadow: 0px 5px 6px #999;
margin: 1%;
margin-left: 1.5%;
margin-right: 4%;
margin-bottom: 4%;
}

#karte img {
float:left;
height: auto;
width: 95%;
max-width: 1200px;
}

#star span {
  position: absolute;
  bottom: -12.5px;
  left: 0;
  width: 90%;
  max-width: 200px;
  margin: 10px;
  color: #fff;
  text-align: center;
  height: 2.5em;
  line-height: 1.5em;
  background: #404040; /* Fallback IE 6-8 */
  background-color: rgba(40, 40, 40, 0.6);
}

#star span2 {
  font-size: 10px;
  position: absolute;
  bottom: -12.5px;
  left: 0;
  width: 90%;
  max-width: 200px;
  margin: 10px;
  color: #fff;
  text-align: center;
  height: 1.0em;
  line-height: 0.75em;
  background: #404040; /* Fallback IE 6-8 */
  background-color: rgba(40, 40, 40, 0.6);
}

@media (min-width: 300px) {
   /* Handy */

#menu { 
background-color: green;
background-position:30% 26%;
background-size: 100% auto;

width: 100%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

@media (max-width: 1023px) {
  #socialmedia {
    display: none;
  }
}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#socialmedia {
  background: #F15C22;
  width: 100%;
  padding: 20px 0;
}
.socialinhalt {
  max-width: 850px; 
  margin-left: 19.5%;
  color: white;
  font: 14px Arial;
}
}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#menu { 
background-color: green;
background-position:30% 26%;
background-size: 100% auto;

width: 100%;
display:-webkit-flex;
display:flex;
position: absolute; left: 150px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

}

@media (max-width: 1024px) 
   /* breite Browserfenster */

#menu { 
background-color: green;
background-position:30% 0%;
background-size: 100% auto;

width: 100%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#menuintern { 
background-color: white;
background-position:30% 0%;
background-size: 100% auto;

width: 60%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#menuintern { 
background-color: white;
background-position:30% 0%;
background-size: 100% auto;

width: 100%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

}

@media (max-width: 1023px) {
  #header {
    display: none;
  }
}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#header { 
width: 61%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
padding: 0px;
height: auto;
padding: 12px 0;
}

.headerinhalt {
  width: 900px;
  text-align: left;
}

}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#mainwrapper { 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#mainwrapper { 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
}

}


@media (min-width: 1024px) {
   /* breite Browserfenster */

#wrapper { 
width: 60%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
padding: 10px;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#wrapper { 
width: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
padding: 10px;
}

}


@media (min-width: 1024px) {
   /* breite Browserfenster */
#content { 
  min-height: 250px;
  margin-left: auto;
  background: #fff;
  margin-top: 15px;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0px 5px 6px #999;
}
.contentinhalt { 
  max-width: 800px; 
  margin-left: 20%;
}
}

@media (max-width: 1024px) {
   /* breite Browserfenster */
#content { 
  margin-left: auto;
  background: #fff;
  margin-top: 15px;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0px 5px 6px #999;
}
}

@media (max-width: 1023px) {
   /* Handy */
.contentinhalt { 
  min-height: 380px;
  margin-left: 2%;
  margin-right: 10px;
}
}

#starbox { 
background: #fff;
padding: 5px;
box-shadow: 0px 5px 6px #999;
}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#sidebar { 
position: fixed; 
right: 1%;
top: 30px;
background: #FFF;
padding: 5px;
width: 15%;
box-shadow: 0px 5px 6px #999;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#sidebar { 
display:none;
}

}

#ex {
width: 78%;
height: auto;
}

#ex img {
float: right;
box-shadow: 0px 5px 6px #999;
margin: 20px 10px -30px 0;
}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#background {
  width: 100%;
  background: white;
  height: auto;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#background {
  width: 100%;
  background: white;
  height: 250px;
}

}


@media (min-width: 1024px) {
   /* breite Browserfenster */

#footer {
  margin-top: 15px;
  width: 100%;
  background: #287233;
  padding: 30px 0;
.footerinhalt {
  max-width: 800px; 
  margin-left: 21%;
  color: white;
  font: 14px Arial;
}
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#footer {
  margin-top: 15px;
  width: 100%;
  background: #287233;
  padding: 30px 0;
.footerinhalt {
  color: white;
  font: 14px Arial;
}
}

}

@media (max-width: 1023px) {
   /* Handy */
#footer {
  margin-top: 25px;
.footerinhalt {
  max-width: 500px; 
  margin-left: 5%;
  color: white;
  font: 14px Arial;
}
}

}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#impressum {
  width: 100%;
  background: darkgrey;
  height: 50px;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#impressum {
  width: 100%;
  background: darkgrey;
  height: 50px;
}

}

.Copyright {
color: #FFFFFF;
padding: 15px;
}

body {
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}

ul {
 padding-left: 0px;
}

p + ul, p:has(+ ul) {
 margin-top: 0;
 margin-bottom: 0;
}

.contentinhalt a {
 word-break: break-word;
 overflow-wrap: break-word;
}

.contentinhalt p {
 text-align: justify;
 margin-top: 0.5em;
 margin-bottom: 1em;
 margin: 5px 5px;
 padding: 4px;
 padding-bottom: 20px;
}

table.tabellenansicht {
 width: 100%;
 border-spacing: 0;
 font-size: 18px;
 padding-bottom: 20px;
}

td.tabellenansicht {
 min-width: 115px;
 padding: 6px 12px;
 border-right: none;
 border-left: none;
 border-top: none;
 border-bottom: 1px solid #333;
 word-break: break-word;
}

p {
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
margin: 5px 5px;
padding: 4px;
text-align: justify;
padding-bottom: 20px;
}

p.liste {
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
margin: 5px 5px;
padding: 4px;
text-align: justify;
}

p.start {
font-family: Arial;
font-size: 36px;
font-style: normal;
font-weight: bold;
color: white;
margin: 0 0 0 3px;
}


p.sidebar {
font-family: Arial;
font-size: 18px;
font-style: normal;
font-weight: normal;
padding: 15px;
}

h1 {
font-family: Arial;
font-size: 38px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #000000;
}


h2 {
font-family: Arial;
font-size: 32px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #000000;
}


h3 {
font-family: Arial;
font-size: 28px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #000000;
}

h4 {
font-family: Arial;
font-size: 24px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #F15C22;
}

h5 {
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #F15C22;
}

h6 {
font-family: Arial;
font-size: 18px;
font-style: italic;
font-weight: bold;
margin: 3px 3px;
padding: 3px;
color: #000000;
}

h7 {
display: block;
font-family: Arial;
font-size: 18px;
font-style: normal;
margin: 3px 3px;
padding: 3px;
color: #000000;
}

/* Navigation */

@media (min-width: 300px) {
   /* mobile Telefone */

.navbar2 {
width: auto;
}

.navbar2 li {
list-style: none;
float:left;
display:block;
}

.navbar2 li a {
float:right;
padding: 15px 20px;
font: bold 20px Arial;
background: #BF0000;
color: #FFF;
text-decoration: none;
box-shadow: 0px 5px 6px #999;
}

.navbar2 li a:hover {
background-color: #FFFFFF;
color: #BF0000;
}

}


@media (min-width: 1024px) {
   /* breite Browserfenster */

.links {
width: auto;
}

.links li {
list-style: none;
float:left;
display:block;
margin: 7px;
}

.links li a {
padding: 10px 15px;
font: 18px Arial;
color: black;
text-decoration: none;
}

.links li a:hover {
background-color: #D3D3D3;
color: #BF0000;
border-radius: 8px; 
}

}

@media (min-width: 1024px) {
   /* breite Browserfenster */

.schnelllinks {
width: auto;
}

.schnelllinks li {
list-style: none;
float:left;
display:block;
}

.schnelllinks li a {
padding: 15px 20px;
font: 14px Arial;
color: #FFF;
text-decoration: none;
}

.schnelllinks li a:hover {
color: #BF0000;
}

}

@media (min-width: 1024px) {
   /* mobile Telefone */

.navbar2 {
display:none;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

.schnelllinks {
display:none;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

.links {
display:none;
}

}

.sidebar {
margin-left: 10px;
padding: 15px 0 0 0; 
width: 150px;
}

.sidebar li {
list-style: none;
}

.sidebar li a {
padding: 2px 5px;
font: bold 18px Arial;
color: #FFFFFF;
background-color: #BF0000;
text-decoration: none;
}

.sidebar li a:hover {
background-color: #BF0000;
color: #FFF;
}

.footer {
padding: 15px 0 0 0; 
width: 100%;
max-width: 800px; 
margin-left: 20.5%;
}

@media (max-width: 1023px) {
   /* Handy */
.footer {
padding: 15px 0 0 0; 
width: 100%;
max-width: 500px; 
margin-left: 4%;
}
}

.footer li {
list-style: none;
}

.footer li a {
float:left;
padding: 2px 5px;
font: bold 14px Arial;
color: #FFF;
text-decoration: none;
}

.footer li a:hover {
background-color: #D3D3D3;
color: #BF0000;
border-radius: 8px; 
}

.img {
float:left;
margin: 0 5px 1px 0;
}

.termine {
padding: 0 0 0 25px; 
width: 80%;
color: #00000;
list-style-type:square;
}

.termine li {
font-weight: ;
}

.linie {
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 0px 5px 5px silver;
width:98%;
}

#flip1 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip2 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip3 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip4 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip5 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip6 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip7 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip8 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}

#panel1 {
    padding: 25px;
    display: none;
}
#panel2 {
    padding: 25px;
    display: none;
}
#panel3 {
    padding: 25px;
    display: none;
}
#panel4 {
    padding: 25px;
    display: none;
}
#panel5 {
    padding: 25px;
    display: none;
}
#panel6 {
    padding: 25px;
    display: none;
}
#panel7 {
    padding: 25px;
    display: none;
}
#panel8 {
    padding: 25px;
    display: none;
}

.form {
    margin-left:5px;
    margin-right:auto;

    max-width: 60%;
    background: #D2E9FF;
    padding: 20px 20px 20px 20px;
    font: 18px Arial;
    color: #666;
}

/* Popup */

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 60%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Arial;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #BF0000;
}

.popup .close:hover {
  color: #333;
}
.popup .content {
  max-height: 60%;
  overflow: auto;
}

@media screen and (max-width: 10240x){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }