html {
    /*
    scroll-behavior: smooth;
    word-wrap:break-word;
    background-color:#FFFFFF;
    */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    scroll-behavior: smooth;
    word-wrap:break-word;
    margin:0;
	padding:0;
    font-size: 1.1rem;
	line-height: 160%;
	color:#333333;
    background-color:#FFFFFF;
	z-index:0;
    font-family: 'Open Sans' , arial;
    font-family: 'Armata', arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.dunkel{background-color:#29586f;}


div {
	text-align:left;
	vertical-align:top;
    Xborder:1px dashed #888888;   /*Innerer Rand, nur zum Testen aktivieren*/
    Xbox-sizing:border-box;

}

h1 {
	font-size:2.1rem;
	line-height:160%;
	text-align:center;
	font-weight:400;
	margin-top:10px;
	margin-bottom:0;
    padding-bottom:5px;
    color:#f5ed0f;
    font-family: 'Merienda', cursive;

}
h2 {
	font-size:1.5rem;
	line-height:160%;
	text-align:center;
	font-weight:400;
    margin-top:20px;
	margin-bottom:0;
    padding-bottom:5px;
}
h3 {
	font-size:1.3rem;
	line-height:160%;
	text-align:center;
	font-weight:400;
	margin-top:0;
    xbackground-color:#29586f;
    xcolor:#FFFFFF;
    margin-top:20px;
	margin-bottom:0;
    padding-bottom:5px;
}



h4 {
	font-size:1.1rem;
	line-height:160%;
	text-align:left;
	font-weight:400;
	margin-top:20px;
	margin-bottom:0;
    padding-bottom:5px;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    Xheight: 150px;
    z-index: 2;
    text-align:center;
    vertical-align:middle;
    overflow:hidden;
    margin: 0;
    padding: 0;
    background-image: url('images/hg.jpg');
    background-size: cover;        /* skaliert das Bild proportional */
    background-position: center;   /* zentriert das Bild */
    background-repeat: no-repeat;  /* verhindert Kacheln */
    background-attachment: fixed;  /* optional: Parallax-Effekt */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

#haupt {
    position:relative;
    top:150px;
    max-width:100%;

	margin:auto;
	text-align:center;
	padding:0;
	margin-top:0;
    background-color:#f5ed0f;
    background-color:#FFFFFF;
    color:#000000;
}

#footer{
    margin-top:20px;
    text-align: center;
    background-color:#a4663f;
    vertical-align:middle;
    padding:10px;
}



#logo { float:left; margin-left:20px; margin-top:20px;}
#logodiv{ display:none; }
#knopf{ border:0; margin-right:30px; margin-top:20px;}


.gross {
    width: 50%;
    Xtransition: width 0.3s ease;
}
.gross.wide {
    width: 100%;
}



#navidiv{
    text-align:center;
    background-color:#FFFFFF;
    line-height:180%;
    padding:10px;
    width:90%;
    margin:auto;
    Xbox-sizing:border-box;
}
#navimobil{display:none; position:sticky; top:0; z-index:6; }
#openmobil{display:none; background-color:#FFFFFF; margin-top:10px;}
#navidesk{
    text-align:center;
    line-height:180%;
    padding:10px;
    width:90%;
    margin:auto;
    box-sizing:border-box;
    background-color:#FFFFFF;

}




.lesen{ max-width:1000px; margin:auto; xpadding-top:10px; xborder:1px dashed #555555;}
.breit{width:100%; xmargin:auto; margin-bottom:0; xborder:1px dashed #555555;}



.startseitenbild{ width:50%; float:right; margin-left:20px; margin-bottom:10px; cursor: pointer;}
.startseitenbildrechts{ width:50%; float:left; margin-right:20px; margin-bottom:10px; cursor: pointer;}

#links  {text-align:center; float:left; box-sizing:border-box; vertical-align: middle;  width:40%; text-align:center; padding:10px; xborder:1px dashed #888888;}
#rechts {text-align:left; box-sizing:border-box; padding:10px; margin-left:42%; xborder:1px dashed #888888;}
#ben { width:350px; max-width:100%; }

#maps{ width:250px; height:150px; }

#downloadenlink,#downloadentext{display:none;}

.xrundebox{
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    line-height:500px;
    text-align:center;
    background:#428af5
}
.rundebox{
    text-align:center;
    font-size:0.8rem;
    line-height:1.6rem;
    font-weight:800;
    height:1.6rem;
    width:1.6rem;
    background-color:#DDDDDD;
    color:black;
    border-radius:50%;
    border:4px solid #BBBBBB;
    float:left;
    margin-right:1.0rem;
}


img{border:0;}



/*Cookiebuttons*/
#cookiediv{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity:1;
    z-index:1;
    margin:auto;
    width:500px;
    max-width:90%;
}
#cookieinfo{
    background-color:#FFFFFF;
    color:black;
    border:2px solid #000000;
    padding:10px;
    text-align:center;
}

/*Für Cookies*/
.ablehnen {background-color:#FFFFFF; color:black; padding-left:20px; padding-right:20px;}
.erlauben {background-color:green; color:#FFFFFF; padding-left:20px; padding-right:20px;}


textarea,input,select {
	padding:5px;
	border:2px solid #CCCCCC;
	background-color:#EEEEEE;
	color:green;
	font-size: 1.2rem;
	margin-bottom:10px;
    max-width:90%;
}
input[type=submit] {
	font-size: 90%;
	background-color : green;
	color : #FFFFFF;
	border-bottom : solid #888888;
	border-right: solid #888888;
	border-top: solid #AAAAAA;
	border-left: solid #AAAAAA;
	font-weight : bolder;
	padding:3px;
	border-radius:5px;
}
input[type=file] { max-width:90%; font-size: 0.9rem;   }



.rund {
	-moz-border-radius:8px; /* Safari, Chrome - alte Syntax */
	-webkit-border-radius:8px;
 	border-radius:8px; /* alle neuen Browser, W3C Standard */
}


.hellaufdunkel{background-color:#29586f; color:#FFFFFF;}



.blue {color:blue;}
.green {color:green;}
.red {color:red;}
.orange{color:orange;}
.black{color:black;}
.gold{ color:#FFD700; }
.weiss{ color:#FFFFFF; }

.bgreen {background-color:green;}
.bred	{background-color:red;}

.schatten { box-shadow: 7px 7px 7px 0px #999999; }




.vorschauseite { max-width:1200px; margin:auto; xpadding:3%; padding-top:10px; xborder:1px dashed #555555; }
.vorschaubild { max-width:100%; margin:auto; border-radius:10px;}
.vorschaulinks  {text-align:center; float:left; box-sizing:border-box; vertical-align: middle;  width:40%; text-align:center; padding:10px; xborder:1px dashed #888888;}
.vorschaurechts {text-align:left; box-sizing:border-box; padding:10px; margin-left:42%; xborder:1px dashed #888888;}
.vorschaudiv{ background-color:#ccff99; color:#000000; border-radius:15px; padding-bottom:10px; margin-bottom:10px; box-sizing:border-box; border:1px solid green;}

.galeriebild{ width:48%; margin:1%;}


/* ########### Start Slideshow */
#slideshow {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    Xmax-width: 600px;
    xheight: 100vh;
    max-height: 100vh;
    background: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    overflow: hidden;
    z-index: 99;
    color:#FFFFFF;
    display:none;
}

/* 🔹 Der Löschcontainer, unabhängig von #slideshow */
.deletecontainer {
    position: fixed; /* Feststehend, unabhängig von Slideshow */
    bottom: 20px;  /* top: für Oben20px */
    left: 50%; /* Horizontale Zentrierung */
    transform: translateX(-50%); /* Genau mittig zentrieren */
    z-index: 100; /* Immer über anderen Elementen */
    background:black;
    padding: 10px 20px; /* Platz für die Buttons */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Buttons verteilen */
    gap: 20px; /* Abstand zwischen Buttons */
}

/* 🔹 Der Lösch-Button von Slideshow*/
/*.delete-button {
    width: 40px;
    height: 40px;
    background: red;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-button:hover {
    background: darkred;
}

.nav-button {
    width: 50px;
    height: 40px;
    background: blue;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
}

.nav-button:hover {
    background: darkblue;
}


.bildimdiv {
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
    display: block;
}
*/


#slideshow {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    max-height: 100vh;
    background: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    overflow: hidden;
    z-index: 99;
    color: #FFFFFF;
    display: none;
}

/* 🔹 Der Löschcontainer */
.deletecontainer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: black;
    padding: 10px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* 🔹 Schließen-Button */
.delete-button {
    width: 40px;
    height: 40px;
    background: red;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-button:hover {
    background: darkred;
}

/* 🔹 Navigation */
.nav-button {
    width: 50px;
    height: 40px;
    background: blue;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
}

.nav-button:hover {
    background: darkblue;
}

/* 🔹 Bild */
.bildimdiv {
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
    display: block;
    transition: opacity 0.25s ease;
}

/* 🔹 Fade-Effekte */
.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}













.frage{
    background-color:#29586f;
    color:#FFD700;
    padding:20px;
    margin-top:2px;
    cursor:pointer;
    border:solid 1px #29586f;
}
.antwort{
    display:none;
    padding:20px;
    margin-bottom:20px;
    border:solid 1px #29586f;
}










@media (max-width: 800px)
{
    body { font-size: 0.7rem; }

    h1 {font-size:1.1rem;}
    h2 {font-size:1.0rem}
    h3 {font-size:0.9rem}
    h4 {font-size:0.8rem}


    #header{font-size:0.9rem; }

    #logodiv{ display:block; }

    #links{ width:100%; font-size:0.9rem; line-height:1.2rem; margin-bottom:10px; clear:both; }
    #rechts{ margin-left:0; font-size:0.9rem; line-height:1.2rem; padding:5px;}

    .vorschaulinks{ width:100%; font-size:0.9rem; line-height:1.2rem; margin-bottom:10px; clear:both; }
    .vorschaurechts{ margin-left:0; font-size:0.9rem; margin-left:0; line-height:1.2rem; padding:10px;}

    #navimobil{display:inherit;}
    #navidesk{display:none;}

    a.navilink{display:block;}

    #header{font-size:0.9rem; }
    .lesen{ max-width:100%; padding:2%;}

    .galeriebild{ width:100%; margin:0;}
}

@media (max-width: 630px)
{
    .startseitenbild{ width:100%; clear:both; }
    .startseitenbildrechts{ width:100%; clear:both; }
}





.em90 {font-size:0.9rem; line-height:1.4rem;}
.em80 {font-size:0.8rem; line-height:1.3rem;}
.em70 {font-size:0.7rem; line-height:1.1rem;}
.em60 {font-size:0.6rem; line-height:0.9rem;}


.fehler  {
	/*Schrift für Fehlermeldungen*/
    background-color:red;
    font-size:0.9rem;
	color:#FFFFFF;
    padding:0.3rem;
}
.meldung  { 				/*Schrift für Meldungen*/
	background-color:green;
    font-size:0.9rem;
	color:#FFFFFF;
    padding:10px;
}


/*normale Links*/
a					{text-decoration: none; color:blue; padding: 3px; border-radius: 3px; line-height:130%;}
a:hover 			{color:#FFFFFF; background-color: black; }
a:focus 			{color:#FFFFFF; background-color: black; }

XXXa.XXXnavilink	{ font-size:1.0rem; padding:5px; margin:1px; background-color:green; color:#FFFFFF; margin-right:1%;}


nav a.active {
    color: red;
    font-weight: bold;
    border-bottom:2px solid red;
    border-left:2px solid red;
}

a.navilink	{
    border-bottom:2px solid green;
    border-left:2px solid green;
    border-radius:0;
    font-size:1.0rem;
    padding:5px;
    margin:1px;
    color: green;
    Xfont-weight: bold;
    margin-right:1%;
}
a.navilink:hover    {border-bottom:2px solid red; border-left:2px solid red;color:#FFFFFF; background-color: red;}

a.bilderlink:link {padding:0.0%;}
a.bilderlink:visited {padding:0.0%;}
a.bilderlink:hover {padding:0.0%; background-color:transparent; }
a.bilderlink:focus {padding:0.0%; background-color:transparent; }

a.fremdlink:link 		{padding:0; text-decoration:none; color:#000000; background-color:transparent;}
a.fremdlink:hover 		{padding:0; text-decoration:none; color:#000000; background-color:transparent;}
a.fremdlink:visited 	{padding:0; text-decoration:none; color:#000000; background-color:transparent;}
a.fremdlink:focus 		{padding:0; text-decoration:none; color:#000000; background-color:transparent;}

a.akademie				{font-size:0.9rem; padding:5px; margin-right:5px; color:#FFFFFF; background-color:black; }
a.akademie:hover		{font-size:0.9rem; padding:5px; margin-right:5px; color:#FFFFFF; background-color:red; }

a.trans:link			{
	color: #000000;
	background-color: transparent;
	text-decoration: none;
	margin:0;
	padding:0;
}
a.trans:hover			{
	color: #000000;
	background-color: transparent;
	text-decoration: none;
	margin:0;
	padding:0;
}
a.trans:focus			{
	color: #000000;
	background-color: transparent;
	text-decoration: none;
	margin:0;
	padding:0;
}
a.trans:visited			{
	color: #000000;
	background-color: transparent;
	text-decoration: none;
	margin:0;
	padding:0;
}