html
{
	margin: 0;
	padding: 0;
}

/* Versteckt die nativen Scroll-Leisten nur in WebKit-Browsern */
 body::-webkit-scrollbar {
     display: none;
 }

 /* Der body bleibt scrollbar */
 body{

 }

body
{
	background-color: #f8f8f8;
	font-family: Roboto, sans-serif;
	background: #f8f8f8;
    color: black;
	padding: 0;
	margin: 0;
	font-size: 62.5%;
	font-weight: 300;

/* 	      overflow-y: hidden; Vertikales Scrollen erlaubt
      overflow-x:  scroll; Optional: Horizontales Scrollen deaktivieren */
	position: relative;
}

  /* Scrollbarer Bereich innerhalb eines unsichtbaren Rahmens */

  /* Scrollbarer Bereich */
  .custom-scroll {

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: hidden; /* Vertikales Scrollen erlaubt */
      overflow-x:  scroll; /* Optional: Horizontales Scrollen deaktivieren */
      padding-right: 15px; /* Platzhalter für unsichtbare Scroll-Leiste */
  }

  
body, input, textarea
{
	color: black;    

}

h1, h2, h3, h4, h5, h6
{ 
	font-weight: normal;
	clear: both;
	margin: 0px;
}
hr
{
	background-color: #999;
	border: 0;
	height: 1px;
	margin-bottom: 0.4em;
}
pre
{
/* 	font: 11px Monaco, monospace; */
	line-height: 1.5;
	margin-bottom: 1.5em;
}

p
{
	margin: 12px 0;
    text-align: justify;
    color: black;    
}


#inside-sidebar-container > div{
	border: 1px  red dotted;
	margin-bottom: 6px;
}

#id-5 > div.wrap > ul { list-style: none;}
/* #id-5 > div.wrap > ul:nth-child(1) > li { list-style: none;} */
.my-list-style, 
.list-style-installation,
.list-style-ecommerce,
.list-style-datenbank-first, 
.list-style-datenbank-second, 
.list-style-datenbank-second {
    list-style: none;
    padding: 0;
    margin: 6px 0;
}

.my-list-style li, 
.list-style-installation li,
.list-style-ecommerce li,
.list-style-datenbank-first li, 
.list-style-datenbank-second li {
    display: flex;  /* Setzt eine flexible Layout-Struktur */
    align-items: flex-start; /* Startet den Text von oben */
    gap: 8px; /* Abstand zwischen Icon und Text */
}

.my-list-style li::before, .list-style-installation li::before  {
    content: "✅";  /* Fügt das Check-Icon hinzu */
    color: blue;  /* Macht das Icon blau */
    font-size: 1.2em; /* Optional: Größe des Icons */
    flex-shrink: 0; /* Verhindert, dass das Icon verkleinert wird */
}

.my-list-style li::before {
    content: "✔";  /* Häkchen-Symbol */
    color: green;   /* Farbe des Symbols */
    margin-right: 8px; /* Abstand zum Text */
}

.list-style-ecommerce li::before {
    content: "🔹";  /* Fügt das Check-Icon hinzu */
    color: blue;  /* Macht das Icon blau */
    font-size: 1.2em; /* Optional: Größe des Icons */
    flex-shrink: 0; /* Verhindert, dass das Icon verkleinert wird */
}

.list-style-ecommerce li::before {
    content: "🔹";  /* Fügt das Check-Icon hinzu */
    color: blue;  /* Macht das Icon blau */
    font-size: 1.2em; /* Optional: Größe des Icons */
    flex-shrink: 0; /* Verhindert, dass das Icon verkleinert wird */
}

.list-style-datenbank-first li::before {
    content: "🔹";  /* Fügt das Check-Icon hinzu */
    color: blue;  /* Macht das Icon blau */
    font-size: 1.2em; /* Optional: Größe des Icons */
    flex-shrink: 0; /* Verhindert, dass das Icon verkleinert wird */
}

.list-style-datenbank-second li::before {
    content: "✅";  /* Fügt das Check-Icon hinzu */
    color: blue;  /* Macht das Icon blau */
    font-size: 1.2em; /* Optional: Größe des Icons */
    flex-shrink: 0; /* Verhindert, dass das Icon verkleinert wird */
}

#id-0 > div.wrap > div:nth-child(1) {margin-bottom: 6px;}
#id-0 > div.wrap > div:nth-child(2) {margin: 12px 0 -6px 0;}
#id-0 > div.wrap > div:nth-child(4) {margin: 12px 0 6px 0;}
4
/* Horizontal Menu */
.site-header {
    background-color: #0080c0;
    width: 100%;
    display: flex;
}

.cl-horizontal-menu {
    background-color: #0080ff;
    width: 80%;
    display: flex;
    justify-content: flex-start; /* Logo bleibt links */
    align-items: center; /* Elemente vertikal zentrieren */
    padding: 0px;
    margin: 0 auto; /* Menü zentrieren */
}

.hamburger-icon {
    display: none; /* Standardmäßig ausgeblendet */
    font-size: 30px;
    cursor: pointer;
    color: white;
}

.cl-header-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin-left: 10%;
    margin: 0;
}

.cl-header-menu li {
    margin: 0 10px; /* Optionaler Abstand zwischen den Listenelementen */
}

.cl-header-menu li a {
    text-decoration: none;
    color: white;
    padding: 10px 16px;
    display: block;
}

.cl-header-menu li a:hover {
    background-color: #80ffff;
    color: black;
}

#id-logo-icon {
    margin-right: auto; /* Schiebt das Logo ganz nach links */
}

#id-logo-icon > img {
    position: relative;
    margin-left: -10%;
}

/* Media Queries für Mobile */



/* // Slider */
.horizontal-slider-container {
    position: relative;
    width: 100%; /* Slider nimmt 100% der Breite des übergeordneten Containers ein */
    max-width: 560px; /* Maximalbreite des Sliders */
    height: 240px; /* Feste Höhe des Sliders */
    overflow: hidden; /* Überflüssige Bilder werden ausgeblendet */
    margin: 0 auto; /* Slider zentrieren */
}

.horizontal-slider-wrapper {
    display: flex;
    width: 600%; /* Der Wrapper ist 6 mal breiter als der sichtbare Bereich (für 6 Bilder) */
    transition: transform 0.5s ease-in-out; /* Smoothes Sliden */
}

.horizontal-slide {
    width: 16.66%; /* Jedes Bild nimmt 1/6 der Breite des Wrappers ein */
    flex-shrink: 0; /* Verhindert das Schrumpfen der Slides */
}

.horizontal-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Skaliert das Bild, um den gesamten Platz auszufüllen */
}
/*** CENTER ALL DIVS; FLOAT CONTENT AND PRIMARY SIDEBAR LEFT ***/

#wrapper{
	margin:0%;
	padding:0%;
	width: auto;
	text-align: center;
}

.wrap{
	text-align: left;
}


.flexslider .slides img {
	max-width: 520px;
	max-height:260px
}

#header 
{
	margin:0%;
	padding:0%;

	width: 100%;
	display: inline-block;
}

#id-for-menu-container{
	border-bottom: 0.05em solid red;
	width: 80%;
	display: inline-block;
	background-color: #0080c0;
	background: #0080c0;
}


/** Float it rigt and the next selector left to format the menu
  the next selector is #icon-instead-of-home-text               */
#id-for-the-menu{
	float: right;
	margin: 0; 
	height: 70px; 
	width: auto;
	display: inline-block;
}

/**  Float it left and the next selector right to format the menu  
 the previous selector is #icon-instead-of-home-text            */
 
#icon-instead-of-home-text{
	display: inline-block;
	float:left;
}
#id-for-top-menu{
	width: 100%;
	display: inline-block;
	
		height: 70px; 
	width: auto;
}


#main{
	background-color: #f8f8f8;
    background: #f8f8f8;
	margin: 1% 0 1% 0;
	width: 100%;
}

#container {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-left: 10%;
    clear: both; /* Sicherstellen, dass der Inhalt danach untereinander kommt */
    /* border-bottom: 1px solid red;	 */
}

#container-in-page{
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-left: 10%;
    clear: both; /* Sicherstellen, dass der Inhalt danach untereinander kommt */
    border-bottom: 1px solid red;	
}

.cl-for-container-sidebar {

    width: 25%;
    margin-top: 6px;    
    flex-shrink: 0;
}

.cl-for-container-content {
	
    width: 74%;
    margin-left: 0%;
}

#iframe-container {
    width: 100%;
    margin-top: 100px; /* Abstand zum Container */
    clear: both; /* Sicherstellen, dass der Iframe unter dem Container ist */
    text-align: center;
}

iframe {
    width: 100%;
    max-width: 600px;
    height: 450px;
    border: 0;
}


#container-for-content > ul {	list-style-type: none;}
/* #container-for-content > ul > li:nth-child(1) */
#container-for-content{
	font-size: 1.6em;
	position: relative;
	 margin-bottom: 21px; 

}

#content {
    width: 100%;
    margin-top: 10px;
}

#id-for-right-sidebar {
    display: none; /* Wenn kein Right Sidebar verwendet wird */
}

#iframe-container {
    width: 100%;
    margin-top: 20px; /* Abstand zum Container */
    clear: both; /* Wichtige Eigenschaft, um das Div unter dem Container zu erzwingen */
    text-align: center;
}

iframe {
    width: 100%;
    max-width: 600px;
    height: 450px;
    border: 0;
}

#content {
    width: 100%;
    margin-top: 10px;
}

#id-for-right-sidebar {
    display: none; /* Wenn kein Right Sidebar verwendet wird */
}

#iframe-container {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    clear: both;
}

iframe {
    width: 100%;
    max-width: 600px;
    height: 450px;
    border: 0;
}

div#content
{

	width: 100%;
	display: flex;
	  
}

.cl-container-page{
	
}

.cl-datenschutz{

    width: 74%;
    margin-right: 1%;

}

.cl-datenschutz-sidebar{
		width: 25%;

}

div#primary
{
	/* Primary Widget Area DIV */
	border: 0.3px solid #b90000;	
	padding:0;
	float:left;
	color: white;
	margin: 20px auto 20px 2%;
}

#container-for-content > ul > li:nth-child(1)
#searchsubmit {

/*     color: white; */
    margin-top: 20px;
    margin-bottom: 20px;

  font-size: 1.2em; 
  
}

input#s{
	width:90%;
}

#s{
	font-size: 1.6em; 
}
div#secondary
{
	/* Secondary Widget Area DIV */
	display: inline-block;
	margin:1% 0 1% 0;
	/* border: 0.1em solid yellow;  */
	width: 100%;
	font-size: 2em;
	color: white;
}

div#secondary h6
{
	font-size: 3em;
}

span#u_0_3{
		font-size: 2em;
	color: red;
}
._51m-, ._2pir, ._51mw{
	font-size: 2em;
	color: red;
}
#footer{
	/* padding: 1%; */
	/* border: 0.1em solid yellow; */ 
	width: 99.8%;
	display: inline-block;
	font-size: 1.4em;
	color: white;
}


/*** END OF CENTER ALL DIVS ***/


/*** PAGE LAYOUT ***/




/*  List inside the content */
div#content ul{
/* 	font-size: 2.5em;
	font-family: Roboto; */

	/* margin-left: 2.5em; */
	 list-style: none;
}

div#content ul li{

	margin-top: 1em;
	
	 list-style: none;
}


/*** HEADER : MENU ***/

/* To see a menu in your header, you'll need to first add one in WordPress Admin */

.menu ul
{
	/* background: #2F54; */
    list-style: none;
    margin: 0;
}
.menu ul ul
{
    display: none;
}
.menu li
{
    display: inline;
    float: left;
	padding: 0 8px;
}
.menu-item
{
		background: #0080ff;
}
.menu-item a
{
	font-size: 20px;
	text-decoration: none;
	color: #4CFFAC;
}
.menu-item a:hover
{
	color: #00FF88;
}

/* TOP NAV */
/* Add a black background color to the top navigation */

#icon-instead-of-home-text img {
	margin: -9px 0 0 10%;
	padding: 0;
	height: 50px;
	width: 50px;

}



.cl-for-top-menu {
  overflow: hidden;
  background: #0080ff;
  background-color: #0080ff;
}


.cl-for-top-menu a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.cl-for-top-menu a:hover {
  background-color: #386f6f;
  color: black;
}

.cl-for-top-menu a:active {
	text-decoration: underline;
}
.active {
  background-color: #4CAF50;
  color: white;
}

.cl-for-top-menu .icon {
  display: none;
}
/*** END OF TOP NAV ***/

/*** HEADER : OTHER ***/

#header 
{
	margin: auto;
	/* height: 300px; */
}

#name, #login
{
	padding: 1%;
	margin: 1%;
	background:white;
	height: 80px;
}

#name
{
	width: 61%;
	float: left;
}

#login
{
	width: 30%;
	float: left;
}

/*** CONTENT : POSTS AND PAGES ***/

/* Entry and Page Titles */
h1.entry-title
{
	
}
h2.entry-title
{
	
}
h2.entry-title a
{
	
}
h1.page-title
{
	
}

/* Media Alignment */
.alignright
{
	/* Style for right-aligned images in posts */
	padding: 8px 0 8px 8px;
	float: right;
}
.alignleft
{
	/* Style for left-aligned images in posts */
	padding: 8px 8px 8px 0;
	float: left;
}

/* Entry Content */
.page
{
	padding: 0 10px;
}
.entry-content
{
	/* Style that affects actual entry/post content */
	
}
.entry-content a
{
	
}
.entry-content a:hover
{
	
}
.entry-content h1, h2, h3, h4, h5
{
	
}
.entry-content ol li
{
	
}

.entry-utility
{
	/* Style for the entry utility, which sits below a post and provides info like categories, tags, feeds, and an edit link (for authors) */
}
.entry-meta
{
	/* Style for the entry metadata (author, etc.) */
}
.skip-link
{
	/* Style for the skip link */
	/*position: absolute;
	left: -9000px;*/
}
.navigation
{
	/* Style for the navigation links (next/previous post) on a given post */
}


/*** CONTENT : COMMENTS ***/

div#comments
{
	/* Style that affects the DIV containing all the comments */
}
.comments h3
{
	/* H3 header style for comments */
}
.comments ol
{
	/* Comments are displayed as ordered lists by default, so you want to style that list so it looks the way you want */
}
.comments ol li
{
	/* Style each list item in the comments ordered list */
}
.comments img
{
	/* Style for the user avatar beside each comment */
	float: left;
	margin: 0 12px 8px 0;
}


/*** CONTENT : SIDEBAR ***/

div#custom_html-8 a:hover {

    color: red;
    font-weight: bold;

}


   
div#custom_html-4, div#custom_html-5, div#custom_html-6, div#custom_html-7
{
	postion:relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	/* Background: red; */
	padding: 0 0 0 2em;
   	width:30%;

}

#custom_html-7 > div > hr
{
	margin-top:-9px;

}


div#custom_html-5
{
	margin:0;
	/* Background: yellow;  */
}


div#custom_html-4 h6, div#custom_html-5 h6, div#custom_html-6 h6, div#custom_html-7 h6
{
	margin-top: 12px;
	 font-size: 1em;
	 font-weight: bold;
	 text-align: left; 

}

div#custom_html-4
{

	 	text-align: left; 

}

div#custom_html-4 img
{
   	position: relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width:50%;
   	height:17%;
    border: 0.063em solid #5eafaf;
    border-radius: 0.5em;
	padding: 2px;
 	margin-bottom: 0.6em; 
    background: #0080c0;
    
}
div#primary .widget
{
	/* Primary Widget Area DIV */
	Background: yellow;
	width: 100%;

}

#searchsubmit, .buttons{
    background: #0080ff;
    background-color: #0080ff;
    margin-top: 1.2em;
    float: right;
    margin-right: 0.5em;
    border-radius:6px;
    color: #FFFFFF;
    padding: 6px 12px;
   	border: 1px solid  #FFFFFF;
}

#wpcf7-f599-o1 > form > p:nth-child(6) > input{
	background: #0080ff;
    background-color: #0080ff;
    margin-top: 0.8em;
    margin-right: 0.5em;
    border-radius:6px;
    color: #FFFFFF;
    padding: 6px 12px;
    border: 1px solid  #FFFFFF;
}

div#search-3 h6{
	display: inline-block;
	position:relative;
    background: #0080ff;
    background-color: #0080ff;
    width: 100%;
    height: auto;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.8em;
    padding: 0;
    margin: 0;
}

ul.cl-for-list, ul.cl-for-list-content {
	position:relative;
	 display: inline-block;
  list-style-type: circle;
  /* list-style-type:none; */

}

ul.cl-for-list li {
	margin-left:-0.5em;
	width: 100%;
	text-align: left;
	font-size: 1.2em;
    font-weight: bold;
}

ul.cl-for-list-content li {
	margin-left: 1.3em;
	width: 100%;
	text-align: left;
	font-size: 2em;
    font-weight: bold;
}



#inside-sidebar-container > h3 {	
	font-weight: 300;
	display: inline-block;
	position:relative;
    background: #0080ff;
    width: 100%;
    height: auto;
    color: #FFFFFF;
	font-size: 1.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.8em;
    padding: 0;
    margin: 0;
}


.prim-widget-area a {
	display: inline-block;
	position:relative;
/*     background: #0080ff; */
    width: 100%;

}
.prim-widget-area h6
.screen-reader-text{
	display: none;
}

#searchform {
    margin: 20px 0 20px 2px;
    color: black;
}


/*** FOOTER ***/
div#footer
{
	/* border-top: 0.05em solid red; */
	margin: 0;
	padding: 0;
	background-color: #0080c0;
    background: #0080c0;
    /* border-bottom: 0.05em solid red; */
}
div#colophon
{
	/* border: 0.1em solid yellow;  */
	background-color: #0080ff;
    background: #0080ff;
	width: 80%;
	display: inline-block;
}

div#site-info
{
	hight: 10%;
	width: 100%;
	display: inline-block;
	/*  border: 0.1em solid yellow; */
}
div#id-for-footerleiste-1
{
	/* border: 0.1em solid yellow;  */
/* 	background-color: yellow;
    background: yellow;  */
	width: 100%;
	display: inline-block;
	text-align: left;
	
}
div#id-for-footerleiste-2
{
	/* border: 0.1em solid yellow;   */
/* 	background-color: yellow;
    background: yellow;  */
	width: 100%;
	display: inline-block;
	text-align: left;
	
}


div#id-for-line-1{
	width: 80%;
}

#custom_html-4 > div, #custom_html-5 > div, #custom_html-6 > div {
	padding:0;
	margin:0;
}

#custom_html-4 > div p, #custom_html-5 > div p, #custom_html-6 > div p {
/* 	background-color: yellow;
    background: yellow;   */
	padding:0;
	margin:0;
	color:red;
}

/* #custom_html-5 > div > p */

#inside-sidebar-container > div{}

#lkbtn{margin:0;}
#custom_html-4 > div p a{
/* 	background-color: yellow;
    background: yellow;  */
width: 50%;
}

/*** YOUR CSS ***/
.cl-inside-sidebar-container{
	height:42vw;
}

#inside-sidebar-container{
	 margin-top: 12px; 
	 margin-bottom: 21px; 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	 border: 0.05em solid #b90000;
	 width: 100%;
	 min-height:24vw;
	 padding:6px;
}


#container-for-content > ul > li{
	margin-bottom: 12px; 
}

#inside-sidebar-container > div {
	font-size: 1.4em;
}

#inside-sidebar-container > p{
font-size: 1.8em;
} 


#cube-container-for-slider{ border-bottom: 0.05em solid #b90000; }

 #link-mcmtech, #link-webseiten,
#link-e-commerce, #link-datenbanken, #link-beratung,
#link-installationen, #link-schulungen {
	position: relative;
    margin: 0.6em 0 0.6em 0; 
    text-align: center;
   width: 80%;

    border: 0.05em solid #b90000;
    border-radius: 21px;
    padding: 6px;

    background: #0080ff;
    background-color: #0080ff;
    color: white;
    text-decoration: none;
    display: inline-block;

}

.st-title{
	border-bottom: 0.05em solid #b90000;
    display: inline-block;
    position: relative;
    background: #0080ff;
    background-color: #0080ff;
    width: 100%;
    height: auto;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.8em;
    padding:  0;
    margin: 1em auto 12px 0px;
    font-weight: 300;
}  


#inside-sidebar-container > div.st-title{

	
    margin: 0em auto 12px 0px;

}  

.st-untertitle{
/* 	border-bottom: 0.05em solid #b90000;
    display: inline-block;
    position: relative;
    background: #10a2ef;
    background-color: #0080ff;
    width: 100%;
    height: auto; */
    color: #10a2ef;

    font-weight: 300;
} 


#id-for-table{
	width: 96%;
	margin-left: 2%;
	margin-top: 3%;
	margin-bottom: 3%;
	border-collapse: separate;
	border-spacing: 36px 6px;
	/* border: solid green 0.05em; */
}

#id-for-table > tbody > tr > th{ text-align:left; width: 33%; 
	border-bottom: solid red 0.05em; text-transform: uppercase; 
	/* border: solid green 0.05em */}
#id-for-table > tbody > tr > td{ text-align:left; width: 33%; }

#id-for-table > tbody > tr:nth-child(3) > th{ padding-top: 5%; }
    
#id-for-table > tbody > tr:nth-child(2) > td:nth-child(1) > a {
	border: 0.063em solid #5eafaf;
	border-radius: 0.5em;
	color: white;
	text-decoration: none;
	padding: 0.1em;
	width: 6em;
	margin-bottom: 3px;
	/* Make the link cover the entire list item-container */
	display: block;
	text-align: center;
}

#id-for-table > tbody > tr:nth-child(2) > td:nth-child(1)> a:hover {
	border-radius: 0.5em;
	color: black;
	background: #80ffff;
	background-color: #80ffff;
	/* margin: 1px 0 2px 0; */
}

#id-for-table > tbody > tr:nth-child(2) > td:nth-child(1) > a > img{
	border-radius: 0.5em;
	background: #0080c0;
	background-color: #0080c0;
}
/* #id-for-table > tbody > tr:nth-child(2) > td:nth-child(1) > a:nth-child(1) */

/*** RESPONSIVE ***/
[class*="col-"] {
 float: left;

}
/* For mobile phones: */
[class*="col-"] {
	position: relative;
	float: left;
	/* width: 100%; */
}


/* div.cl-for-footer-menu */
/* @CHARSET "ISO-8859-1"; */
#menu-bottom-menu {
	display: inline-block;
	
}

#id-for-footer-menu{
	text-align: right;
	padding-right: 5%;
	padding-top: 0.5em;
	border-bottom: 0.05em solid red;
}

/*Start first level*/
.cl-for-footer-menu ul {
	position: relative;
	display: inline-block;
	list-style: none;
	margin: 0.2em;
	
	/* left: 60%; */
}

.cl-for-footer-menu ul>li {
	border: 0.063em solid #5eafaf;
	border-radius: 0.5em;
	position: relative;
	
	/* margin-left: 0.2em; */
	/* padding: 0.375em; */
	width: 8em; /* =135px */ /* 7.50em */; /* =135px */
	background: #0080c0;
	display: inline-block;
}

/*End first level*/   /*Start second level*/


/* Menu Link Styles */
.cl-for-footer-menu ul a /* Apply to all links inside the multi-level menu */ {
	font: normal 1.000em Arial, Helvetica, sans-serif;
	color: white;
	text-decoration: none;
	padding: 6px 6px; 
	width: 8em;
	/* Make the link cover the entire list item-container */
	display: block;
	text-align: center;
}

#menu-item-713 {margin-left: 6px;}
/* #menu-item-713 > a{margin-left: 6px;} */
/* 	On hover, display the second level's menu format display the next level's menu(block)  > */
.cl-for-footer-menu ul a:hover {
	border-radius: 0.5em;
	color: black;
	background: #80ffff;
	background-color: #80ffff;
	/* margin: 1px 0 2px 0; */
}
.cl-for-footer-menu ul>li:hover {
	/* background-color: #4CFFAC; */
	background: #80ffff;
	background-color: #80ffff;
}
.cl-for-footer-menu ul>li:hover ul {
	position: relative;
	/* margin-left: -0.313em; */
	display: inline;
}
.cl-for-footer-menu ul>li:hover ul>li {

	position: relative;
/* 	margin-left: -0.313em; */
	display: inline;
}
.cl-for-footer-menu ul>li>ul>li:hover {
	background: #0080c0;
}




#container-for-cube-und-slider{
	margin-left: 10%; 
	display: flex; width:80vw;
    height: 22.6vw;    
    border-bottom: 1px solid red;
    
 	height:260px"
}

/* Spinnin cube 
/* Datenbanken */

.chatgpt-cube-container {
	/*  style="width: 25%; height:260px" */
	display: flex;
	justify-content: center; /* Zentriert horizontal */
	align-items: center; /* Zentriert vertikal */

	/* border: 1px solid red; */
	width: 20vw; /* 20% der Viewport-Breite */
	height: 22vw; /* Höhe gleich der Breite */
	perspective: 1000px; /* Perspektivtiefe für 3D-Effekt */
}

.chatgpt-cube {
    width: 12vw;
    height: 12vw;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(45deg); /* Initiale Drehung */
    animation: chatgpt-rotateCube 10s infinite linear;
}

@keyframes chatgpt-rotateCube {
    from {
        transform: rotateX(30deg) rotateY(0deg);
    }
    to {
        transform: rotateX(30deg) rotateY(360deg);
    }
}

.chatgpt-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0080ff;
    border: 1px solid #ccc;
    font-size: 1.6vw; /* Schriftgröße relativ zur Container-Breite */
    font-weight: bold;
    color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chatgpt-front  { transform: rotateY(0deg) translateZ(6vw); }
.chatgpt-back   { transform: rotateY(180deg) translateZ(6vw); }
.chatgpt-right  { transform: rotateY(90deg) translateZ(6vw); }
.chatgpt-left   { transform: rotateY(-90deg) translateZ(6vw); }
.chatgpt-top    { transform: rotateX(90deg) translateZ(6vw); }
.chatgpt-bottom { transform: rotateX(-90deg) translateZ(6vw); }

/*
 *
 End Spinnin cube */
 
#container-for-slider {
    max-width: 60vw; /* Setze die maximale Breite des Containers */
    max-height: 22vw; /* Höhe gleich der Breite */
    overflow: hidden; /* Verhindert das Überlaufen */
    visibility: hidden; /* Unsichtbar bis vollständig geladen */
  /*   border: 3px solid green; */
    padding-top:1%;
    padding-bottom:1%;
}

#container-for-slider .metaslider {
    display: flex; /* Flexbox für die Ausrichtung der Bilder */
    transition: transform 0.5s ease-in-out; /* Smoothes Sliden */
    
}

#container-for-slider .metaslider img {
    width: 100%; /* Stellt sicher, dass die Bilder den gesamten Container füllen */
     max-height: 20vw; /* Höhe gleich der Breite */
}

.second-title{font-weight: bold; text-align:left; margin-top:24px; margin-bottom:-6px;}

/* Spinning cube styles remain the same */

@media (max-width: 768px) {
    .cl-horizontal-menu {
        flex-direction: column;
        align-items: stretch; /* Menü in voller Breite auf kleinen Bildschirmen */
    }

    .hamburger-icon {
        display: block; /* Hamburger-Icon anzeigen auf mobilen Geräten */
    }

    .cl-header-menu {
        display: none; /* Menü standardmäßig ausblenden */
        flex-direction: column; /* Vertikales Menü */
        align-items: stretch; /* Elemente auf voller Breite */
        width: 100%;
        background-color: #333;
        position: fixed; /* Menü fixiert beim Scrollen */
        top: 40px;
        left: 0;
        z-index: 1000; /* Damit das Menü über anderen Inhalten liegt */
    }

    .cl-header-menu.show {
        display: flex; /* Menü anzeigen */
    }

    .cl-header-menu li {
        width: 100%; /* Listelemente füllen das Menü horizontal */
    }

    .cl-header-menu li a {
        text-align: center;
        padding: 20px 30px; /* Abstände für die Links vergrößert */
    }

    .main-container {
        flex-direction: column;
    }

    .sidebar, .content {
        width: 100%; /* Volle Breite bei kleineren Bildschirmen */
    }

    #id-logo-icon {
        display: none; /* Logo auf mobilen Geräten ausblenden */
    }
}

/* Footer */
#footer {
    background-color: #0080ff;
    width: 100%;
}

.cl-for-top-menu.responsive {
    position: relative;
}

.cl-for-top-menu.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}