* { 
	margin: 0px; 
	padding: 0px; 
}

body {
	background: #f9f9f9;
	font-size: 17px;
	font-family: Arial, sans-serif;
	max-width: 100%;
}

p {
	text-align: justify;
	padding: 8px 40px;
	font-size: 17px;
	line-height: 150%;
}

p.edit {
	padding: 8px 80px;
	font-style: italic;
}

p.kleiner {
	font-size: 15px;
}

a, a.visited {
	outline: none;
	color: blue;
	text-decoration: none;
}

img {
	max-width: 100%;
}

.rahmen {
	width: 1500px; /*+100*/
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	border-width: 3px;
	border-radius: 35px;
	border-style: solid; 
	border-color: #63adf8;
	background: #63adf8;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.4); /*              2px 2px 15px #666, -2px 2px 15px #666, -2px -2px 15px #666, 2px -2px 15px #666; */
}

.header { /*********red
	position: relative;
	height: 300px; /*256*/
	padding-left: 10px;
}
/*****red
#kopf {
	z-index: 1;
	position: absolute;
	height: 290px;
	margin-top: 10px;
	background: #63adf8;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	text-align: center;
} 

#navi {
	z-index: 2;
	position: absolute;
	height: 40px;
	padding-left: 30px;
	margin-top: 282px;
	margin-left: auto;
	margin-right: auto;
} **/

#kontent {
	max-width: 1450px; /*+100*/
	background: #f9f9f9;
	padding: 15px 15px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	border-color: #000;
	border-style: solid;
	border-width: 0px 1px 1px 1px; 
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;

}

#rahmenkontent {
	padding: 15px 15px;
}




#fuss {
	text-align: center;
	font-size: 15px;
	height: 30px;
	color: white;
	padding-left: 30px;
	padding-top: 10px;
	padding-right: 20px;
	
}

#copyright {
	float: left;
	padding-right: 20px;
}

#stand {
	float: left;
	border-right-style: dotted;
	padding-left: 20px;
	padding-right: 20px;
}

#kontakt, .ds, .ds a, #anfang, #anfang a {
	float: right;
	
	padding-left: 10px;
	padding-right: 10px;
	color: white;
	text-decoration: none;
	
	height: 30px;
}
/*
#kontakt a, .ds a {
	text-decoration: none;
	padding: 3px 10px;
	background: #f9f9f9;
	
}*/

#kontakt a:hover, .ds a:hover {
	color: black;
}



#anfang {
	float: right;
	padding-left: 20px;
	padding-right: 10px;
}


.navibutton {
	float: left;
	font-size: 20px;
	margin-right: 5px;
	padding: 7px 10px;
	background: linear-gradient(to bottom, rgba(170,170,170,0.8) 0%,rgba(109,109,109,0.8) 100%);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-color: #444;
	border-style: solid;
	border-width: 1px 1px 0px 1px;
	font-family: sans-serif;
	text-shadow:  1px  1px 1px black,
                  1px -1px 1px black,
                 -1px  1px 1px black,
                 -1px -1px 1px black;
}

.navibutton a {
	text-decoration: none;
	color: white;
}

.navibutton:hover {
	background: linear-gradient(to bottom, rgba(170,170,170,0.7) 0%,rgba(249,249,249,1) 90%);
}

#activ {
	background: linear-gradient(to bottom, rgba(249,249,249,0.7) 0%,rgba(249,249,249,1) 90%);
}

#activ a {
	color: #000;
	text-shadow: none;
}

h2 {
	font-size: 25px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

h1 {
	font-size: 25px;
	font-color: black;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

h3 {
	text-align: left;
	font-size: 19px;
	padding-top: 10px;
	padding-bottom: 10px;
}

h4 {
	text-align: center;
	font-size: 18px;
}	

h5 {
	padding-bottom: 5px;	
}

hr {
	color: #63adf8;
	background: #63adf8;
	height: 2px;
}

ol {
	margin-left: 70px;
}

ul, ol {
	margin-left: 80px;
	margin-right: 40px;
}

ul > ul {
	margin-left: 40px;
	margin-right: 0px;
}



li {
	padding-bottom: 5px;
	text-align: justify;
	font-size: 17px;
	line-height: 25.5px;
}

ul.font15 li{
	font-size: 15px;
}

th {
	font-size: 15px;
}

td {
	font-size: 13px;
	font-family: Arial;
	padding: 10px 3px 10px 3px;	
}

td.center {
	text-align: center;
}

img.vorschau {
	width: 90px;
}

img.vorschau-usb-ha {
	width: 150px;
}

img.bild-akku {
	width:150px;
}

img.big {
	max-height: 100vh;
	max-width: 1720px;
    overflow: auto;
	box-shadow:2px 2px 25px #666, -2px 2px 25px #666, -2px -2px 25px #666, 2px -2px 25px #666; 
	border: 1px solid;
	border-radius: 15px;
}

img.big-tl {
	max-height: 100vh;
    overflow: auto;
	box-shadow:2px 2px 25px #666, -2px 2px 25px #666, -2px -2px 25px #666, 2px -2px 25px #666;
}	

img.big-ha {
	max-height: 100vh;
    overflow: auto;
	box-shadow:2px 2px 45px #666, -2px 2px 45px #666, -2px -2px 45px #666, 2px -2px 45px #666;
}	

img.haken {
	width:15px;
	height: 15px;
}

img.temps {
	width: 360px;
}





td.top {
	vertical-align: top;
}

td.justify {
	text-align: justify;
}

th {
	text-align: center;
	padding: 10px;
}

tr:nth-child(even) {background: #cfe9fe;}
tr:nth-child(odd) {background: #a2d6ff;} 

table {
	border: 0px;
	border-collapse: separate;
}

tr td:not(:first-child) {text-align: center;}
tr:first-child th:first-child {border-top-left-radius: 15px;}
tr:first-child th:last-child {border-top-right-radius: 15px;}
tr th {background-color: rgb(170, 170, 170);}



table.vollebreite {
	width: 100%;
	table-layout: fixed;
}

th.flex {
	width: auto;
}

.links2 td:nth-child(2) {text-align: left !important;}
.links3 td:nth-child(3) {text-align: left !important;}
.links4 td:nth-child(4) {text-align: left !important;}
.links5 td:nth-child(5) {text-align: left !important;}





[popover] {
	background: none; /*#b0c6e1;*/
  /*border: 1px solid;
  border-radius: 15px;
  max-width: 1600px;
  /*box-shadow:2px 2px 5px #666, -2px 2px 5px #666, -2px -2px 5px #666, 2px -2px 5px #666;
  */padding: 55px; 
  margin: auto;
}

[popover]::backdrop {
    background: rgba(0,0,0,0.25);
}

[popover] img.big {
    display: block;
}

figure {
	border: none;
}

figcaption {
  text-align: center;
}


.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 26px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

.close-btn:hover {
    background: rgba(0,0,0,0.8);
}













/********************************/



h4 {
	text-align: left;
	font-size: 19px;
	margin-top: 40px;
	margin-bottom: 10px;
}

span.nachdatum {
	margin-left: 190px;
}

span.datum {
	position: absolute;
}

span.techdaten {
	margin-left: 360px;
}

span.updatehome {
	background-color: #e84d0e;
	border-radius: 10px;
	color: white;
	padding: 1px 4px;
}

span.bildhinweis {
  display: block;
  font-size: 0.7em;
  color: #777;
  margin-top: 4px;
  margin-bottom: 20px;
}


span.kursiv {
	font-style: italic;
}


/*****************************************/


.container{
   display: flex ;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}
 
.container-links{
   text-align: left;
   padding-left: 10px;
   display: flex;
   flex-direction: column;
   width: 60%;
 }
 
.container-rechts{
   text-align: right;
   padding-right: 10px;
   display: flex;
   flex-direction: column;
   width: 40%;
 }
 
 
 
 span.akkuformat {
	 font-size: 12px;
 }
 
 
 
 /********************************/

/*
.toggleBox1,
.toggleBox2 {
    position: relative;
    border: 2px solid #63adf8;
    border-radius: 15px;
    margin-bottom: 20px;
}
 
/* Ausblenden des input-Feldes */
.toggleBox1 input,
.toggleBox2 input {
    position: absolute;
    left: -99999px;
}
 
/* Gestaltung der labels
.toggleBox1 label,
.toggleBox2 label {
    display: block;
    background: #e6e8ea;
    border-radius: 14px;
    color: black;
    padding: .4em;
    text-align: left;
    cursor: pointer;
}
 
.toggleBox1 label:hover,
.toggleBox2 label:hover {
    background: #e6e8ea;
    color: #00E;
}
 
/* Der Aufklappmechanismus */
.toggleBox1 input:not(:checked) ~ #box1,
.toggleBox2 input:not(:checked) ~ #box2 {
    opacity: 0;
    height: 0;
}
 
.toggleBox1 input:checked ~ #box1,
.toggleBox2 input:checked ~ #box2 {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
 
/* Steuerung der Sichtbarkeit der labels */
.toggleBox1 input:not(:checked) ~ .close,
.toggleBox2 input:not(:checked) ~ .close,
.toggleBox1 input:checked ~ .open,
.toggleBox2 input:checked ~ .open {
    display: none;
}


 /********************************/
 

 .update{
   display: flex ;
   flex-direction: row;
   justify-content: center;
   /*align-items: center;*/
   width: 1200px;
   margin-bottom:30px;
   background: #efefef;
   transition: background-color 0.4s ease;
   border: 1px solid #ccc;
   padding: 7px;
   box-shadow: 2px 2px 6px #ddd;
}

.update:hover {
	background: #e7e7e7;
}
 
.update-bild{
   text-align: left;
   padding-left: 2px;
   display: flex;
   flex-direction: column;
   width: 15%;
 }
 
.update-text{
   text-align: left;
   padding-right: 2px;
   display: flex;
   flex-direction: column;
   width: 85%;
 }
 
 img.tn {
	 width: 150px;
	 height: 100px;
	 border-radius: 5px;
	 box-shadow:2px 2px 15px #ddd, -2px 2px 15px #ddd, -2px -2px 15px #ddd, 2px -2px 15px #ddd;
 }
 
 span.tag {
	 font-size: 12px;
	 font-weight: 800;
	 padding-bottom:8px;
 }
 
 .update-text > p {
	 padding: 0px;
	 font-size: 14px;
 }
 
 
 /**********************buttons************************************/
 
a.button {
       /* background-position: 0% 0%; */
        background-color: transparent;
        color: black !important;
        border-radius: 15px;
        border-color: #707070;
        border-width: 1px;
        border-style: solid;
        background-image: linear-gradient(180deg, #f2f2f2, #d2d2d2);
		font-size: 22px;
		padding: 20px;
		
    }
a.button:hover {
        background-image: linear-gradient(180deg, #e8f6fd, #63adf8);
    }
	
/**************************************************************/


table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}







/***********************Redesign***********/


body {
	background: #63adf8;
}

.rahmen {
	margin-bottom: 0px;
	margin-top: 0px;
	border-radius: 0px;
	border: 0px;
	background: #f9f9f9;
}

.header {
	padding: 0px;
}

#menu {
	height: 40px;
}

#kontent {
	margin: 0px;
	border: 0px;
	max-width: 100%;
}

#kopfbild {
	height: 150px;
}


/************************************************************ Menüleiste *********************************************************/
.navbar, #fuss {
  background: linear-gradient(180deg, #7db0e3, #2c5b9c);
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu-item {
  position: relative;
}

li.menu-item {
	padding-bottom: 0px;
	font-size: 20px;
	border-right: 1px solid #111;
}


.menu > .menu-item > a {
  display: block;
  padding: 14px 20px;
  color: white;
  text-decoration: none;
  background: linear-gradient(180deg, #7db0e3, #2c5b9c);
}

.menu li a:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), linear-gradient(180deg, #7db0e3, #2c5b9c);
}

.menu > .menu-item > a:hover {
  background-color: #555;
}

/* Submenü */
.submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #2c5b9c; /*#a9cefc;*/
  display: none;
  min-width: 160px;
  z-index: 1000;
}

.submenu li a {
  display: block;
  padding: 7px 16px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

.submenu li a:hover {
  background: linear-gradient(rgb(242, 242, 242), rgb(210, 210, 210));
  color: black;
}

/* Beim Hover anzeigen */
.menu-item:hover .submenu {
  display: block;
}

ul.submenu {
	margin-left: 0px;
}


/* Sub-Submenü */
.subsubmenu {
  list-style: none;
  position: absolute;
  top: 0;              /* direkt oben bündig mit "18V Akkus" */
  left: 100%;          /* direkt rechts daneben */
  margin: 0;           /* kein äußerer Abstand */
  padding: 0;          /* kein innerer Abstand am UL */
  background-color: #2c5b9c;
  display: none;
  min-width: 180px;
  z-index: 1100;
}

.subsubmenu li a {
  display: block;
  padding: 7px 16px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

.subsubmenu li a:hover {
  background: linear-gradient(rgb(242, 242, 242), rgb(210, 210, 210));
  color: black;
}

/* Anzeigen beim Hover */
.submenu li:hover .subsubmenu {
  display: block;
}

.submenu li {
  position: relative; /* wichtig, damit .subsubmenu relativ zu diesem li positioniert wird */
}




.has-subsubmenu {
  position: relative; /* wichtig, damit ::after sich daran orientiert */
}


.has-subsubmenu > a::after {
  content: "\25B6"; /* Unicode für ▶ */
  font-family: Arial, sans-serif; /* Font mit sicherem Unicode-Support */
  font-size: 12px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}





/**********************Menü Ende*****************/


/***********************Bingo************/

table.bingo {
    border-collapse: collapse;
  }
  table.bingo td {
    border: 1px solid #666;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    width: 150px;
    height: 50px;
    user-select: none;
  }
  table.bingo td.clicked {
    background-color: #9f9;
  }
  
  
table.font17 td, table.font17 th{
	font-size: 17px;
}

table.font15 td, table.font15 th{
	font-size: 15px;
}










/*****************************************Info Popup***************************************************/



.info {
  position: relative;
  display: inline-block;
  cursor: help;
}

.info-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #868686;
  font-weight: bold;
  font-size: 13px;
  margin-left: 4px;
  user-select: none;
  border: solid 1px;
}

.info-text {
  visibility: hidden;
  opacity: 0;
  width: 400px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* über dem Symbol */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s;
  font-size: 17px;
  line-height: 1.4;
  
    /* WICHTIG: Blocksätze */
  display: block;
  text-align: justify;
  text-justify: inter-word;
}

.info-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.info:hover .info-text {
  visibility: visible;
  opacity: 1;
}

/*********************************************Bilder hover groß***********************************************/


.zoom-image.onefile img {
  width: 150px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: zoom-in;
}

.zoom-image.onefile:hover img {
  transform: scale(2.5); /* zoomt das Bild */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 10;
}

.zoom-image.onefile-x4 img {
  width: 150px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: zoom-in;
}

.zoom-image.onefile-x4:hover img {
  transform: scale(4); /* zoomt das Bild */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 10;
}

.zoom-image.onefile-x4-bild img {
  width: 150px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: zoom-in;
}

.zoom-image.onefile-x4-bild:hover img {
  transform: scale(4); /* zoomt das Bild */
  z-index: 10;
	border: 0.01px solid;
	border-radius: 5px;
}




/********************POwerbank-Vergleiche***********/

  
 
  .tab-container {
    width: 1300px;
  }

  /* Tabs */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    /*background: #f2f2f2; */
	font-size: 19px;
	
  }

  .tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
	background: linear-gradient(180deg, #7db0e3, #2c5b9c);
	color: white !important;
  }

  .tab:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), linear-gradient(180deg, #7db0e3, #2c5b9c);;
  }

  input[type="radio"] {
    display: none;
  }

  input[type="radio"]:checked + label {
    background: linear-gradient(180deg, #7db0e3, #2c5b9c);
    /*border-bottom: 2px solid #007bff; */
    font-weight: bold;
	color: #a3ee2a !important;
  }

  /* Bildbereich */
  .tab-content {
    position: relative;
    width: 100%;
    background: none;
    margin-top: 10px;
    overflow: hidden;
  }

  .tab-content img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    max-width: none; /* Originalgröße */
    height: auto;
  }

  /* Sichtbares Bild */
  #tab1:checked ~ .tab-content .img1,
  #tab2:checked ~ .tab-content .img2,
  #tab3:checked ~ .tab-content .img3,
  #tab4:checked ~ .tab-content .img4,
  #tab5:checked ~ .tab-content .img5,
	#tab6:checked ~ .tab-content .img6,
	#tab7:checked ~ .tab-content .img7,
	#tab8:checked ~ .tab-content .img8	{
    opacity: 1;
    pointer-events: auto;
    position: relative;
    transform: translateX(-50%);
  }
  
  
  
  /**********************************rangliste wh*****************/
  
 /* --- Vorschau im Artikel --- */
.img-zoom-rangliste-wh {
  cursor: zoom-in;
  transition: transform 0.2s ease;
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}
.img-zoom-rangliste-wh:hover {
  transform: scale(1.05);
}

/* --- Lightbox-Stil --- */
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  overflow: auto; /* wichtig: erlaubt Scrollen bei großen Bildern */
  padding: 30px;
  box-sizing: border-box;
}
.lightbox img {
  max-width: none; /* zeigt Originalgröße */
  height: auto;
  display: block;
  margin: auto;
  cursor: zoom-out;
}

.img-zoom-ranglisten-nimh {
  cursor: zoom-in;
  transition: transform 0.2s ease;
  max-width: 380px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}
.img-zoom-ranglisten-nimh:hover {
  transform: scale(1.05);
}




/*******************************************************************/

















































































































/********************************************irgendwie für Telefone****************************/



@media screen and (max-width: 1500px) {
    body {
        transform: scale(0.8); /* Skaliert den gesamten Inhalt auf 80% */
        transform-origin: top left; /* Fixiert den Ursprung der Skalierung */
        width: 125%; /* Korrigiert die Skalierung, um Breite zu erhalten */
    }
	
	img.big {
		max-width: 90%;
	}
	
	p, li, body, li.menu-item, .update-text > p, table.font17 td, table.font17 th {font-size: 20px;}
	li {line-height: 27px;}
	.update-text > span.tag {font-size: 17px; }
	p {line-height: 32px;}
	p.kleiner {font-size: 18px;}
	h3 {font-size: 22px;}
	h2 {font-size: 28px;}
	h1 {font-size: 28px;}
	.rahmen {width: 120%;}
}


@media screen and (max-width: 1200px) {
    body {
        transform: scale(0.6); /* Skaliert den gesamten Inhalt auf 80% */
        transform-origin: top left; /* Fixiert den Ursprung der Skalierung */
        width: 125%; /* Korrigiert die Skalierung, um Breite zu erhalten */
    }
	
	img.big {
		max-width: 90%;
	}
	
	p, li, body, li.menu-item, .update-text > p, table.font17 td, table.font17 th {font-size: 23px;}
	li {line-height: 31px;}
	.update-text > span.tag {font-size: 20px; }
	p {line-height: 39px;}
	p.kleiner {font-size: 20px;}
	h3 {font-size: 25px;}	
	h2 {font-size: 30px;}
	h1 {font-size: 30px;}
	div.update {width: 100%; }
	.rahmen {width: 160%;}
	
}


@media screen and (max-width: 850px) {
    body {
        transform: scale(0.4); /* Skaliert den gesamten Inhalt auf 80% */
        transform-origin: top left; /* Fixiert den Ursprung der Skalierung */
        width: 125%; /* Korrigiert die Skalierung, um Breite zu erhalten */
    }
	
	img.big {
		max-width: 90%;
	}
	
	p, li, body, li.menu-item, .update-text > p, table.font17 td, table.font17 th {font-size: 28px;}
	li {line-height: 35px;}
	.update-text > span.tag {font-size: 25px; }
	p {line-height: 41px;}
	h3 {font-size: 30px;}	
	h2 {font-size: 33px;}
	h1 {font-size: 33px;}
	div.update {width: 100%; }
	.rahmen {width: 230%;}
}