/* Home nuova (Sessione 33, docs/sito/20-HOME.md).
   Colori dalle variabili di menu/farben.css (caricato da menu/include.php).
   Compatibile con Chrome 49 (PC dei genitori): niente Grid, gap, inset, aspect-ratio. */

body.hk-seite {
	background: #efe3e3 url("hintergrund.jpg");
	color: #2a2a2a;
	font-family: Montserrat, Arial, sans-serif;
}
.hk-seite img { max-width: 100%; border: 0; }
.hk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.hk-seite a:focus, .hk-seite button:focus { outline: 3px solid #1a5fb4; outline-offset: 2px; }

/* Barra degli admin (giorno prima / dopo) */
.hk-admin { background: #c9c9c9; padding: 8px 16px; text-align: center; font-size: 14px; }
.hk-admin form, .hk-admin span, .hk-admin a { display: inline-block; margin: 4px 8px; vertical-align: middle; }
.hk-admin button { background: #1e7b1e; color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; }

/* Testata */
.hk-kopf {
	display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;
	-webkit-align-items: center; align-items: center;
	background: rgba(255, 255, 255, .9); border-radius: 18px; margin: 52px 0 16px; padding: 14px 18px;	/* sopra resta posto per il pulsante Menü */
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
/* scritta Gugelfamily grande, su tutta la larghezza; benvenuto e orologio sotto (Michele) */
.hk-kopf h1 { margin: 0 0 10px; -webkit-flex: 1 1 100%; flex: 1 1 100%; width: 100%; }
.hk-kopf h1 img { display: block; width: 100%; height: auto; }
.hk-gruss { -webkit-flex: 1 1 300px; flex: 1 1 300px; margin: 8px 18px 8px 0; font-size: 18px; line-height: 1.5; }
.hk-account { color: #8a3000; font-weight: 600; text-decoration: underline; }

/* Orologio piccolo: quadrante di sempre (clock3.png), lancette disegnate */
.hk-uhr { -webkit-flex: 0 0 auto; flex: 0 0 auto; text-align: center; font-size: 13px; font-weight: 600; color: #6b2a2a; }
.hk-ziffernblatt { position: relative; width: 84px; height: 84px; margin: 0 auto 4px; background: url("indexphotos/clock3.png") no-repeat center; background-size: 100%; }
.hk-zeiger { position: absolute; left: 50%; bottom: 50%; border-radius: 3px; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
.hk-stunde { width: 4px; height: 20px; margin-left: -2px; background: #c00; }
.hk-minute { width: 3px; height: 28px; margin-left: -1.5px; background: #111; }
.hk-sekunde { width: 1px; height: 30px; margin-left: -.5px; background: #1e7b1e; }
.hk-mitte { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #333; }
.hk-datum { display: block; }

/* Calendari stagionali (stesso markup di index.php) */
.hk-saison { text-align: center; font-size: 18px; }
.hk-saison img { border-radius: 14px; }

/* Titoli dei blocchi */
.hk-block { margin-top: 24px; }
/* titoli dei blocchi più vivi, nel rosso della scritta Gugelfamily, centrati sul computer (Michele) */
.hk-titel {
	display: table; font-size: 26px; font-weight: 700; margin: 0 0 14px; padding: 8px 26px;
	color: #fff; background: #8a1414; background: linear-gradient(#a81d1d, #6e0e0e);
	border: 3px solid #ffd34d; border-radius: 30px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .4); letter-spacing: .3px;
}
@media (min-width: 601px) {
	.hk-titel { margin-left: auto; margin-right: auto; }
}

/* Carosello "Das Beste dieser Woche": scorre da solo, lento (Michele), con pausa */
.hk-karussell { position: relative; background: #222; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.hk-folien { position: relative; height: 460px; }
.hk-folie { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity .8s, visibility .8s; transition: opacity .8s, visibility .8s; }
.hk-folie.hk-an { opacity: 1; visibility: visible; }
.hk-folie a { display: block; height: 100%; color: #fff; text-decoration: none; }
.hk-folie img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hk-folie figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 160px 18px 18px; font-size: 20px; font-weight: 600;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)); text-align: left;
}
.hk-nr { color: #ffd34d; }
.hk-punkte { position: absolute; top: 12px; right: 14px; }
.hk-punkt { width: 14px; height: 14px; margin-left: 6px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .35); cursor: pointer; }
.hk-punkt.hk-an { background: #fff; }
.hk-knoepfe { position: absolute; right: 12px; bottom: 12px; }
.hk-knoepfe button {
	width: 40px; height: 40px; margin-left: 6px; border: 0; border-radius: 50%; padding: 0;
	background: rgba(255, 255, 255, .92); color: #222; font-size: 26px; line-height: 38px; cursor: pointer;
}
/* Pausa e play disegnati (su XP i simboli diventano rettangoli) */
.hk-pause-icon { display: inline-block; width: 12px; height: 14px; border-left: 4px solid #222; border-right: 4px solid #222; box-sizing: border-box; vertical-align: middle; }
.hk-gestoppt .hk-pause-icon { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #222; margin-left: 3px; }

/* Schede delle rubriche: tutta colorata con la sfumatura della rubrica, testo su fondo chiaro (Michele) */
.hk-karten { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin: 0 -9px; }
.hk-karte {
	position: relative; width: 31.33%; width: calc(33.333% - 18px); margin: 0 9px 18px;
	display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
	border: 3px solid var(--c2); border-radius: 16px; overflow: hidden;
	background: var(--c1); background: linear-gradient(160deg, var(--c1), var(--c2));
	box-shadow: 0 3px 10px rgba(0, 0, 0, .15); -webkit-transition: -webkit-transform .15s; transition: transform .15s;
}
.hk-karte:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
.hk-band {
	display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;
	-webkit-align-items: center; align-items: center;
	background: rgba(0, 0, 0, .14); color: var(--ct); padding: 9px 14px; font-weight: 700; font-size: 15px; line-height: 1.25;
}
.hk-neu { background: #fff; color: #b00020; border-radius: 20px; padding: 3px 10px; font-size: 12px; white-space: nowrap; margin-left: 8px; }
.hk-neu.hk-alt { color: #444; }
.hk-bild { margin: 10px 10px 0; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.hk-bild img { display: block; width: 100%; height: 230px; object-fit: cover; }
.hk-text { margin: 10px; padding: 10px 12px; background: rgba(255, 255, 255, .92); border-radius: 10px; -webkit-flex: 1 0 auto; flex: 1 0 auto; }
.hk-text h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.hk-text h3 a { color: #1a1a1a; text-decoration: none; }
.hk-text h3 a:hover { text-decoration: underline; }
/* tutta la scheda è cliccabile, ma il link è solo il titolo */
.hk-text h3 a:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.hk-text p { margin: 0; font-size: 14px; color: #444; line-height: 1.4; }
.hk-zufall .hk-karte { width: 23%; width: calc(25% - 18px); }
.hk-zufall .hk-bild img { height: 160px; }
.hk-zufall .hk-text h3 { font-size: 17px; }
.hk-text .hk-wann { font-weight: 700; color: #6b2a2a; font-size: 13px; }

/* Colori per rubrica (menu/farben.css); --ct = testo della fascia */
.hk-news           { --c1: var(--news-back-1);         --c2: var(--news-back-2);         --ct: #000; }
.hk-kritiker       { --c1: var(--kri-back-1);          --c2: var(--kri-back-2);          --ct: #000; }
.hk-promoter       { --c1: var(--pro-back-1);          --c2: var(--pro-back-2);          --ct: #000; }
.hk-umweltminister { --c1: var(--umwelt-back-1);       --c2: var(--umwelt-back-2);       --ct: #fff; }
.hk-gartenecke     { --c1: var(--garten-back-1);       --c2: var(--garten-back-2);       --ct: #000; }
.hk-kochstudio     { --c1: var(--koch-back-1);         --c2: var(--koch-back-2);         --ct: #000; }
.hk-pilze          { --c1: var(--pilze-back-1);        --c2: var(--pilze-back-2);        --ct: #fff; }
.hk-insekten       { --c1: var(--insekten-back-1);     --c2: var(--insekten-back-2);     --ct: #000; }
.hk-ornithologie   { --c1: var(--ornithologie-back-1); --c2: var(--ornithologie-back-2); --ct: #000; }
/* Wetter: la sfumatura va dal blu scuro al celeste; qui si usa la parte scura, con il testo bianco */
.hk-wetter         { --c1: var(--wetter-back-1);       --c2: var(--wetter-backh-2);      --ct: #fff; }

/* Entdecken: schede come quelle delle rubriche, con la spiegazione (Michele) */
.hk-who    { --c1: #c05fd4; --c2: #9321a1; --ct: #fff; }
.hk-inhalt { --c1: #33ffff; --c2: #00b8ff; --ct: #000; }
.hk-duden  { --c1: #a8a8a8; --c2: #5a5a5a; --ct: #fff; }
.hk-bild-hell { background: rgba(255, 255, 255, .85); text-align: center; height: 170px; padding: 8px; }
.hk-bild.hk-bild-hell img { display: inline-block; width: auto; height: 100%; max-width: 100%; object-fit: contain; vertical-align: middle; }
/* Who is Who: le due sagome; col mouse sulla scheda (il link la copre tutta) o col focus compaiono i peluche, in 1 s come prima */
.hk-wer { position: relative; display: inline-block; height: 100%; width: 42%; margin: 0 2%; vertical-align: middle; }
.hk-bild-hell .hk-wer img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
.hk-bild-hell .hk-wer .hk-wer-zeig { opacity: 0; }
.hk-who:hover .hk-wer-zeig, .hk-who.hk-fokus .hk-wer-zeig { opacity: 1; }
.hk-who:hover .hk-wer img:first-child, .hk-who.hk-fokus .hk-wer img:first-child { opacity: 0; }

/* Segnalibro (utenti collegati) */
.hk-lesezeichen {
	display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center;
	background: #fff8d6; border: 3px solid #ffd34d; border-radius: 16px; padding: 10px 16px; margin: 0 0 8px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12); font-size: 16px; line-height: 1.4;
}
.hk-lesezeichen img { margin-right: 12px; }
.hk-lesezeichen p { -webkit-flex: 1 1 260px; flex: 1 1 260px; margin: 4px 12px 4px 0; }
.hk-wo { color: #555; font-size: 14px; margin-left: 4px; }
.hk-weiterlesen {
	display: inline-block; padding: 8px 18px; border-radius: 22px; font-weight: 700; color: #fff; text-decoration: none;
	background: #8a1414; background: linear-gradient(#a81d1d, #6e0e0e);
}
.hk-weiterlesen:hover, .hk-weiterlesen:focus { color: #fff; text-decoration: underline; }

/* La home è la pagina principale: niente "Zurück zur Titelseite" nel footer (Michele) */
.hk-seite .divback { display: none; }

/* Über Gugellandia */
/* cornice di foglie (Michele: "lo trovo spento"), motivo in indexphotos/blaetter.svg */
.hk-ueber { margin-top: 24px; padding: 28px; border-radius: 28px; background: #5f9e3a url("indexphotos/blaetter.svg"); background-size: 44px 44px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.hk-ueber-innen { background: #fffdf3; border-radius: 14px; padding: 16px 24px; line-height: 1.65; font-size: 17px; box-shadow: inset 0 0 0 3px #ffd34d; }
.hk-ueber h2 { margin: 2px 0 8px; font-size: 24px; font-weight: 700; color: #2f5e1a; text-align: center; }
.hk-ueber p { margin: 0; }
@media (max-width: 600px) { .hk-ueber { padding: 18px; } .hk-ueber-innen { padding: 12px 14px; font-size: 16px; } }

/* Contatore e social: stesse regole di index_2.css */
.hk-social { max-width: 1180px; margin: 20px auto 0; padding: 0 16px; overflow: hidden; text-align: center; }
.hk-social .counter { float: left; margin-top: 10px; margin-left: 20%; width: 50%; }
.hk-social .social { float: left; width: 100%; }
.hk-social .instagramm {
	background: #d6249f; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.hk-social .instagramm img { margin-top: 15px; border-radius: 55px; padding: 20px; }
.hk-social .fb { display: block; position: relative; float: left; text-align: center; margin-top: 10px; margin-right: 5%; width: 45%; }
.hk-social .twitter { position: relative; float: left; margin-top: 10px; margin-left: 5%; width: 45%; text-align: center; }
.hk-social .twitter iframe, .hk-social .twitter > a { display: block; margin: 0 auto 12px; }

/* Larghezze */
@media (max-width: 900px) {
	.hk-karte, .hk-zufall .hk-karte { width: 48%; width: calc(50% - 18px); }
	.hk-folien { height: 380px; }
}
@media (max-width: 600px) {
	.hk-karte, .hk-zufall .hk-karte { width: 100%; width: calc(100% - 18px); }
	.hk-folien { height: 280px; }
	.hk-folie figcaption { font-size: 16px; padding: 30px 14px 62px; }
	.hk-kopf { -webkit-justify-content: center; justify-content: center; text-align: center; }
	.hk-gruss { margin: 6px 0; }
	.hk-titel { font-size: 20px; }
	.hk-social .counter { margin-left: 0; width: 100%; }
	.hk-social .fb, .hk-social .twitter { width: 100%; margin-left: 0; margin-right: 0; }
}
@media (min-width: 1200px) {
	.hk-social .fb { width: 95%; }
	.hk-social .twitter { width: 95%; }
}
/* Schermi grandi: colonna più larga, tre schede per riga ma più grandi (Michele: "A") */
@media (min-width: 1440px) {
	.hk-wrap, .hk-social { max-width: 1500px; }
	.hk-gruss { font-size: 20px; }
	.hk-ziffernblatt { width: 104px; height: 104px; }
	.hk-stunde { height: 25px; } .hk-minute { height: 35px; } .hk-sekunde { height: 38px; }
	.hk-uhr { font-size: 15px; }
	.hk-titel { font-size: 30px; padding: 10px 32px; }
	.hk-folien { height: 600px; }
	.hk-folie figcaption { font-size: 24px; }
	.hk-band { font-size: 17px; padding: 11px 16px; }
	.hk-neu { font-size: 14px; }
	.hk-bild img { height: 310px; }
	.hk-text h3 { font-size: 24px; }
	.hk-text p { font-size: 16px; }
	.hk-zufall .hk-bild img { height: 210px; }
	.hk-zufall .hk-text h3 { font-size: 20px; }
	.hk-text .hk-wann { font-size: 15px; }
	.hk-bild-hell { height: 220px; }
	.hk-lesezeichen { font-size: 18px; }
	.hk-ueber-innen { font-size: 19px; padding: 20px 30px; }
	.hk-ueber h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.hk-folie, .hk-karte { -webkit-transition: none; transition: none; }
	.hk-karte:hover { -webkit-transform: none; transform: none; }
}

/* ---- Capodanno: copia invariata di index_2.css (righe 83-215), serve solo dal 27/12 all'1/1 ---- */
#timeleft
{
	font-size: 20vw;
	font-family: "Courier ";
}
#bigbutton,#bigbutton2
{
    font-size: 6vw;
//	width:20vw;
	cursor: pointer;
    margin: 5px;
    padding: 5px;
    font-weight: bold;
    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;
    color: #ffffff;
	
    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) ;	
}

#bigbutton2
{
	position:absolute;
	font-size: 5vw;
	width:90vw;
	z-index:103;
}

#bigbutton:hover,#bigbutton2:hover,#STOP_feuer:hover
{
    background: #ff00c8  ;
    background: -webkit-linear-gradient( #ff00c8  , #0000cc ) ;
    background: -o-linear-gradient( #ff00c8  , #0000cc) ;
    background: -moz-linear-gradient( #ff00c8  , #0000cc) ;
    background: linear-gradient( #ff00c8  , #0000cc) ;		
}
.feurwerk
{
	background-color:black;
	z-index:100;
	position: fixed;
	top:0;
	left:0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
	display:none;
}

#STOP_feuer
{
	display:none;
	z-index:104;
	position:fixed;
    font-size: 4vw;
	cursor: pointer;
    margin: 5px;
    padding: 5px;
    font-weight: bold;
    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;
    color: #ffffff;
	
    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) ;		
}
#End_Bild
{
	display:none;
	position:fixed;
	z-index:101;
}
#End_Bild img
{
	width:100%;
}

#fireworksField
{
	z-index:102;	
}

#extra
{
/*	display:none;*/
	margin-top:10px;
	width:100%;
	float:left;
	position:relative;
}

#Titel
{
	position:relative;
	overflow:hidden;
}
#Hintergrund
{
/*	width:100%;*/
	position:relative;
	z-index:1;
}
#Osterntext
{
	overflow: hidden;
	width:100%;
	position:absolute;
	display:block;
	z-index:10;
}

.small_img
{
	width:50px;
}


/* il blocco stagionale della home nuova non galleggia (la regola #extra qui sopra lo farebbe) */
#extra.hk-saison { float: none; margin-top: 0; }