/* CSS Document */



/* ========= SEITE DARSTELLUNG ========= */

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

body, html {
		background:#e7c883;
	font-size:100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    width: 100%; /* Setzt die Breite */
    height: 100%; /* Vollständige Höhe */
}	




header  {
	display:block;
	background:#f8d893;
	text-align:center;
	position: relative;
	padding-right: 70px;
}

.lang-flag {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	max-height: 32px;
	width: auto;
}



/* Standardgröße */






/* Content Area */
#main  {
	display:block;
	width:100%;
	/*max-width:1000px;*/
	margin:1.25em auto;
	padding:0em;
}


#main article  {
	display:inline-block;
	width:45%;
	vertical-align:top;
	margin-bottom:0em;
	padding:0em 0em 0em 1em  ;
	text-align:center;
	/*border-radius: 15px;*/
}

#main my {
	display:inline-block;

	vertical-align:top;
	margin-bottom:0em;
	padding:0em 0em 0em 1em  ;
	text-align:center;
	/*border-radius: 15px;*/
}

#main muzyka {
	display:block;
	vertical-align:top;
	margin-bottom:0em;
	padding:0em 0em 0em 0em  ;
	text-align:center;
		margin-left: auto;
    margin-right: auto;
	/*border-radius: 15px;*/
}


#main article section  {
	background:#e7c883;
	margin-bottom:0.5em;
	height:auto;
	padding: 0em 0em 0em 0em;
/*	border-radius: 15px;
	border-bottom: 0.25em solid #A50000;*/
}




#article {
	display:block; 
	width:95%;
	/*max-width:600px;*/
	margin-left: auto;
    margin-right: auto;

}


#main einblock article  {
	/*background:#f8d893;*/ 
	
	display:block; 
	width:95%;
	max-width:750px;
	margin-left: auto;
    margin-right: auto;
	
}


#main vollblock article  {
	display:block; 
	width:99%;
	/*	max-width:1000px;*/
	/*max-width:500px;*/
section
    margin-right: auto;
	border:none;
	
}

#main section footer  {

		width:100%;
}


#main aside {
	display:inline-block;
	width:45%;
/*	margin-left:3%;*/
	margin-bottom:1em;
	padding-left:0em;
	vertical-align:top;
	
}

#main aside section {
	background:#e7c883;
	margin-bottom:0.5em;
	padding: 0em 0em 0em 0em;
/*	border-radius: 15px;
	border-bottom: 0.25em solid #A50000;*/
}





.onas {
	background-color:#f8d893;
	background-repeat:no-repeat;
	background-size: contain; 
	background-position:left bottom; 
	width:100%;
	margin-left:-20px;
	}

.band {
	background-image:url(../img/tlo-band.png);
	background-size: auto; 
	height:auto;
	color:#f8d893;
}

.klaudek {
	background-image:url(../img/tlo-klaudek.png);
	height:370px;
}

.mariola {
	background-image:url(../img/tlo-mariola.png);
	height:360px;
}

.krzysiek {
	background-image:url(../img/tlo-krzysiek.png);
	height:370px;
}

.kati {
	background-image:url(../img/tlo-kaddy.png);
	height:360px;
}

.szerokie {
	display:inherit;
}

.waskie {
	display:none;
}












/* ========= NAVIGATION ========= */

/* On Top Bar */
/*#menubar {
	display:block;
	width:100%;
	height:3em;
	background:#f8d893;	
}*/

#menubar ul {
	display:block;
	width:2em;
	padding:0em 0em 0em 1em;	
}

#menubar ul li {
	display:inline;
}

#menubar ul li a.menubutton {
	display:none;
}


nav {
    display: none;
    background: #651e0b;
    position: relative;
    width: 100%;
    margin: 0;
	text-align:center;
	box-sizing: border-box; 
	verflow-x: hidden;
}

/*	display: none;
	height:2.5em;
	text-align:center;	
	margin-left:-25px*/

nav.open {
    display: block; /* Menü anzeigen, wenn geöffnet */
}

nav ul  {
	display:block;
}

nav ul li {
	font-style:normal;
	display:inline;
	margin:0em 0.06em 0em 0.06em;
	text-align:center; /* Menutext zentriert - Mobil */
}


nav ul li a {
	font-family: 'Open Sans', sans-serif;
	font-weight:700;
	color:#f8d893;
	font-size:1.4em;
	line-height:2.5em;
	padding:0.563em 0.9em 0.375em 0em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}


nav ul li a:hover {
	font-family: 'Open Sans', sans-serif;
	font-weight:700;
	color:#ff0000;
/*	border-bottom:0.188em solid #A50000;*/

}

nav ul li a.active {
	font-family: 'Open Sans', sans-serif;
	font-weight:700;
	color:#A50000;
	font-size:1.4em;
	line-height:2.5em;
	padding:0.563em 0.9em 0.375em 0em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}



h1 {
	font-size:1.6em;
	line-height:1.5em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	text-align: left;
}	

h3 {
	font-size:1em;
/*	line-height:1.5em;*/
	font-family: 'Open Sans', sans-serif;
	font-style:normal;
	text-align: left;
	margin:10px 0px 0px 0px;
}


a {
	text-decoration: none;
}



li {
	list-style:square;
	color: #000000;
	line-height:1.25em;
	padding:0em;
	text-align:left;	
	margin: -0.3em 0em 0.313em 0.5em;
}


kopf ul li { 
	display:none;
}


p {
	font-size:0.8em;
	line-height:1.3em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	color: #000000;
	margin:0em;
	padding:1.2em 1.25em 1em 1.25em;
	text-align:justify;	
	}


impressum p {
	font-size:0.8em;
	line-height:1.3em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	color: #000000;
	margin:0em;
	padding:1.2em 0em 1em 0em;
	text-align:justify;	
	}
	
o-nas p {
	font-family: 'Open Sans', sans-serif;
	font-size:0.95em;
	line-height:1.4em;
	font-weight: 600;
	text-align:justify;	
	margin:0em;
	padding:1.2em 1.25em 1em 1.25em;	
	}	
	

ul {
	font-size:0.8em;
	line-height:1.3em;
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	font-weight: 600;
	margin:0em;
}

.player-txt-titel {
font-family: 'Open Sans', sans-serif;	
padding: 8px 0px 0px 0px;
font-size: 1.1em;
font-weight: bold;
margin-top: 0px;

}

.player-txt {
font-family: 'Open Sans', sans-serif;
padding: 0px 0px 0px 0px;
font-size: 0.75em;
line-height:1.2em;
word-spacing:2px;
margin-top: 0px;
margin-bottom: 5px;
}

.player-txt-klein {
font-family: 'Open Sans', sans-serif;
padding: 0px 0px 0px 0px;
font-size: 0.65em;
line-height:1.2em;
word-spacing:2px;
margin-top: 0px;
margin-bottom: 5px;
}

.adres {
font-family: 'Open Sans', sans-serif;
font-size: 1em;
line-height:1.4em;
list-style:none;
}


<!--   Seitenteilung     -->



footer ul {
	display:block;
	
	max-width:980px;
	margin-left:-30px;
	
}

footer ul li {
	font-family: 'Open Sans', sans-serif;
	font-style:normal;
	display:inline;
	font-size:0.8em;
	line-height:2.8em;
	color:#e2dbdb;
	margin-right:10px;
	
}

footer ul li a {
	color:#e2dbdb;
}

.verticalcenter {
	width: 29px;
    height: 29px;
    position: absolute;
    
    margin-left: 10px;
    margin-top: 2px;
}


footer  {
	font-size:1.15em;
	display:block;
	font-weight: 600;
	background:#651e0b;
	text-align:center;
	height:35px;
	
}





/* ========= BILDER ========= */

img {
	height: auto;
	max-width: 100%;
	}


IMG.logo {
	margin:0px 0px -4px 10px;
	}




.tabelleimg {   
	font-family: 'Open Sans', sans-serif;
/*	border: 0px solid; 
	border-color:#aaaaaa #666666 #666666 #aaaaaa; */
	margin-left: auto;
    margin-right: auto;
	margin-top:-10px;
	margin-bottom:-10px;
	vertical-align: top; 
	text-align:center;
	max-width: 1000px;
	}

.eImage {  
	/*float:center;*/
	max-width:400px; 
	height:auto;
	margin: 5px 5px 5px 5px ;
	border:1px solid; 
	border-color:#FFFFFF;
}



/* 		EFFEKTE     */




.zoom:hover {
-webkit-transform:scale(1.05);
transform:scale(1.05);
border-radius:5%;
box-shadow: 6px 10px 6px -6px grey;
}
.zoom {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}



IMG.foto-my { 
	float: right;
    display: block;
    
	margin:3px 0px 5px 15px;
	max-height: 180px;
		}




/*    LINKI      */


#main einblock linki article   {
	background:#f8d893;
    /*margin: 0 auto;*/
	display:block;
    max-width: 75%;
	padding:1em 0em 1em 0em  ;	
/*	display: -webkit-flex;
	display: flex;*/
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

#main einblock linki article section div  {
	display:inline-block;
	/*width:11em;*/
	vertical-align:top;
	margin:0.5em 0em 0em 1em ;
	max-width: 11em;
	height: 155px;
	border: #FFF solid 1px;
}

#main einblock linki article section .tytul  {

	font-size:0.8em;
	line-height:1.2em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	color: #000000;
	text-align:center;
	margin-top:-15px;

}







/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
		/* Mobile Style */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media screen and (max-width:1024px) {

#main article  {
	padding:0em 0em 0em 0.1em  ;
}

#main my {
	padding:0em 0em 0em 0em  ;

}

.tabelleimg {
	max-width: 100%;
	margin-top:-5px;
	margin-bottom:10px;	
		margin-left: auto;
    margin-right: auto;
	display:block;
	}		
	
.eImage { 
	max-width:385px; 
	margin: 0px 0px 0px 0px ;
}	

.onas {
	margin-left:0px;
	}
	
.klaudek {
	background-image:url(../img/tlo-klaudek.png);
	height:380px;
}

.mariola {
	background-image:url(../img/tlo-mariola.png);
	height:360px;
}

.krzysiek {
	background-image:url(../img/tlo-krzysiek.png);
	height:380px;
}

.kati {
	background-image:url(../img/tlo-kaddy.png);
	height:360px;
}

.szerokie {
	display:inherit;
}

.waskie {
	display:none;
}


}



@media screen and (max-width:890px) {



.tabelleimg {
	max-width: 100%;
	margin-top:-5px;
	margin-bottom:10px;	
		margin-left: auto;
    margin-right: auto;
	display:block;
	}		
	
.eImage { 
	max-width:300px;
	margin: 0px 0px 0px 0px ; 
}

.onas {
	margin-left:0px;
	}
	
.klaudek {
	background-image:url(../img/tlo-klaudek.png);
	height:390px;
}

.mariola {
	background-image:url(../img/tlo-mariola.png);
	height:360px;
}

.krzysiek {
	background-image:url(../img/tlo-krzysiek.png);
	height:390px;
}

.kati {
	background-image:url(../img/tlo-kaddy.png);
	height:360px;
}
	
.szerokie {
	display:inherit;
}

.waskie {
	display:none;
}


	
}



@media screen and (max-width:800px) {
	body {
		font-size:100%;
	}


#main article  {
	padding:0em 0em 0em -1.4em  ;
}


#main my {
	padding:0em 0em 0em 0em  ;

}

	
.tabelleimg {
	max-width: 100%;
	margin-top:-5px;
	margin-bottom:10px;	
		margin-left: auto;
    margin-right: auto;
	display:block;
	}		
	
.eImage { 
	max-width:270px;
	margin: 0px 0px 0px 0px ; 
}	
	
	
.klaudek {
	background-image:url(../img/tlo-klaudek.png);
	height:410px;
}

.mariola {
	background-image:url(../img/tlo-mariola.png);
	height:360px;
}

.krzysiek {
	background-image:url(../img/tlo-krzysiek.png);
	height:410px;
}

.kati {
	background-image:url(../img/tlo-kaddy.png);
	height:360px;
}	
	
.szerokie {
	display:inherit;
}

.waskie {
	display:none;
}

o-nas p {
	font-size:0.85em;
	line-height:1.5em;
	font-weight: 600;
	}	

	
}

@media screen and (max-width:720px) {

#main aside, #main article  {
	width:96%;
	display:block;
	margin:0.625em 1em 0.625em 0em;
	}
		#main muzyka aside, #main muzyka article{
	display:inline-block;
	width:45%;
	margin-bottom:1em;
	padding-left:0em;
	vertical-align:top;
}

#main my {
	padding:0em 0em 0em 1.4em  ;

}


#main einblock linki article   {
    max-width: 95%;
}
		
.tabelleimg {
	max-width: 100%;
	margin-top:-5px;
	margin-bottom:10px;	
	margin-left: auto;
    margin-right: auto;
	display:block;
}
.eImage { 
	max-width:250px; 
	margin: 0px 0px 0px 0px ; 
}	

.onas {
	margin-left:0px;
	}


.klaudek {
	background-image:url(../img/tlo-klaudek.png);
	height:440px;
}

.mariola {
	background-image:url(../img/tlo-mariola.png);
	height:370px;
}

.krzysiek {
	background-image:url(../img/tlo-krzysiek.png);
	height:380px;
}

.kati {
	background-image:url(../img/tlo-kaddy.png);
	height:420px;
}

.szerokie {
	display:none;
}

.waskie {
	display:inherit;
}


}


@media screen and (max-width:650px) {

	#main muzyka aside, #main muzyka article{
	display:inline-block;
	width:45%;
	margin-bottom:1em;
	padding-left:0em;
	vertical-align:top;
}


#main my {
	padding:0em 0em 0em 1.1em  ;

}


.tabelleimg {
	max-width: 100%;
	margin-top:-5px;
	margin-bottom:10px;	
	margin-left: auto;
    margin-right: auto;
	display:block;
}
.eImage { 
	max-width:275px; 
}	


.klaudek {
	background-image:url(../img/tlo-klaudek.png);
	height:410px;
}

.mariola {
	background-image:url(../img/tlo-mariola.png);
	height:340px;
}

.krzysiek {
	background-image:url(../img/tlo-krzysiek.png);
	height:410px;
}

.kati {
	background-image:url(../img/tlo-kaddy.png);
	height:400px;
}


.szerokie {
	display:none;
}

.waskie {
	display:inherit;
}

o-nas p {
	font-size:0.85em;
	line-height:1.4em;
	font-weight: 600;
	}
.handy {
		padding: 5px 0px 0px 0px; 
		/*margin: 0px 0px 0px 5px; */
		width:105%;
		
		}


}



@media screen and (max-width:600px) {
	body {
		font-size:93%;
		}

#main muzyka aside, #main muzyka article{
	display:inline-block;
	width:96%;
	margin-bottom:1em;
	padding-left:0em;
	vertical-align:top;
}

#main my {
	padding:0em 0em 0em 1.1em  ;

}
	
.tabelleimg {
	max-width: 96%;
	margin-top:-5px;
	margin-bottom:10px;	
	margin-left: auto;
    margin-right: auto;
	display:block;
}

.eImage { 
	max-width:240px; 
}		
		

.onas {
	margin-left:0px;
	}

.klaudek {
	background-image:url(../img/tlo-klaudek.png);
	height:390px;
}

.mariola {
	background-image:url(../img/tlo-mariola.png);
	height:350px;
}

.krzysiek {
	background-image:url(../img/tlo-krzysiek.png);
	height:370px;
}

.kati {
	background-image:url(../img/tlo-kaddy.png);
	height:380px;
}

.szerokie {
	display:none;
}

.waskie {
	display:inherit;
}

o-nas p {
	font-size:0.9em;
	line-height:1.4em;
	font-weight: 600;
	}




}





@media screen and (min-width:550px) {

}



@media screen and (max-width:560px) {

body {
	font-size:90%;
	}	

#main muzyka aside, #main muzyka article{
	display:inline-block;
	width:96%;
	margin-bottom:1em;
	padding-left:0em;
	vertical-align:top;
}
		
#main aside, #main article  {
	width:96%;
	display:block;
	margin:0.625em 3% 0.625em 0em;
	}
	
#main my {
	padding:0em 0em 0em 0.9em  ;

}


.tabelleimg {
	max-width: 95%;
	margin-top:-5px;
	margin-bottom:10px;	
	margin-left: auto;
    margin-right: auto;
	display:block;
}

.eImage { 
	max-width:95%; 
	margin: 0px 0px 0px 15px ;
}		

.onas {
	margin-left:0px;
	}

		
kopf ul li { 
	display:block;
	font-size:1.8em;
	line-height:0.5em;
	font-family: 'Open Sans', sans-serif;
	font-weight:800;
	color: #999;
	margin:0em;
	padding:0em 0em 0.7em 0em;
	text-align:center;	
}	

.klaudek {
	background-image:url(../img/tlo-klaudek.png);
	height:345px;
}

.mariola {
	background-image:url(../img/tlo-mariola.png);
	height:290px;
}

.krzysiek {
	background-image:url(../img/tlo-krzysiek.png);
	height:350px;
}

.kati {
	background-image:url(../img/tlo-kaddy.png);
	height:340px;
}

.szerokie {
	display:none;
}

.waskie {
	display:inherit;
}

o-nas p {
	font-size:0.9em;
	line-height:1.4em;
	font-weight: 600;
	}


}


/* Für Bildschirme ≤ 427px */
@media screen and (max-width: 427px) {
	


	
    /* Menü wird vertikal angezeigt */
    nav {
        display: none; /* Standardmäßig ausgeblendet */
        position: relative; /* Innerhalb des Dokumentenflusses */
        width: 100%; /* Volle Breite */
        background: #651e0b;
        margin: 0; /* Kein zusätzlicher Abstand */
    }

    nav.open {
        display: block; /* Menü anzeigen, wenn geöffnet */
        padding: 1em; /* Abstand innerhalb des Menüs */
    }

    nav ul {
        margin: 0;
        padding: 0;
    }

    nav ul li {
        display: block;
        margin: 0;
        padding: 0.3em 0.5em;
        border-bottom: 1px solid #ccc;
    }

    nav ul li:last-child {
        border-bottom: none;
    }

    nav.open + main {
        margin-top: 3em;
    }

    /* Optional: Inhalte verschieben */
    main {
        margin-top: 1em; /* Platz unter dem Menü */
    }
}


/* Für Bildschirme ≥ 428px */
@media screen and (min-width: 428px) {
   nav {
        display: block;
    }

    nav.open {
        display: block;
    }

    nav ul li {
        display: inline; /* Waagerechte Anordnung */
        margin: 0em 0.06em; /* Horizontaler Abstand */
    }

    nav ul li:last-child {
        border-bottom: none; /* Keine Trennlinie */
    }
}



#title-bubble {
    position: absolute; /* Dynamische Positionierung */
    top: 50px; /* Standard, wird durch JavaScript überschrieben */
    left: 0; /* Standard, wird durch JavaScript überschrieben */
    display: none; /* Nur sichtbar, wenn aktiv */
    background: #fff; /* Hintergrundfarbe der Bubble */
    color: #000; /* Schriftfarbe */
    padding: 5px 10px; /* Innenabstand */
    border: 2px solid red; /* 2px schwarze Umrandung */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für 3D-Effekt */
    white-space: nowrap; /* Kein Zeilenumbruch */
    font-size: 14px; /* Schriftgröße */
    font-family: Arial, sans-serif; /* Schriftart */
}