* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /*font-family: Arial, sans-serif;*/
  font-family: Verdana, Helvetica;
  font-size: 1.1em;
/*	font-size:medium;*/
	color:#284675;
	line-height:1.5em;
  background: #284675;
  
  
  /*Silbentrennung*/
  hyphens: auto;
      -webkit-hyphens: auto; /* Für Safari */
      -ms-hyphens: auto;     /* Für ältere IE-Versionen */
      word-wrap: break-word;
}



/*}*/

/*
Der Titel des Word-Dokuments entspricht der H1 und kommt genau einmal vor.
H2 wird verwendet, um die einzelnen Kapitel im Text mit einer Überschrift einzuleiten.
Wenn es innerhalb der Kapitel weitere Unterkapitel gibt, werden diese mit einer H3 eingeleitet.
*/
h1  {
	/*font-size:1.0em !important;*/
	color:#284675;
	margin-bottom: 3px;
}

h2  {
	font-size:1.0em;
	color:#284675;
	margin-bottom: 3px;
}

h3 {
	font-size:1.0em;
	color:#284675;
	margin-bottom: 3px;
}

.h1 {
	font-size:1.2em;
	color:#284675;
	margin-bottom: 3px;
	}
	
.margintop {margin-top: 30px}

.marginbottom {margin-bottom: 20px}


	a {
	color: #FF6600;
	text-decoration:none;
}

.container {
  max-width: 1200px;
  /*max-width: 1024px;*/
  margin: 0 auto;
  padding: 0 10px;
 /* border: solid 1px #284675;*/
  
}

.font_min {
	font-size:0.9em;
	font-style:italic;
	margin-bottom: 10px;
	
}
.font_min_2 {
	font-size:0.9em;
}

.font_white {
color:white !important;
}

/*.textwhite {
color: #FFF !important;
}*/

/* HEADER */
header {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  margin: 0px 0px 0px 0px;
  padding: 10px;
 /*border: solid 1px #284675;*/
}

.logo {
  flex: 1 1 100%;
}

.werbung {
  flex: 1 1 100%;
  text-align: left;
}

/*@media (min-width: 600px) {*/
@media (min-width: 768px) {
  .logo {
    flex: 1 1 calc(100% - 400px);
    max-width: calc(100% - 400px);
  }

  .werbung {
    flex: 0 0 400px;
    text-align: right;
  }
}

/* NAVIGATION */
nav {
  background: #fff;
  padding: 5px;
  margin-top: 5px;
  /*border: solid 1px #284675;*/
  
}

/* Navigation */
  /*.logo {
      font-size: 1.5em;
    }*/
	
	.mouseover {
  cursor: pointer;
}

    .menu-toggle {
      display: none;
      font-size: 1.5em;
      background: none;
      border: none;
      color: #284675;
      cursor: pointer;
	  
    }

    .main-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
    }

    .main-nav > ul > li {
      position: relative;
      padding: 10px 15px;
    }

    .main-nav li ul {
      display: none;
      position: absolute;
      background-color:#eef1f6;
      top: 100%;
      left: 0;
      z-index: 10;
    }

    .main-nav li:hover > ul {
      display: block;
    }

    .main-nav li ul li {
      padding: 5px;
      white-space: nowrap;
    }

    @media (max-width: 768px) {
      .menu-toggle {
        display: block;
      }

      .main-nav {
        display: none;
        flex-direction: column;
        background-color: #eef1f6;
		
      }

      .main-nav.visible {
        display: flex;
      }

      .main-nav ul {
        flex-direction: column;
      }

      .main-nav li {
        position: relative;
      }

      .main-nav li ul {
        position: static;
      }

      .main-nav li:hover > ul {
        display: none;
      }

      .main-nav li.active > ul {
        display: block;
      }
    }



/* Content Wrapper */
.content {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 10px;
 

}



/* CONTENT DESKTOP */
.content {
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin-top: 5px;
}

.sidebar {
  background: #fff;
  padding: 10px;
  /*width: 220px;*/
  max-width: 20%;
  flex-shrink: 0; 
}

main {
  flex: 1;
  background: #fff;
  padding: 10px;
  /*margin-left: -5px;
  margin-right: -5px;*/
}

.werbung2 {
  background: #fff;
  padding: 10px;
  margin-bottom: 5px;
	
}

footer {
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-top: 5px;
	/*border: solid 1px #284675;*/
}

/* MOBILE ANSICHT */
/* Hochformat: Sidebars ausblenden */
@media (max-width: 768px) and (orientation: portrait) {
  .content {
    flex-direction: column;
  }

  .sidebar.sidebar1,
  .sidebar.sidebar2 {
    display: none;
  }

  .sidebars-mobile {
    display: flex;
    gap: 5px;
    margin-top: 10px;
  }

  .sidebars-mobile .sidebar1,
  .sidebars-mobile .sidebar2 {
    display: block;
    background: #fff;
    padding: 10px;
    width: 50%;
  }
}

/* Querformat: Sidebars anzeigen */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar.sidebar1,
  .sidebar.sidebar2 {
    display: block;
  }

  .sidebars-mobile {
    display: none;
  }

  .content {
    flex-direction: row;
  }
}

/* Größere Bildschirme: Standard */
@media (min-width: 769px) {
  .sidebars-mobile {
    display: none;
  }

  .sidebar.sidebar1,
  .sidebar.sidebar2 {
    display: block;
  }

  .content {
    flex-direction: row;
  }
}


.box {
	display: flow-root;
	border-bottom:solid 3px #284675;
	margin: 2px 0 2px 0;
	padding:2px;
	background-color:#ffffff;

	
}

.boxfloat {
	/*border:solid 1px #284675;*/
	border-bottom: solid 3px #284675;
	margin: 2px 0 2px 0;
	padding:2px;
	background-color:#ffffff;
	float: left;
}

.box40 {
	/*border:solid 1px #284675;*/
	width: 40%;
	float: left;
	/*border-bottom:solid 3px #284675;*/
	margin: 6px 10px 0 0;
	padding:3px 3px 0 3px;
	background-color:#ffffff;
}	
	
	.boxrahmenlos {
	margin: 2px 0 2px 0;
	padding:2px;
	background-color:#ffffff;	
	
}


@media (max-width: 901px) {
  .box40 {
    width: 100%;
	float: left;
	/*border-bottom:solid 3px #284675;*/
	margin: 6px 10px 0 0;
	padding:3px 3px 0 3px;
	background-color:#ffffff;
  }
}




/*Video-Container*/
.embed-container {
	position: relative;
	padding-bottom: 56.25%; /* ratio 16x9 */
	height: 0;
	overflow: hidden;
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}
.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
	padding-bottom: 75%;
}
/*Ende Video-Container*/








/*Start go to top */ 

#myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: #ff6600;
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
	opacity: 0.8;
}
#myBtn:hover {
	background-color: #284675;
}
/*Ende go to top */ 




/*Notwendige Cookies*/


#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 2px solid #ccc;
  padding: 15px;
  font-size: 14px;
  z-index: 9999;
}

.cookie-container {
  max-width: 900px;
  margin: auto;
}

.cookie-buttons {
  margin-top: 10px;
}

.cookie-buttons button {
  margin-right: 10px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#accept-all {
  background: #007bff;
  color: white;
}

#accept-necessary {
  background: #ccc;
}

/*YouTube anzeigen*/

.youtube-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(0,0,0,0.75);
  padding: 15px;
}

.youtube-overlay p {
  margin-bottom: 10px;
}

.youtube-overlay button {
  background: #cc0000;
  color: #fff;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 4px;
}

/*#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FF6600;
    opacity: 0.9;
    color: #000;
    padding: 5px;
    text-align: center;
    z-index: 1000;
    font-size: 14px;
}
#cookie-banner p {
    margin: 0 0 10px 0;
}
#cookie-banner a {
    color: #00c3ff;
    text-decoration: underline;
}
#cookie-banner button {
    background-color: #00c3ff;
    border: none;
    color: #000;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
}
*/
/*Overlay für Bildvergroesserung*/


 .thumbnail {
            width: 100%;
            cursor: pointer;
        }

        .overlay {
            display: none;
            position: fixed;
            z-index: 10;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            justify-content: center;
            align-items: center;
        }

        .overlay img {
            max-width: 90%;
            max-height: 90%;
        }

        .overlay:target {
            display: flex;
        }

/*__FlexBoxen Kuenstlerseiten ___________________________________________________________*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  float: left;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
   
        
}



@media (max-width: 700px) {
  .flex-container > div {
    background-color: #ffffff;
    width: 100%;
     
    
  }
}
@media (min-width: 700px) {
  .flex-container > div {
    background-color: #ffffff;
    width: 50%;
   
   
  }
}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .flex-container > div {
    background-color: #ffffff;
    width: 33%;
   
    
  }
}
/*_______Ende Flexboxen Kuenstlerseiten__________________________________________________________________________*/


/*Branchenseite*/

.firmen-box {
    background: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
}

.firmen-logo {
    text-align: center;
    margin-bottom: 15px;
}
.firmen-logo img {
    max-width: 200px;
    height: auto;
}

.firmen-bilder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 10px;
	/*border: 1px solid #ccc;
    border-radius: 6px;*/
}
.firmen-bilder img {
    /*width: 100%;*/
	max-width: 280px;
    height: auto;
	border: 1px solid #ccc;
    border-radius: 4px;
}

/* branchen-Container für ähnliche Firmen */
.branchen-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.branchen-item {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    flex: 1 1 calc(33.333% - 15px);
    box-sizing: border-box;
}
.branchen-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}


/* Branchen Seiten-css */
.branche-section {
    margin-bottom: 30px;
}
.branche-section h3 {
    border-bottom: 2px solid #003366;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.branche-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.branche-list li {
    padding: 2px 0;
    border-bottom: 1px solid #ccc;
}
.branche-list li span {
    display: block;
    font-size: 0.9em;
    color: #666;
}

@media (max-width: 768px) {
    .branchen-item {
        flex: 1 1 calc(50% - 15px);
    }
}
@media (max-width: 500px) {
    .branchen-item {
        flex: 1 1 100%;
    }
}


/*Branchennavigation*/
.navbranche-container {
  /*width: 250px;*/
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  /*font-family: Arial, sans-serif;*/
}

.navbranche-toggle {
  display: none;
}

.navbranche-header {
  background: #eef1f6;
  /*padding: 10px;*/
  padding: 5px;
  cursor: pointer;
  user-select: none;
  display: block;
}

.navbranche-links {
  display: none;
  background: #f9f9f9;
}

.navbranche-links a {
  display: block;
  /*padding: 8px 12px;*/
  padding: 5px;
  text-decoration: none;
  color: #333;
}

.navbranche-links a:hover {
  background: #ff6600;
}

/* Checkbox-Hack: Wenn der Toggle gecheckt ist, zeigen */
.navbranche-toggle:checked + .navbranche-header + .navbranche-links {
  display: block;
}


/*__FlexBoxen Branchen ___________________________________________________________*/
/*.flex-container2 {
  display: flex;
  flex-wrap: wrap;
  float: left;
 
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
   
        
}
}
@media (min-width: 600px) {
  .flex-container2 > div {
    background-color: #ffffff;
    width: 100%;
   
   
  }
}
/*Medium devices (tablets, 768px and up)*/
/*@media (min-width: 768px) {
  .flex-container2 > div {
    background-color: #ffffff;
    width: 50%;
   
    
  }
}*/*/
/*_______Ende Flexboxen Branchen*/