body{


  font-size: 18px;	
  text-align:center;

  font-family: "Montserrat", sans-serif;


}


body img
{ 
  max-width:100%;
}

h1{
	margin-right:45px;
}

#myCanvas{
    background:transparent;
}

  a.links { cursor: default; }
  
 .bild:hover
 {
//	 opacity:0.8;
 }
 
.buch
{
    box-shadow: 1px 1px black, -1px -1px black;
}
.buchc
{
    box-shadow: 0px 1px black, 0px -1px black;
}
.buchl
{
    box-shadow: 0px 1px black, 1px -1px black;
}  

#presentation_text
{
	margin: 10px;
    padding: 10px;
    font-size: 24px;
	background: #dd9aff94;
    border-radius: 50px;
}

.pfeil_img
{
	max-width: 120px;
}

.pfeil_img:hover
{
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-filter: drop-shadow(0px 0px 30px rgba(0,255,0,0.80));
}
.to_left
{
	float:left;
}
.to_right
{
	float:right;
}

.center
{
	text-align:center;
}
.Zeit
{
	position:relative;
	float:left;
	width:50%;
	text-align:right;
}
#uhrzeit,#left_time
{
	position:relative;
	float:left;
	width:50%;
	text-align:left;	
}

.advent_div
{
	
}

.num:hover /*Ingrandisce il numero per rendere l'idea che è premibile*/
{
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-filter: drop-shadow(0px 0px 20px rgba(255,255,0,0.80));
	scale: calc(1.1);
	cursor: pointer;
}

#snow_div
{
	position:absolute;
	float:left;
	z-index:-20;
}

.advent_div img
{
	max-width:50px;
}

.arrows_div
{
	position:relative;
	float:left;
	width:25%;
	text-align:center;
}
#index_week
{
	position:relative;
	float:left;
	width:50%;
	text-align:center;	
}

.arrows
{	
    background: #03B100 ;
    background: -webkit-linear-gradient( #03B100 , #66FF79 ) ;
    background: -o-linear-gradient( #03B100 , #66FF79) ;
    background: -moz-linear-gradient( #03B100 , #66FF79) ;
    background: linear-gradient( #03B100 , #66FF79) ;	
}

.arrows:hover
{
    background: #E4E623  ;
    background: -webkit-linear-gradient( #E4E623  , #FF6D66 ) ;
    background: -o-linear-gradient( #E4E623  , #FF6D66) ;
    background: -moz-linear-gradient( #E4E623  , #FF6D66) ;
    background: linear-gradient( #E4E623  , #FF6D66) ;	
}

#funktioniert
{
	font-size:24px;
	background-color:#56FF00;
	border:3px dashed #673AB7;
	width:30%;
	margin:auto;
}

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:#dd91d4;
  transition: 1s 0.4s;
}
#full_bar
{
    height: 58px;
    position: absolute;
    width: 94%;
    margin: 2%;
    border-style: solid;
    top: 10%;
    border-width: 4px;
}
#percentage
{
	position: absolute;
    left: 47%;
    font-size: 3em;
    font-family: sans-serif;	
}
#progress{
  height:50px;
	background: #F44336;
	background: -webkit-linear-gradient( right, #FFEB3B , #F44336);
	background: -o-linear-gradient( right, #FFEB3B , #F44336);
	background: -moz-linear-gradient ( right, #FFEB3B , #F44336);
	background: linear-gradient(to right, #FFEB3B , #F44336);
  position:absolute;
  width:0;                /* will be increased by JS */
}
#progstat{
  font-size:1.5em;
  letter-spacing: 3px;
  position:absolute;
  top:35%;
  margin-top:-40px;
  width:100%;
  text-align:center;
    color: #000;
    padding: 10px;
}

#continue_btn
	{
		display:none;
		top: 70%;
		margin:auto;
		position: relative;
		width:40%;
		max-width: 350px;
		min-width: 200px;
		min-height: 35px;

		background: #000090 ; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient( #000090 , #0000ff ); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient( #000090 , #0000ff); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient( #000090 , #0000ff); /* For Firefox 3.6 to 15 */
		background: linear-gradient( #000090  , #0000ff); /* Standard syntax */	
	}
	
#continue_btn:hover
	{
		background: #ff6000 ; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient( #ff6000 , #ff9000 ); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient( #ff6000 , #ff9000); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient( #ff6000 , #ff9000); /* For Firefox 3.6 to 15 */
		background: linear-gradient( #ff6000  , #ff9000); /* Standard syntax */	
	}
	
	
.knopf
	{
		padding: .5em;
		font-weight: bold;
		font-size:20px;
		color: #ffffff;
		text-shadow: 1px 1px 1px #000;
		border: solid thin #882d13;
		-webkit-border-radius: .7em;
		-moz-border-radius: .7em;
		border-radius: .7em;
		-webkit-box-shadow: 2px 2px 3px #999;
		box-shadow: 2px 2px 2px #bbb;
	}
	
.knopf:hover
	{
		cursor:pointer;
	}		

#buchstabendiv
{
	margin-top:30px;
	position:relative;
	margin:auto;
	width:100%;
	max-width:1400px;
}

#Stati
{
	text-align:center;
	margin:auto;
    background: beige;
}

#Stati td
{
	padding: 30px;
}

.divback
{
	position:relative;
	float:left;
	width:100%;
	text-align:center;
}


.table
{
	display:table;
	table-layout: fixed;
	max-width:1000px;
	margin:auto;
//	display:none;
}
.tableB
{
	display:table;
	table-layout: fixed;
	margin:auto;
	width:90%;
	max-width:1200px;
}

.row
{
/*	display:table-row;*/
	float:left;
	width:100%;
}

.cell
{
	float:left;
	//width:12.5%;
	padding:0px;
	margin:0px;
	height:100%;
	font-size:0px;	
}

.cellB
{
	float:left;
    width: 3.5%;
	padding:0px;
	margin:0px;
}
.cell_space
{
    width: 0.4% !important;
}

.element
{
	position:relative;
	width:100%;
	float:left;
	margin-top:20px;
}

.Tabelle
{
	display:table;
	margin:auto;
	width:auto;
}

.reihe
{
	display:table-row;
}

.celle
{
	display:table-cell;
	padding:30px;
	border:1px solid black;
}

.info
{
/*	padding-right:45px;*/
	padding:10px;
}

.Alarm
{
	font-size:24px;
	color:red;
}

.tooltip {
    background-color:#000;
    border:1px solid #fff;
    padding:10px 15px;
    width:200px;
    display:none;
    color:#fff;
    text-align:left;
    font-size:12px;
	position:absolute;
 
    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}
.mehr
{
	display:inline-block;
}

.mehrtext
{
	display:none;
	font-size:16px;
	font-style: italic;
	font-weight:normal;
}

.divback
{
	position:relative;
	float:left;
	width:100%;
	text-align:center;
	margin-top:30px;
}

a.buttonz {
	text-align:center;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

}

.Zurück
{
	cursor: pointer;
    font-weight: bold;
    font-size: 24px;
    color: rgb(255, 255, 255);
    text-shadow: rgb(0, 0, 0) 1px 1px 1px;
    box-shadow: rgb(187, 187, 187) 2px 2px 2px;
    margin: 10px;
    padding: 5px;
    border-width: thin;
    border-style: solid;
    border-color: rgb(136, 45, 19);
    border-image: initial;
    border-radius: 0.7em;	
	
		background-color: #0000ff;
		background: #FFF03A ; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient( #FFF03A , #FFBC00 ); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient( #FFF03A , #FFBC00); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient( #FFF03A , #FFBC00); /* For Firefox 3.6 to 15 */
		background: linear-gradient( #FFF03A  , #FFBC00); /* Standard syntax */				
/*		background-image: -webkit-gradient(linear, left top, left bottom,
		from(#FF00C8), to(#C000FF),color-stop(0.4, #0000cc));		*/
}

.Zurück:hover
{
		background: #FF3A3A ; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient( #FF3A3A , #8A3D07 ); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient( #FF3A3A , #8A3D07); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient( #FF3A3A , #8A3D07); /* For Firefox 3.6 to 15 */
		background: linear-gradient( #FF3A3A  , #8A3D07); /* Standard syntax */		
/*	background-image: -webkit-gradient(linear, left top, left bottom,
	from(#FF00C8), to(#C000FF),color-stop(0.4, #FF0000));			*/
}

#TOP
{
		background: #B70909 ; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient( #B70909 , #EC0909 ); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient( #B70909 , #EC0909); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient( #B70909 , #EC0909); /* For Firefox 3.6 to 15 */
		background: linear-gradient( #B70909  , #EC0909); /* Standard syntax */		
}
#TOP:hover
{
		background: #099A28 ; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient( #099A28 , #09EC1A ); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient( #099A28 , #09EC1A); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient( #099A28 , #09EC1A); /* For Firefox 3.6 to 15 */
		background: linear-gradient( #099A28 , #09EC1A); /* Standard syntax */		
}


@media only screen and (max-width: 740px){	/*X Mobile L-M-S*/


body


{font-size: 18px;}

.cellB
{
    width: 3.5%;
}

.buch
{
	box-shadow: 0px 1px white, 0px 0px black;
}
.buchc
{
    box-shadow: 0px 1px black, 0px 0px black;
}
.buchl
{
    box-shadow: 0px 1px black, 0px 0px black;
}  


#funktioniert
{
	width:70%;
}

}

@media only screen and (max-width: 500px){	/*X Mobile L-M-S*/
h1{
	font-size: 26px;
	margin-right:0px;	
    margin-top: 45px;
}

.Zurück
{
	font-size:16px;
}	

}




@media only screen and (max-width: 400px){	/*X Mobile L-M-S*/


body{

  font-size: 16px;	

}

.Tabelle
{
	display:table;
	margin:auto;
	width:auto;
}

.reihe
{
	display:table-row;
}

.celle
{
	display:table;
	padding:0px;
	border:0px;
	text-align:center;
	width:100%;
}

.what
{
	font-weight:bold;
}

}




@media only screen and (min-width: 1200px){	/*X LAPTOP*/


body


{ font-size: 22px;	}


}

/* Sessione 27, Avvento 2026 ------------------------------------------------ */

/* GK1: "Weiter" e' un <button> (prima un <div> che si apriva solo col mouse) */
#overlay { text-align:center; }
button.knopf { font-family:inherit; cursor:pointer; }
button.knopf::-moz-focus-inner { border:0; }
.knopf:focus, .Zurück:focus, .tuer-link:focus
{
	outline:3px solid #000;
	outline-offset:3px;
}

/* GK7: contrasti, bianco almeno 4,5:1 su tutto il gradiente */
#continue_btn:hover, #continue_btn:focus
{
	background: #A64200;
	background: -webkit-linear-gradient( #A64200 , #C25100);
	background: linear-gradient( #A64200 , #C25100);
}
.arrows
{
	background: #006B00;
	background: -webkit-linear-gradient( #006B00 , #008A00);
	background: linear-gradient( #006B00 , #008A00);
}
.Zurück { color:#2B1A00; text-shadow:none; }
.Zurück:hover, .Zurück:focus
{
	color:#fff;
	background: #C62828;
	background: -webkit-linear-gradient( #C62828 , #8A3D07);
	background: linear-gradient( #C62828 , #8A3D07);
}

/* GK3-GK4: stato delle porte, scritto nell'alt e disegnato qui */
.tuer-link:focus .num
{
	outline:4px solid #fff;
	box-shadow:0 0 0 8px #000;
}
.tuer-heute img
{
	-webkit-filter: drop-shadow(0px 0px 12px rgba(255,230,0,1));
	filter: drop-shadow(0px 0px 12px rgba(255,230,0,1));
}
.tuer-zu img
{
	opacity:.75;
	-webkit-filter: grayscale(70%);
	filter: grayscale(70%);
}
.tuer-zu:hover
{
	cursor:default;
	-webkit-filter:none;
	filter:none;
}
.tuer-zu::after	/* lucchetto disegnato (niente simboli: su Windows XP sarebbero rettangoli) */
{
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	width:38%;
	height:38%;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23333' stroke-width='3'/%3E%3Crect x='3' y='10' width='18' height='13' rx='2' fill='%23FFD54F' stroke='%23333' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='16' r='2' fill='%23333'/%3E%3C/svg%3E") no-repeat right bottom;
	background-size:contain;
	pointer-events:none;
}

/* GK8: pulsante della neve (24-26 dicembre) */
.schnee_div { text-align:center; margin:10px 0; }
#schnee_knopf
{
	background: #000090;
	background: -webkit-linear-gradient( #000090 , #0000ff);
	background: linear-gradient( #000090 , #0000ff);
}

/* Sessione 27: titolo scritto finche' l'immagine Titel/NN.jpg non e' caricata */
.titel_text
{
	display:inline-block;
	padding:20px 30px;
	font-size:48px;
	font-weight:bold;
	color:#fff;
	text-shadow:2px 2px 4px #000;
}