/*neu Hell e8eef2    */
html {
    /*
    scroll-behavior: smooth;
    word-wrap:break-word;
    background-color:#FFFFFF;
    */

}

body {
    scroll-behavior: smooth;
    word-wrap:break-word;
    margin:0;
	padding:0;
    font-size: 1.4rem;
	line-height: 2.2rem;
	color:#333333;
    background-color:#FFFFFF;
	Xz-index:0;
    xfont-family: 'Courgette' , arial;  /* schräg*/
    xfont-family: arial;
    Xfont-family: arial,sans-serif;
    font-family: work sans;

}

.dunkel{background-color:#990000;}

.weinrot{background-color:#ccffcc; }

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

}

h1 {
	font-size:1.5rem;
	line-height:160%;
	text-align:center;
	font-weight:600;
	margin-top:1.0rem;
	margin-bottom:0.5rem;
    Xcolor:#EEEEEE;


}
h2 {
	font-size:1.2em;
	line-height:160%;
	text-align:left;
	font-weight:400;
    margin-top:0.5em;
	margin-bottom:0.5em;

}
h3 {
	font-size:1.1em;
	line-height:160%;
	text-align:left;
	font-weight:400;
	margin-bottom:1em;
    margin-top:1em;
}
h4 {
	font-size:1.0em;
	line-height:160%;
	text-align:left;
	font-weight:400;
	margin-bottom:1em;
    margin-top:1em;
}


.h2extra{text-align:left; font-size:1.3rem; font-weight:600; }

#header{
    background-color:#0e2c40;
    text-align:center;
    padding:5px;
    position:fixed;
    top:0;
    left: 0;
    z-index:9;
    width:100%;
    height: 60px;    /* Höhe des fixierten Divs */
    Xclear:both;
    Xmargin:auto;
}

#scrollend {
    clear:both;
    padding-top:0;
    margin-top: 60px;
    Xwidth:100%;
    Xmargin:auto;
}

#haupt {
    Xwidth:100vw;
    Xmax-width:100%;
	text-align:center;
	padding:0px;
    margin-top:0;
    padding-bottom:50px;
    background-color:#FFFFFF;
    Xmin-width: 16em; /* Mindestbreite (der Überschrift) verhindert Anzeigefehler in modernen Browsern */
}


form { padding:10px; xpadding-bottom:40px; background-color:#EEEEEE; }

form.anfrage input,form.anfrage textarea  {
    padding: 3px;
    border: 1px solid #ccc;
    font-size: 1.0rem;
    margin-bottom:5px;
    width:100%;
    border-radius:5px;
    margin-bottom:5px;
}


.katdiv{
    padding:10px;
    font-family:Courgette,arial;
    font-size:130%;
    color:#FFFFFF;
    text-align:center;
    height:30px;
    vertical-align:middle;
    width:40%;
    height:100px;
    float:left;
}


.breit{width:100%; margin:auto; margin-bottom:0; xborder:1px dashed #555555;}


.anbieter{ font-weight: 600; margin-bottom:0; padding-bottom:0; }

.hid{ display:none; }



.headline{ font-size:130%; font-weight:600; Xpadding-left:5px; margin:0; }

.listendiv{text-align:center; padding:5%; padding-bottom:10px; padding-top:10px; overflow:hidden;}

.galeriebild{ max-width:100%; margin:auto; xborder:3px solid silver; overflow:hidden;}

.galeriebilddiv{ position:relative; width:400px; max-width:100%; margin:3px; background-color:#EEEEEE; padding:5px; font-size:0.9em; line-height:1.2em; border:1px solid silver; color:#333333; flex:auto; overflow:hidden; }

.textbild { float:left; margin-right:10px; margin-bottom:5px; width:200px; }

#steuerung{
    display:none; overflow:hidden; text-align:left; background-color:#EEEEEE;
    color:black; border:2px solid #000000;  text-align:center;
    margin:auto; width:400px; max-width:90%; height:auto; position:fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); opacity:1; z-index:8;
 }

.sprache{
    display:none; overflow:hidden; text-align:center; background-color:#FFFFFF;
    color:black; padding:30px; text-align:center; border:2px solid black;
    margin:auto; width:130px; max-width:90%; height:200px; position:fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); opacity:1; z-index:9;
}

.noclick{ pointer-events: none; }



/*Bilderupload*/
#drop-area {
    width:200px;
    max-width: 40%;
    height: 100px;
    border: 2px dashed #007BFF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Arial, sans-serif;
    margin: 20px auto;
    padding: 20px;
    cursor: pointer;
}
#drop-area.highlight {
    background-color: #f0f8ff;
}
#preview {
    margin-top: 10px;
    max-width: 50%;
    display: none;
}
#message {
    text-align:center;
    margin-top: 10px;
    font-weight: bold;
    color: green;
}
#file-input {
    display: none;
}

/*Bilderupload ENDE*/


.reiter{ background-color:#FFFFFF; color:#0e2c40; padding:5px; border-radius: 10px 10px 0 0; font-weight:600; }


#hide{ display:none; }

#sichtbar{ cursor: pointer; background: green; color:#FFFFFF; border:2px solid #AAAAAA; border-radius:5px; padding:3px;}



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;


}
.ablehnen {background-color:#FFFFFF; color:black; padding-left:20px; padding-right:20px;}
.erlauben {background-color:green; color:#FFFFFF; padding-left:20px; padding-right:20px;}


table{ background-color:silver; color:#FFFFFF; padding:1px; border-collapse: separate; border-spacing:1px;}
tr{ background-color:green; }
td { padding:5px; text-align:left; vertical-align:top; }
th { padding:5px; font-weight:400; }



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

.hellaufdunkel{background-color:#0e2c40; color:#EEEEEE;}


.blue {color:blue;}
.green {color:green;}
.red {color:red;}
.orange{color:orange;}
.black{color:black;}

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

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

.katergoriediv{ xpadding:10px;}



/* ########### 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: 10;
    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: 999; /* 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;
}

/* 🔹 Bild innerhalb des Slideshow-Containers */
.bildimdiv {
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
    display: block;
}
/* ########### Ende Slideshow */

/*Hauptkategorie unter dem Header*/
.kategoriediv{
    width:100%; /* 100vw; /* Volle Bildschirmbreite */
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    overflow-x: auto; /* x Nur horizontales Scrollen */
    margin:auto;
    white-space: nowrap; /* Kein Umbruch der Inhalte */
    scroll-snap-type: x mandatory; /* Sanftes Einrasten */
    -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
    background: black;
}

.unterkategorie{
    float:left;
    background-color:#990000;
    color:#FFFFFF;
    margin:2px;
    font-size:16px; height:80px;
    justify-content: center;
    display: flex;
    align-items: center;
    width:48%;
    text-align:center;
    font-family:'Courgette';
}

.katlink{
    color:#FFFFFF; display:flex;
}



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


a.menuelink	{ display:block; font-size:1.0rem; line-height:1.4rem; padding:5px; color:#333333;}
a.menuelink:hover  {background:#EEEEEE;}


a.hauptkategorien{ color:#FFFFFF; padding:10px; }

a.katlink{
    color:#FFFFFF; xdisplay:block; padding:0; justify-content: center; align-items: center;  height:99%; display:flex;  width:99%; margin:auto;
}
a.katlink:hover{
    margin:0; padding:0;
}


a.linkintern{
    float:left;
	font-family: arial, sans-serif;
	background-color: green;
	color:#FFFFFF;
	Xfont-size: 2.0rem;
	Xline-height:2.3rem;
	margin:2px;
	padding:8px;
    border-radius:3px;
}
a.linkintern:hover{color:black; color:yellow;}


a.bilderlink:link {padding:0; background-color:transparent; border-radius:0; margin:0;}
a.bilderlink:visited {padding:0; background-color:transparent; border-radius:0; margin:0;}
a.bilderlink:hover {background-color:transparent;}
a.bilderlink:focus {padding:0; background-color:transparent; border-radius:0; margin:0;}

a.ziffer{ font-size:1.2rem; font-family:arial; border-radius:0.3rem; color:green; font-weight:600; padding:0.3rem; padding-left:6px; padding-right:6px;}
a.ziffer:hover{ background-color:#FFFFFF; color:green; }
a.zifferakt{ border:1px solid #888888;}

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;
}



.layer{
    width: calc(100vw / 5); /* Teilt den Bildschirm in 4 gleiche Quadrate */
    max-width: 18%;
    height: auto;
    aspect-ratio: 1 / 1;
    width:150px;
    height:150px;

    float:left;
    background-color:#ddeefc;
    margin:5px;
    border:1px solid #DDDDDD;
    display: flex;
    justify-content: center;
    align-items:center;


}
.layer1{   /* Layer für Vorschaubild */
    max-height: 100%;
    max-width: 100%;
    width:auto;
    height:auto;

}
.layer2{
    display:none;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
}

textarea,input,select {
	padding:10px;
	border:2px solid #CCCCCC;
    color:blue;
    margin-bottom:10px;
    width:800px;
    max-width:90%;
    background-color:#FFFFFF;
    font-size:1.4rem;
    line-height:150%;
}
input[type=submit] {
	background-color : #99ccff;
	color : #333333;
	border-bottom : solid #888888;
	border-right: solid #888888;
	border-top: solid #AAAAAA;
	border-left: solid #AAAAAA;
	font-weight : bolder;
	padding:3px;
	border-radius:5px;
    font-size:1.4rem;
    line-height:150%;
    cursor:pointer;
    width:auto;
}
input[type=radio] { height:1.5rem; width:1.5rem; padding:10px;}
input[type=checkbox] { height:1.5rem; width:1.5rem; padding:10px;}
input[type=file] { max-width:90%;}

#linkbutton{ background:#66ccff; color:#333333; width:200px; font-weight:200; xfont-size:1rem; padding:0; margin-left:10px; border:0; }



#links{  width:45%; padding:10px; float:left; background-color:#DDDDDD; xoutline:1px dashed #888888;}
#rechts{ width:45%; padding:10px; margin-left:50%; background-color:#DDDDDD; xoutline:1px dashed #888888;}



.inserat{ overflow:hidden; margin:3px; background-color:#EEEEEE; padding:10px; font-size:1.26rem; line-height:2.0rem; Xborder:1px solid #888888; }
.bildvorschau{ width:40%; margin-bottom:10px; float:left; Xborder:2px solid red; }
.angebot{ margin-left:42%; }



.cover {border:1px solid #BBBBBB; width:100%; Xheight:300px; aspect-ratio: 16 / 11; object-fit:cover; }


.unterseite{ padding:20px; Xborder:1px solid red; clear:both; }
.schmal{ width:1200px; max-width:100%; margin:auto; Xborder:1px solid red;  }

.menue{ width:300px; z-index:10; position:fixed; right:30px; top:50px; }


#vorschlaege {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    max-width: 300px;
    position: absolute;
    background: white;
}

#vorschlaege li {
    padding: 8px;
    cursor: pointer;
}

#vorschlaege li:hover {
    background: #f0f0f0;
}

#vorschlaege li.aktiv {
    background-color: #f0f0f0;
    color: black;
}

.phrasen{ background:#6699ff; color:#FFFFFF; border-radius:0.8rem; padding:5px; padding-left:10px; padding-right:10px; font-size:70%; margin-left:3px; }

#haendlerlinks{ text-align:center; width:49%; float:left; xoutline:1px solid #888888; }
#haendlerrechts{ text-align:center; padding:10px; margin-left:50%; width:48%; xoutline:1px solid #888888; }



@media (max-width: 1200px)
{
    .h2extra{font-size:1.2em;}
    .inserat{ font-size:1.12rem; line-height:1.8rem;}
}

@media (max-width: 1000px)
{

    .layer{
        width: calc(100vw / 4); /* Teilt den Bildschirm in 4 gleiche Quadrate */
        max-width: 23%;
        height:auto;
    }
    .unterseite{ padding:5px; }


    .inserat{ font-size:0.98rem; line-height:1.57rem; }


    #links{  width:95%; clear:both; margin-bottom:30px;}
    #rechts{ width:95%; clear:both; margin-left:0;}

    .bildvorschau{ clear:both; width:100%; }
    .angebot{ margin-left:0;  }
}


@media (max-width: 800px) /*Mobilansicht*/
{
    body{ font-size: 1rem; line-height:1.6rem; }

    .layer{
        width: calc(100vw / 4); /* Teilt den Bildschirm in 4 gleiche Quadrate */
        max-width: 23%;
        height:auto;

    }

    #header{ font-size:1.0rem; }

    h1 { font-size:1.4em; }


    .h2extra{font-size:1.1em;}

    #angebot{ width:100%; }

    textarea,input,select {font-size:1rem; width:95%; padding:5px;}
    input[type=submit] {font-size:1rem;}
    input[type=radio] { height:1.0rem; width:1.0rem; }
    input[type=checkbox] { height:1.0rem; width:1.0rem; }


    .katergoriediv{ padding:5px; padding-left:3px;} /*Hauptkategorie*/


}


@media (max-width: 630px) /*Mobilansicht*/
{
    #haendlerlinks{ width:98%; width:100%;}
    #haendlerrechts{ margin-left:0; width:96%; clear:both;}

    .layer{
        width: calc(100vw / 2); /* Teilt den Bildschirm in 4 gleiche Quadrate */
        max-width: 45%;
        height:auto;
    }

    .h2extra{font-size:1em;}
    h1 {
        margin-bottom:0.5em;
        margin-top:0.5em;
        font-size:1.2em;
    }
    h2 {
    	margin-bottom:0.5em;
        margin-top:0.5em;
        font-size:1em;
    }

    .menue{ width:95%; Xposition:absolute;  left:2%; right:2%; }

    .galeriebilddiv{ margin-bottom:10px; border:2px solid silver;}
    .listendiv{ padding:5px; }
    .textbild { width:100%; }


    a.linkintern{display:block;}


}




.rem90 {font-size:0.9rem; line-height:160%;}
.rem80 {font-size:0.8rem; line-height:160%;}
.rem70 {font-size:0.7rem; line-height:160%;}
.rem60 {font-size:0.6rem; line-height:160%;}


.fehler  {
	/*Schrift für Fehlermeldungen*/
	font-size: 1.0em;
	background-color: #FF0000;
    color: #FFFFFF;
    padding:10px;
}
.meldung  { 				/*Schrift für Meldungen*/
	 font-size: 1.0em;
	 background-color: green;
     color: #FFFFFF;
     padding:10px;
}