/* CSS Document */


#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 15px;
    text-align: center;
    z-index: 10000;
}

#cookie-banner button {
    background-color: #620014;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    font-size: 14px;
}

#cookie-banner button:hover {
    background-color: #80001a;
}

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

/* ================================
   Startseite: eigene Layout-Regeln
   ================================ */

body.startseite #main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}


body.startseite .startseiten-box {
    background: #ffffff !important;
    max-width: 800px;
    width: calc(100% - 10px); /* 10px links + 10px rechts */
    margin: 20px auto !important;
    padding: 20px;
    border-radius: 0 !important;
    box-sizing: border-box;
    text-align: center;
}


/* Variante nur für preise.php */
body.seite-preise .startseiten-box {
    background: #ffffff !important;
    max-width: 600px !important;
    width: calc(100% - 10px); /* 10px links + 10px rechts */
    margin: 20px auto !important;
    padding: 20px;
    border-radius: 0 !important;
    box-sizing: border-box;
}

/*===============================================*/









body {
	background:#e4ab39;
	font-size:100%;
	margin:0em;
	padding:0em;
	}
	
body.kurs-seite #main {
    /* entfernt, damit Breite wie kurse.php */
}


body.kurs-seite .workshop-box {
    /* entfernt: soll wie kurse.php reagieren */
}




	
header  {
	display:block;
	background:#006363;
	text-align:center;
	margin-top:0px;
	margin-bottom:28px;
}


/* Content Area */
#main  {
	display:block;
	width:95%;
/*	max-width:980px;*/
	margin:0.25em auto;
	padding:0em;
}


/* globale Regel – aber NICHT für die Startseite */
#main section {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 12px;
    margin: 20px auto;     /* Abstand zu vorheriger & nächster Section */
    width: 100%;
    max-width: 800px;      /* gleiche Breite wie Kurse */
    box-sizing: border-box;
}



/* globale Regel – aber NICHT für die Startseite */
#main article {
    display:inline-block;
    width:100%;
    vertical-align:top;
    margin-bottom:0.5em;
    padding:0em;
    text-align:center;
    background: transparent;
}



/* globale Regel – aber NICHT für die Startseite */
#main article section {
    background: transparent; /* wichtig: großes weißes Feld entfernen */
    margin-bottom:0.5em;
    padding: 1em 0em 1em 0em;
}




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

}


#main .einblock article {
	display:block; 
	width:95%;
	max-width:800px;
	margin-left: auto;
    margin-right: auto;
	
}


#main information article  {
	display:block; 
	width:100%;
	margin-left: auto;
    margin-right: auto;
	
}


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

#main aside section {
	margin-bottom:0.5em;
	background:#ffffff;
}



/* entfernt, da kurs.php wie kurse.php aussehen soll */
body.kurs-seite #main article section { }




.seite-warenkorb #main {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    width: calc(100% - 10px); 
    box-sizing: border-box;
    margin: 0 auto;
    background: white;
    padding: 20px 5px;

    border-radius: 8px;

    overflow-x: hidden;   /* verhindert Überstand */
}




.seite-warenkorb #preise {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}




footer  {
	font-size:1.15em;
	display:block;
	font-weight: bold;
	background:#2f2c2c;
	text-align:center;
}




div {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
		margin-left: auto;
    margin-right: auto;
	}





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

/* On Top Bar */
#menubar {
	display:none;
}


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


nav  {
	font-family: 'Zilla Slab', serif; 
	font-size:1.35em;
	line-height:2.5em;
	display:block;
	height:2.6em;
	background:#FFFFFF;
	text-align:center;	
	margin-left:-15px;
		margin-top:-28px;
	}

nav ul  {
	display:block;
}


nav ul li {
	font-family: 'Zilla Slab', serif; 

	line-height:2.5em;
	font-style:normal;
	display:inline;
	margin:0em 0.4em 0em 0em;
	text-align:center; /* Menutext zentriert - Mobil */
}


nav ul li a {
	font-family: 'Zilla Slab', serif; 
	font-weight:bold;
	font-style:normal;
	color:#006363;
/*	font-size:1.4em;
	line-height:1.8em;
	padding:0.263em 0.9em 0.375em 0em;*/
	transition:background 0.2s;
	-webkit-transition:background 0.8s;
}


nav ul li a:hover {
	font-family: 'Zilla Slab', serif; 
	font-weight:bold;
	color:#A50000;
	
	border-bottom:0.05em solid #A50000;
}

nav ul li a.active {
	/*border-bottom:0.188em solid #A50000;*/
}



a {
	text-decoration: none;
	color: #03F;
}



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

.linear {

	font-size:0.8em;
	font-family: 'Zilla Slab', serif; 
	list-style-type: none;
	color: #999;
	margin-left:10px;
	display: inline;
	font-style:italic;
	font-weight:bold;

}


.liinfo {
	font-size:0.75em;
	font-family:Helvetica, Arial, Geneva, sans-serif; 
	font-style:normal;
	font-weight:normal;
	color: #006666;
	}	


.abslinks {
	margin: -20px 10px 10px 20px ;
	
}


.formfeld{
border: 1px solid #666666;
background-color: #FFFFCC;
}


textarea:focus {
      background: #FFC;
}

input {
	caret-color: red;  
	border: 1px solid #cccccc;
	font-family: 'Zilla Slab', serif; 
	
}


/* ========= TEXTE ========= */






h1 { 
	font-size:2.0em;
	font-family: 'Zilla Slab', serif;
/*	font-style:italic;*/
	color: #006666;
	font-weight: bold;
	margin: 0 auto;
	text-align:center;	

}

h2 { 
	font-size:1.65em;
	font-family: 'Zilla Slab', serif;
/*	font-style:italic;*/
	color: #006666;
	font-weight: bold;
	margin: 0 auto;
	text-align:center;	

}


h3 { 
	font-size:1.1em;
	font-family: 'Zilla Slab', serif;
	color: #006666;
	font-weight: bold;
	margin: 0 auto;
	text-align:center;	
}


.toptext2 { 
	font-size:1.3em !important;
	font-family: 'Zilla Slab', serif !important; 
	font-style:italic !important;
	font-weight:bold !important;
	color: #006666 !important;
	text-align:center !important;		
}

.toptext3 { 
	font-size:1.0em !important;
	font-family: 'Zilla Slab', serif !important; 
	font-style:italic !important;
	font-weight:bold !important;
	color: #006666 !important;
	text-align:center !important;	
}







p {
	font-family: 'Zilla Slab', serif; 
	font-size:1.1em;
	line-height:1.3em;
	font-style: italic;
	font-weight: 500;
	color:#000000;
	margin:0em;
	padding:0em 0.8em 0em 0.8em;
	text-align:justify;	
	}


#main article section p {
	font-family: 'Zilla Slab', serif; 
	font-size:1.1em;
	line-height:1.3em;
	font-style: italic;
	font-weight: 500;
	color:#000000;
	margin:0em;
	padding:0em 0.8em 0em 0.8em;
	text-align:justify;	
	}
	}


.extra {
	font-family: 'Zilla Slab', serif; 
	font-size:1.1em;
	line-height:1.3em;
	font-style: italic;
	font-weight: 500;
	color:#000000;
	margin:0em;
	padding:0em 0.8em 0em 0.8em;	
	text-align: left;
	}
	
.uwaga {
	font-family: 'Zilla Slab', serif; 
	font-size:1.1em;
	line-height:1.3em;
	font-style: italic;
	background-color: #FFF7E8;
	font-weight: 500;
	color: #000000;
	margin: 1em 0em 1em 0em;
	padding:0.2em 1em 0.2em 1em;
	text-align:justify;	
	}
	
	

.trenn {
	/*width:100%;*/
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   
  word-wrap:break-word;
	}
	



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



.toptext2 { 
	font-size:1.1em !important;
}

.toptext3 { 
	font-size:0.8.0em !important;
}



}











body #main article .tipps-section h2 {
	font-size:1.2em;
    text-align: center;
    margin-left: 1.2em;   /* bündig mit p und ul */
    margin-right: 0.8em;
}

/* Dünne, dezente Trennlinie für tipps.php */
body hr.trennlinie {
    border: none;
    border-top: 3px solid #ccc;  /* feine graue Linie */
    margin: 1.2em auto;
    width: 90%;                  /* nicht ganz bis zum Rand */
}






h4 {
	font-size:0.8em;
	line-height:1.3em;
	font-family: 'Zilla Slab', serif; 
	color: #000000;
	margin-left:35px;
	margin-right:25px;
	padding:0em 0.5em 0em 0.5em;
	text-align:justify;	
}


h5 { 
	font-size:1.5em;
	line-height:1.2em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight:bold;
	color: #999;
	margin:0em;
	padding:1em 0em 1em 0em;
	text-align:center;	
}


.anfrage1 { 
	font-size:1.6em !important;
	font-family: 'Zilla Slab', serif;
	font-style:italic;
	color: #006666;
	font-weight: bold !important;
	margin:0px 0px 0px -20px;
	text-align:center;	

}

.anfrage2 { 
	font-size:1.2em;
	font-family: 'Zilla Slab', serif;
	font-style:italic;
	color: #006666;
	font-weight: bold;
	text-align:center;	

}


/* anfrage.php: größere Schrift nur für Formular-Label (linke Spalte) – nur mobil <= 400px */
@media (max-width: 450px) {
  body.seite-warenkorb .checkout-table td:first-child label {
      font-size: 0.85em;
  }
}


/* anfrage.php: Hinweistext kleiner + etwas nach oben auf sehr kleinen Screens */
@media (max-width: 500px) {
  body.seite-warenkorb .hinweis-anfrage-text {
    font-size: 0.9em !important;
    margin-top: -20px !important;
  }
}




/* Preisliste (preise.php): nur diese Auflistung in Arial */
#preise-preisliste,
#preise-preisliste p,
#preise-preisliste strong {
  
}

#preise-preisliste {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  margin-left: 20px;
}

/* Schriftgrößen separat steuerbar */
#preise-preisliste strong {
	font-weight:800;
  font-size: 1.10em !important;
  color:#006666;
}

/*#preise-preisliste p {
  font-size: 0.95em !important; 
  margin-bottom: 12px;
}*/

#preise-preisliste p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 600px) {
#preise-preisliste {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  margin-left: 50px;
}

/* Schriftgrößen separat steuerbar */
#preise-preisliste strong {
  font-size: 1.30em !important;
  color:#006666;
}

#preise-preisliste p {
  font-size: 0.95em !important; 
  margin-bottom: 12px;
}

#preise-preisliste p:last-child {
  margin-bottom: 0;
}
}




schow {
	display: none;
	}
	
.schow {
	display: none;
	}

.schowane {
	visibility:hidden
	}

ul {
	font-size:1.1em;
	line-height:1.3em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight: 500;
	}



/* OL soll exakt aussehen wie UL */
.linksabstandagb ol {
    font-size: 1.1em;
    line-height: 1.3em;
    font-family: 'Zilla Slab', serif;
    font-style: italic;
    font-weight: 500;

    padding-left: 0.4em !important;
    list-style-position: inside;
}

/* Alphabetische Aufzählung */
.linksabstandagb ol {
    list-style-type: lower-alpha;
}

.linksabstandagb ol li::marker {
    font-weight: bold !important;
	line-height: 1.6em !important;
}


.linksabstandagb ol li {
    list-style-type: lower-alpha !important;
    margin-left: 0.9em !important;
}


@media screen and (max-width: 600px) {
  .linksabstandagb ol {
    font-size: 1.0em;
  }

.linksabstandagb ol li {
    font-size: 1.0em;
}
}








body .tipps-section ul {
    text-align: left;
    margin-left: 1.5em;
    padding-left: 0;
}






.titeltxtbig {
	font-size:1.3em;
	line-height:2em;
	font-family: 'Zilla Slab', serif; 
	font-weight:bold;
	color: #000000;
	text-align:left;
	margin: 40px 0px 0px 0px;	
}

.titeltxt {
	font-size:1.1em;
	line-height:2em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight:bold;
	color: #000000;
	text-decoration: underline;
	text-align:left;
	margin: 15px 0px -5px 55px;	
}

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

.titeltxt {
	font-size:1em;
	line-height:1.8em;
	margin: 15px 0px -10px 30px;	
}
}


@media screen and (max-width:380px) {
.titeltxt {
	font-size:1em;
	line-height:1.8em;
	margin: 15px 0px 0px 25px;	
}	
}

.titelrot {
	font-size:1.1em;
	line-height:1.2em;
	font-family: 'Zilla Slab', serif; 
	font-weight:bold;
	color: red;
	text-align:left;
	margin: 5px 0px 0px 5px;	
}



.tuerkis { 
	font-size:1.3em;
	line-height:1.3em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight: bold;
	color: #006666;
	text-align:left;
	}
	
	
	
.pleft {
	font-size:1.0em;
	line-height:1.3em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight: bold;
	color: #000000;
	text-align:left;	
	}	
	
.hinweis {
	font-size:0.85em;
	line-height:1.2em;
	font-family: 'Zilla Slab', serif;   
	font-style:italic;
	font-weight: 600;
	color: #000000;
	text-align:justify;
	margin-right:10px;
	}	

td {
    font-size:0.98em;
    line-height:1.3em;
    font-family: 'Zilla Slab', serif; 
    font-style:normal;
    font-weight: normal;
    color: #000000;
    text-align:left;	
}	

.td-klein {   /* Punkt vor dem Klassennamen! */
    font-size:0.85em;
    line-height:1.3em;
    font-family: 'Zilla Slab', serif; 
    font-style:normal;
    font-weight: normal;
    color: #000000;
    text-align:left;	
}

		
.tab {
	font-size:0.818em;
	line-height:1.1em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight: bold;
	color: #000000;
	/*text-align:justify;	*/
	}

.table {
	font-size:0.8em;
	line-height:1.3em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight: bold;
	color: #000000;
	margin:20px 0px 0px 0px ;
	text-align:left;	
	}




kursivklein {
	font-size:0.9em;
	font-family: 'Zilla Slab', serif; 
	font-style: italic;

	color: #000000;
	margin:0em;
	
	text-align:justify;	
}


klein {
	font-size:0.85em;
	line-height:1.1em;
	font-family: 'Zilla Slab', serif; 
	font-style: italic;
	font-weight:bold;
	color: #006666;
}

kleinweiss {
	font-size:0.8em;
	line-height:1.1em;
	font-family: 'Zilla Slab', serif; 
	font-style: italic;
	font-weight:normal;
	color: #ffffff;
	text-decoration: underline;
}

grossweiss {
	font-size:1.2em;
	line-height:1.1em;
	font-family: 'Zilla Slab', serif; 
	font-style: italic;
	font-weight:normal;
	color: #ffffff;
}


technisch {
	font-size:0.8em;
	line-height:1.1em;
	font-family: sans-serif; 
	font-style: normal;
	font-weight: normal;
	color: #000;
}


klein75 {
	font-size:0.8em;
	line-height:1.1em;
	font-family: 'Zilla Slab', serif; 
	font-style: italic;
	font-weight:500;
	color: #006666;
}


strong4 { /* tuerkis */
	font-size:1.0em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	color: #006666;
	font-weight: bold;
	margin:0em;
	text-align:justify;	
}


strong-center { /* tuerkis */
	font-size:1.2em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	color: #006666;
	font-weight: bold;
	text-align:center;	
}


strong-center-big { /* tuerkis */
	font-size:3.0em;
	font-family: 'Zilla Slab', serif;
	font-style:italic;
	color: #006666;
	font-weight: bold;
	margin:0px 0px 0px -20px;
	text-align:center;	

}

strong-center-gross { /* tuerkis */
	font-size:2.0em;
	font-family: 'Zilla Slab', serif;
	font-style:italic;
	color: #006666;
	font-weight: bold;
	margin:0px 0px 0px -20px;
	text-align:center;	

}

strong-center-mittel { /* tuerkis */
	font-size:1.1em;
	line-height:1.5em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight:bold;
	color: #006666;
	text-align:center;	
}

strong-mittel { /* tuerkis */
	font-size:1.1em;
	line-height:1.5em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight:bold;
	color: #006666;
	text-align:left;	
}

strong-center-links ul li{ /* tuerkis */
	font-size:1.2em;
	line-height:1.5em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight:bold;
	color: #006666;
	text-align:left;	
}


fett {
	font-size:1.0em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	color: #006666;
	font-weight: bold;
}

.fett {
	font-size:1.0em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	color: #006666;
	font-weight: bold;
}

.stern {
	font-size:1.0em;
	font-family: 'Zilla Slab', serif; 
	color: #E43939;
	font-weight: bold;
}

kontakt {
	font-size:0.75em;
	font-family:Helvetica, Arial, Geneva, sans-serif; 
	font-style:normal;
	font-weight:normal;
	color: #006666;
}

.kontakt {
	font-size:0.75em;
	font-family:Helvetica, Arial, Geneva, sans-serif; 
	font-style:normal;
	font-weight:normal;
	color: #006666;
}

kontaktkleinkursiv {
	font-size:0.7em;
	font-family:Helvetica, Arial, Geneva, sans-serif; 
	font-style:italic;
	font-weight:normal;
	color: #006666;
}


.autor {
    display: block;
    font-family: 'Zilla Slab', serif;
    font-size: 0.75em;
    font-style: italic;
    font-weight: 400;
    text-align: center;
    margin-top: 6px;
}




.abstand {
	margin:20px 30px 10px 30px; 
	}




.linksabstand {
	margin-left:2em !important; 
	}


@media screen and (max-width: 600px) {
  .linksabstand {
    margin-left: 1.2em !important;
  }
}




.linksabstandagb {
	margin-left: 2em !important;
	margin-right: 1.2em !important;
}

.linksabstandagb ul {
  padding-left: 0.1em !important;
  list-style-position: inside;
}

@media screen and (max-width: 600px) {
  .linksabstandagb {
    margin-left: 1.2em !important;
    margin-right: 1.2em !important;
  }

.linksabstandagb ul {
  padding-left: 0.7em !important;
  list-style-position: inside;
}
}









#main article ul  {
	width:auto;
	text-align:left;
	margin-left:1.0em !important;
}

@media screen and (max-width: 600px) {
#main article ul  {
	margin-left:0.2em !important;
  }
}





#main article section liste ul  {
	font-size:0.8em;
	
	font-family: 'Zilla Slab', serif; 
	color: #000000;
}






/*===== Nur Materialien ============*/

body #main article .tipps-section ul {
	font-size:1.1em;
    display: block;
    text-align: left;
    margin-left: 0;
    padding-left: 2.6em;    /* abgestimmt auf p{padding-left:0.8em;} + Bulletbreite */
    list-style-position: outside;
}

body #main article .tipps-section ol {
    display: block;
    text-align: left;
    margin-left: 0;
    padding-left: 2.6em;
    list-style-position: outside;
}


/* tipps.php: mobil identisch wie bei <ul> */
@media screen and (max-width: 600px) {
	
  body #main article .tipps-section ul {
	  font-size:0.995em;
      padding-left: 1.6em;   /* p hat auch 0.8em Seitenabstand */
  }	
	
  body #main article .tipps-section ol {
      padding-left: 1.6em;
  }
}


/*===== Nur Materialien ENDE ============*/




#main article section p {
	margin:0em 1em 0em 1em;
/*	font-size:1.1em;*/
	}	
	



.zentriert  {
	display: flex;
	align-items: center;
	justify-content: center;
		font-size:1.1em;
}


.textzentriert  {
	font-size:1.1em;
	font-family: 'Zilla Slab', serif; 
	font-weight: bold;
	text-align:center !important;
	
}






#main article section haftung p {
	font-size:0.8em;
	line-height:1.5em;
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	font-weight: bold;
	text-align: left;
	display:block;
	width:90%;
	max-width:1080px;
	padding: 0em 0em 0em 3em;

}


#main aside section ul {
}



footer ul {
	display:block;
	margin-left:auto;
	margin-right:auto;
	
}

footer ul li {
	font-family: 'Zilla Slab', serif; 
	font-style:italic;
	display:inline;
	font-size:0.8em;
	line-height:2.8em;
	color:#e2dbdb;
	margin-left:5px;
}

footer ul li a {
	color:#e2dbdb;
}




.kopf ul li { 
	display:none;
}



stern { 
	font-size:1.2em; 
	font-style:bold; 
	color:#F00; 
	text-align:justify;
}




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



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


IMG.logo {
	margin:10px 0px 2px 0px;
	}

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

IMG.logo-malen {
	margin:0px 0px 1px 0px;
	}


IMG.titel {
margin:10px 0px 10px 20px;
display:block;
}

IMG.titelaufn {
margin:20px 0px 20px 40px;
display:block;
}


#main article img  {
	max-width:auto; 
	
}


IMG.bildposition { 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.foto-portret-mobil { 
	display:none;
	}	

.foto-portret { 
    
    margin: 5px 10px 0px 0px; 
	max-height: 210px;
	float:left;
	}

IMG.foto-raum { 
	float:left;
    display: block;
    margin-left: auto;

	margin:15px 10px 5px 0px;
	max-height: 185px;
		}

IMG.symbole { 
	float:left;
    display: block;
    margin-left: auto;
	margin:-10px 15px 0px 10px;
	max-height: 50px;
		}

.bildklein-links {
	float:left; 
	width:220px;
	max-width:90%;
	height:auto;
	margin:5px 10px 5px 15px;
	border:solid 1px #336666;
}


IMG.bildklein-rechts {
	float:right;
	width:180px;
	margin:7px 0px 5px 10px;
	/*width:100%;*/
	}
	
	
.eImage {  /* Rand für einzelne Fotos */
/*	float:left; */
	width:80px; 
	height:65px;
	margin: 1px 1px 1px 1px ;
	border:1px solid; 
	border-color:#FFFFFF;
}

.eImage-malerei {
	width:80%;
	max-width:600px;
	
	margin: 35px auto 15px auto;
	
	border-top-style: solid;
	border-top-width:20px;
	border-top-color:#ffffff; 

	border-right-style: solid;
	border-right-width:20px;
	border-right-color:#ffffff;
		
	border-bottom-style: solid;
	border-bottom-width:3px;
	border-bottom-color:#ffffff; 
	
	border-left-style: solid;
	border-left-width:20px;
	border-left-color:#ffffff;

}

.eImage-malerei-hoch {
	width:80%;
	max-width:600px; 

	margin: 35px auto 15px auto;
	
	border-top-style: solid;
	border-top-width:20px;
	border-top-color:#ffffff; 

	border-right-style: solid;
	border-right-width:20px;
	border-right-color:#ffffff;
		
	border-bottom-style: solid;
	border-bottom-width:3px;
	border-bottom-color:#ffffff; 
	
	border-left-style: solid;
	border-left-width:20px;
	border-left-color:#ffffff;

}



.eImage-cartoon {
	width:80%;
	/*max-width:600px;*/
	
	margin: 35px auto 15px auto;
	
	border-top-style: solid;
	border-top-width:20px;
	border-top-color:#ffffff; 

	border-right-style: solid;
	border-right-width:20px;
	border-right-color:#ffffff;
		
	border-bottom-style: solid;
	border-bottom-width:20px;
	border-bottom-color:#ffffff; 
	
	border-left-style: solid;
	border-left-width:20px;
	border-left-color:#ffffff;

}


.pfoben { 
float: right; 
margin: -1em 1.5em 0em 0em; 
border: 1px solid #666666; 
}



.pfobenarticle { 
float: right; 
margin: -1.2em 0.25em -2em 0em; 
/*border: 0px solid #666666;*/ 
}

.pfobenarticle2 { 
float: right; 
margin: -0.7em 1em -3em 0em; 

}

.logos { 
float: left; 
margin: -0.5em 1em 0em 1em; 

}


.bild-mobil {
	display:none;

}

.rechtlich-mobil {
	display:none;
}


.tabvoll {
	display:inherit;

}

.tabmobil {
	display:none;
}




.tabelanormal {
	display:run-in;
}

.tabmob {
	display:none;
}



.kunstcoaching {
	width:90%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin:5px auto 10px auto; 
/*	border:solid 1px #336666;*/
	}
	
	
	
.section-raum-hoch {
	height:200px;	
}

	
	
.section-stress-hoch {
	height:120px;	
}

.auflistung {
	padding:30px 0px 0px 30px; 	
}


/* ========= ANDERE ========= */







	





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





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


h1 { 
	font-size:2.0em;
	}
	
h2 { 
	font-size:1.65em;
	}


h3 { 
	font-size:1.1em;
}


nav  {
	font-size:1.30em;
	}

nav ul li a {
	padding:0.563em 0.2em 0.375em 0.1em;
}
nav ul  {
	margin-left:-10px;
}
	
	#main article section p {
	margin:0em 1em 0em 1em;
	}	
	
.foto-portret { 
    margin: 5px 10px 0px 0px; 
	}
	
IMG.titelaufn {
margin:20px 0px 20px 10px;

}	
	
strong-center-big { /* tuerkis */
	font-size:2.9em;
}

	
IMG.logo-preise {
	margin:10px 0px 0.8px 0px;
	}
	
	
.kunstcoaching {
	width:90%;
	display: flex;
	align-items: center;
	justify-content: center;
	float:none;
	margin:0px auto 0px auto;
	
	}


IMG.logo {
	margin:10px 0px 2px 0px;
	}			
	
}


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

		#main aside, #main article  {
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em;
}



h1 { 
	font-size:2.0em;
	}
	
h2 { 
	font-size:1.65em;
	margin: 10px 5px 0px 5px;
}



		
.kopf ul li { 
	display:block;
	background:#FFF;
	font-size:1.7em;
	line-height:0.3em;
	font-family: 'Zilla Slab', serif; 
	font-weight: bold;
	color: #999;
	margin:0px 0px 0px 0px;
	padding:0em 0em 0.7em 0em;
	text-align:center;	
}	

nav  {
	display:block;

	}


nav  {
	font-size:1.25em;
	
	}



	
nav ul li a {
	padding:0.563em 0.1em 0.375em 0.25em;
}
nav ul  {
	margin-left:-12px;
}


.bild-voll {
	display:none;
	}

.bild-mobil {
	display: inherit;
	}

.aufmerksam {
	display: none;
	}

.rechtlich-breit {
	display:none;
}
.rechtlich-mobil {
	display: block;
}

.tabvoll {
	display:none;
}

.tabmobil {
	display:inherit;
	margin-bottom:20px;
}


.abstand {
	margin:20px 30px 10px 30px; 
	}


IMG.logo-preise {
	margin:10px 0px 3px 0px;
	}
	
IMG.logo-malen {
	margin:0px 0px 3px 0px;
	}	


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


#main .einblock .linki article {
    max-width: 95%;
}
	
}




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


h1 { 
	font-size:2.0em;
	}



nav  {
	font-size:1.15em;
	}


.abstand {
	margin:10px 30px 10px 30px; 
	}

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

IMG.logo-malen {
	margin:0px 0px 5px 0px;
	}	



IMG.logo {
	margin:10px 0px 6px 0px;
	}


}



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


nav {
	display:none;
	height:auto;
	}
			
	nav ul li {
	display:block;
	margin:0.3em 0em 0.3em
	}
	


	
#menubar {
	display:block;
	width:100%;
	height:2.5em;
	background:#FFFFFF;	
	
}

#menubar ul {
	display:block;
	width:2em;
	padding:0.3em 0em 0em 0.2em;	
	margin-top:0px;
}

#menubar ul li {
	display:inline;
}



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

		
	#main article section p {
	margin:0em 0.1em 0em 0.1em;
	}	



		
h1 { 
	font-size:1.8em;
	}

h2 { 
	font-size:1.5em;
	}	
		
h3 { 
	font-size:1.0em;
}		
		
			
h4 {
	margin-left:20px; 
	margin-right:5px;
}		

strong-center-big { /* tuerkis */
	font-size:2.9em;
}

#main article section liste li  {
	line-height:1.5em;
	}


IMG.titelaufn {
margin:20px 0px 20px 10px;

}		



.foto-portret { 
    margin: 5px 15px 0px 0px; 
	}
	
IMG.titelaufn {
margin:20px 0px 20px 10px;

}	

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

IMG.logo {
	margin:10px 0px 2px 0px;
	}

.section-raum-hoch {
	height:210px;	
}

	
.section-stress-hoch {
	height:140px;	
}

}





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

		
}



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

	body {
		font-size:100%;
		}	

nav ul li a {
	font-size:1.05em;
	padding:0.563em 0.1em 0.375em 0.25em;
}

	


h1 { 
	font-size:1.8em;
	}


h2 { 
	font-size:1.4em;
	margin: 10px 5px 0px 5px;
}

h3 { 
	font-size:0.95em;
}


strong-center-big { /* tuerkis */
	font-size:2.5em;
}

strong-center-gross { /* tuerkis */
	font-size:1.7em;
	margin:0px 0px 0px -10px;
}

.kunstcoaching {
	width:90%;
	}

	
.abstand-raum {
	padding-bottom:210px;	
}


.section-raum-hoch {
	height:240px;	
}

	
.section-stress-hoch {
	height:160px;	
}

}


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


    .bildklein-links {
        float: left;
        width: 130px !important;
        max-width: 32% !important;
        height: auto;
        margin: 5px 10px 5px 10px;
        border: solid 1px #336666;
    }
#main article section p { 
	font-size:0.996em;
}

nav ul li a {
	font-size:0.9em;
	padding:0.563em 0.1em 0.375em 0.1em;

}
nav ul  {
	margin-left:-10px;
}

h1 { 
	font-size:1.6em;
	margin:0;
}

h2 { 
	font-size:1.2em;

}

h3 { 
	font-size:0.8em;
}

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

.section-raum-hoch {
	height:300px;	
}
	
.section-stress-hoch {
	height:190px;	
}

}




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



h1 { 
	font-size:1.5em;
	}

h2 { 
	font-size:1.2em;

}

h3 { 
	font-size:0.8em;
}

.tabmob {
	display: block;
	color:#F00;
	font-weight:bold;
	font-size:0.9em;
	line-height:1.5em;
	font-family: 'Zilla Slab', serif;
	margin-top: 20px;
}

.tabelanormal {
	display:none;
}
}


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



.kunstcoaching {
	width:90%;
	}

h1 { 
	font-size:1.4em;
	margin:0;
}


h2 { 
/*	font-size:1.3em;*/
	line-height:1.1em;
	margin-top:15px;
}

IMG.titelaufn {
margin:20px 0px 20px 10px;

}		

strong-center-big { /* tuerkis */
	font-size:2.2em;
}
	

strong-center-gross { /* tuerkis */
	font-size:1.5em;
	margin:0px 0px 0px -5px;
}	


.section-raum-hoch {
	height:320px;	
}	

	
.section-stress-hoch {
	height:250px;	
}	


#main .einblock .linki article section div  {
	max-width: 9em;
	max-height: 9em;
		margin: 5px 3px 5px 3px ;
}

	
#main .einblock .linki article section div  {
	padding-bottom:10px;
}


}


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


  .bildklein-links {
      float:left;
      width:150px;
      max-width:45%;
      margin:5px 10px 5px 10px;
      border:solid 1px #336666;
  }


	
h1 { 
	font-size:1.3em;
	margin:0px 0px 0px 0px;
}

h2 { 
	font-size:1.1em;
	margin: 10px 5px 0px 5px;
}


h3 { 
	font-size:0.8em;
}


.fontklein {
	font-size:90%;	
	}


.fontkleinkontakt {
	font-size:80%;	
	}


.fontkleinpreise {
	font-size:90%;	
	}
	
.table {
	margin:20px 0px 0px 0px ;
	}
		
.abslinks {
	margin: -20px 0px 0px 10px ;
	
}


.kopf ul li { 
	font-size:1.2em;
	margin:0px 0px 0px 0px;
	padding:0em 0em 0.7em 0em;
}	

		


h4 {
	margin-left:5px; 
	margin-right:-5px;
}
		
IMG.foto-raum { 
		display: flex;
	align-items: center;
	justify-content: center;
	float:none;
	max-height: 320px;
	margin: 0px auto 0px auto;
		}	

.foto-portret { 
	display:none;
	}
	
IMG.titelaufn {
margin:20px 0px 20px 10px;
max-width:14em;
}	

.foto-portret-mobil { 
	max-height: 220px;
	display:block;
	margin: 0px auto 20px auto;

	}	

.bildvoll {
	width:88%;
	}

.kunstcoaching {
	width:90%;
	}





IMG.bildklein-rechts {
		display: flex;
	align-items: center;
	justify-content: center;
	float:none;
	width:250px;
	margin:7px auto 5px auto;
	/*width:100%;*/
	}
	
strong-center-big { /* tuerkis */
	font-size:1.6em;
	margin-left:-20px;
}




.section-raum-hoch {
	height:460px;	
}	

	
.section-stress-hoch {
	height:260px;	
}	

.linear {

	font-size:0.7em;

}

.auflistung {
	padding:20px 0px 0px 10px; 	
}



}

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

body {
	font-size:75%;
}

h1 { 
	/*font-size:1.2em;*/
	margin:5px 0px 10px 0px;
}

h2 { 
/*	font-size:1.3em;*/
	line-height:0.8em;
	margin-top:5px;
}

h3 { 
	font-size:0.6em;
}

.section-raum-hoch {
	height:400px;	
}	

	
.section-stress-hoch {
	height:240px;	
}	


		
}









/*    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: 170px; /* Feldhöhe Unterschrift */
    border: #f8d893 solid 1px;
}





#main .einblock .linki article section .tytul {
    font-size:0.75em;
    line-height:1.2em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #000000;
    text-align:center;
    margin-bottom:10px;
    padding-bottom:10px;
    margin-top:0px;
}



#main .einblock .linki article section .tytulklein {
    font-size:0.75em;
    line-height:1.2em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    text-align:center;
    margin-top:-20px;
}







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

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

.kleiner95 {
  transform: scale(0.95);
  display: inline-block; /* optional, aber hilfreich bei manchen Layouts */
}

.kleiner50 {
  width: 6.0em; /* oder z. B. 24px, je nach gewünschter Größe */
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.3em;
}






/* Galerie-Grid */
#gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
  padding: 0 10px;
}



#gallery img.kunstcoaching {
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* Lightbox Overlay */
#lightbox,
#lightbox-kw {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}


.lightbox-inner {
  position: relative;
  max-width: 800px;
  width: 100%;
}

#lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  height: auto;
  width: auto;
  margin: auto;
}


#prev-kw,
#next-kw {
  position: static;
  transform: none;
  cursor: pointer;
  margin: 0 20px;
}


#lightbox-kw .lightbox-inner {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: center;
}

/* Bild: ganze Breite oben */
#lightbox-kw #lightbox-img-kw {
  grid-column: 1 / -1;
  margin-bottom: 12px;
}

/* Pfeile nebeneinander */
#prev-kw {
  grid-column: 1;
  justify-self: end;
  margin-right: 20px;
}

#next-kw {
  grid-column: 2;
  justify-self: start;
  margin-left: 20px;
}


/* Bild */
#lightbox-kw .lightbox-inner > img#lightbox-img-kw {
  margin-bottom: 10px;
}

/* Pfeile nebeneinander unter dem Bild */
#lightbox-kw .lightbox-inner > #prev-kw,
#lightbox-kw .lightbox-inner > #next-kw {
  display: inline-flex;
  margin: 0 25px 10px 25px;
}



#lightbox-kw .lightbox-inner img#lightbox-img-kw {
  margin-bottom: 10px;
}


#prev {
  left: 50%;
  transform: translateX(-120%) translateY(-50%);
}

#next {
  right: 50%;
  transform: translateX(120%) translateY(-50%);
}


/* Mobil: Pfeile ins Bild rücken */
@media (max-width: 500px) {
  #prev {
    left: 5px !important;
  }

  #next {
    right: 5px !important;
  }
} 



/* === Buttons sichtbarer machen === */
a.button-akzent {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid #006363;
  background: #ffffff;
  color: #006363;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

a.button-akzent:hover {
  background: #006363;
  color: #ffffff;
}

/* Ausgebucht-Button rot darstellen */
a.button-akzent.voll-belegt,
button.button-akzent.voll-belegt {
  background: #cc0000 !important;    /* kräftiges Rot */
  border-color: #7a0000 !important;  /* dunkler Rand */
  color: #ffffff !important;         /* weiße Schrift */
  cursor: not-allowed !important;
}


/* === Tabelle Workshops/Preise === */
#preise table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1em;
}

#preise table thead {
  background-color: #e5f5f5;
}

#preise table th,
#preise table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #cfe5e5;
}

#preise table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

@media screen and (max-width: 600px) {
  #preise table th,
  #preise table td {
    font-size: 0.9em;
    padding: 6px;
  }
}

.sternchen {
    font-size: 1.2rem;   /* feste Größe: 1.5 × Standard-Schrift */
    color: red;
    font-weight: bold;
    vertical-align: baseline;
}


/* Workshops */
.textblock-locker p {
  line-height: 1.6em;
  margin-bottom: 1em;
}

.textblock-locker ul {
  line-height: 1.6em;
  margin: 0 0 1em 1.5em;
  padding: 0;
}


.workshop-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
	border-radius: 8px;
}

.workshop-box {
    background: white;
    width: 100%;
    max-width: 800px;
    margin: 10px auto 10px auto; /* zusätzlicher Abstand unten */
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
}



.workshop-box h2 {
  margin-bottom: 8px;
}

.workshop-box p {
  margin-bottom: 6px;
}

.workshop-box p:last-of-type {
  margin-bottom: 10px;
}

.workshop-block {
  margin-bottom: 10px;
  text-align: left;
}

.workshop-block strong {
  display: block;
  margin-bottom: 6px;
}

.workshop-box img {
    display: block;
    margin: 0 auto 15px auto;
    max-width: 100%;
    height: auto;
}




ol.liste {
  margin: 6px 0 0 30px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  list-style-type: disc;
  font-family: 'Zilla Slab', serif;
  font-style: italic;
  font-weight: 500;
}



a.button-akzent {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 16px;
  border: 1px solid #006363;
  background: #ffffff;
  color: #006363;
}



.error {
    color: red;
    font-size: 0.9em;
    margin-top: 4px;
}



#preise {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#preise th,
#preise td {
    border: 1px solid #ccc;
    padding: 8px 10px;
    text-align: left;
}

#preise thead {
    background-color: #f0f0f0;
}

#preise tr:nth-child(even) {
    background-color: #fafafa;
}

#preise tr:hover {
    background-color: #f3f3f3;
}


.button-akzent,
.button-akzent[type="submit"],
.button-akzent[type="button"] {
    background-color: #fff;
    border: 2px solid #006666;
    color: #006666;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-block;
}

.button-akzent:hover {
    background-color: #006666;
    color: #fff;
}



#warenkorb-icon {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1000;
    background-color: transparent;
    padding: 5px;
    border-radius: 8px;
}

@keyframes pulsieren {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

#warenkorb-icon img {
    width: 40px;
    height: auto;
    cursor: pointer;
    animation: pulsieren 1.5s infinite ease-in-out;
}


.checkout-form {
    font-family: 'Zilla Slab', serif;
}

#preise td:nth-child(2) {
    white-space: nowrap;
}

#preise td:nth-child(3) {
    text-align: center;
    vertical-align: middle;
}


.workshop-box {
    position: relative; /* sehr wichtig */
}

.popup-box {
    position: absolute;
    bottom: 100%;        /* direkt über dem Button */
    left: 0; /* Startpunkt linke Button-Kante */
    transform: translateX(-50px) translateY(-6px); /* 50px nach links verschoben */

    background-color: #ffb9b9;
    color: black;
    padding: 8px 14px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    font-size: 14px;
    z-index: 1000;
    display: none;
    animation: fadeInOut 3s ease-in-out;
    text-align: center;
    white-space: nowrap;
}

.popup-box::after {
    content: "";
    position: absolute;
    top: 100%;  /* Pfeil zeigt nach unten */
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #ffb9b9 transparent transparent transparent;
}

.tooltip-container {
    position: relative;   /* Container ist Bezugspunkt */
    display: inline-block;
}


@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-10px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}


.bestell-box {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 20px;
}
.bestell-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bestell-item {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    text-align: left; /* <-- jetzt linksbündig */
}



.steuer-hinweis {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
	font-style:normal;
}


.button-gruppe {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: -20px !important;
}

@media (max-width: 600px) {
.button-gruppe {
    margin-top: -40px !important;
}
}



.button-gruppe a {
    flex: 1 1 auto;
    min-width: 200px; /* sorgt für schönere Darstellung bei kleinen Geräten */
    text-align: center;
	
}

.gross-button {
    max-width: 300px;
    font-size: 1.2em;
    padding: 10px 16px;
    line-height: 1.3;
    white-space: normal; /* Zeilenumbruch erlauben */
    text-align: center;
    background-color: #e6f4e6 !important;  /* ganz leichtes Grün */
    color: #1a4d1a !important;            /* dunkleres Grün für Text */
    border: 1px solid #b2d8b2;  /* zarter grüner Rand */
}




.bestell-umfeld {
    background-color: #fef6e9; /* sehr helle Variante von #e4ab39 */
    padding: 15px;
    border-radius: 6px;
    margin-top: -10px;
    border: 1px solid #f0d28a;
}


.platzanzeigen {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.platz-box {
    position: relative; /* bleibt ok, beeinflusst das neue fixed-tooltip nicht negativ */
    width: 18px;
    height: 18px;
    border: 2px solid #006363;
    background-color: #72ff00;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}





/* Tooltip per Mausposition (immer 20px über Cursor) */
.platz-box[data-tooltip]::after {
    content: none !important; /* altes Hover-Tooltip deaktivieren */
}

#mouse-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    transform: translate(-50%, calc(-100% - 20px)); /* 20px über Cursor */
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 6px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    display: none;
    box-shadow: 8px 5px 3px rgba(0, 0, 0, 0.4);
}



.platz-box.gefuellt {
    background-color: red;
 /*   background-color: #006363;	*/
}

.admin-modus .platz-box {
    cursor: pointer;
}

.platz-text {
    text-align: center;
    font-size: 14px;
    margin-top: 4px;
    color: #333;
}


.voll-belegt {
    position: relative;
    pointer-events: auto;
    cursor: not-allowed;
}

.voll-belegt::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffcccc;   /* hellrot */
    color: #000000;              /* schwarzer Text */
    padding: 6px 10px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border-radius: 5px;
    white-space: normal;
    width: 240px;                /* etwas breiter für den Text */
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
    z-index: 1000;
    border: 1px solid #cc0000;   /* optional: dünner roter Rand */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}


.voll-belegt:hover::after {
    opacity: 1;
}



.button-akzent[data-tooltip-zeile1] {
    position: relative;
}

.button-akzent[data-tooltip-zeile1]::after {
    content: attr(data-tooltip-zeile1) "\A" attr(data-tooltip-zeile2) "\A" attr(data-tooltip-zeile3);
    white-space: pre-line;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffdec8;     /* Weißer Hintergrund */
    color: #000000;                /* Rote Schrift */
    padding: 6px 10px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    z-index: 1000;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    text-align: center;
    max-width: 250px;
    border: 1px solid #cc0000;     /* Optional: roter Rand */
}


.button-akzent[data-tooltip-zeile1]:hover::after {
    opacity: 1;
}


.kurszeichen-label {
    font-family: "Zilla Slab", serif; /* oder andere Schrift */
    font-weight: 600; /* halb-fett */
    color: #444; /* dunkles Grau */
    font-size: 0.95em; /* etwas kleiner als Standardtext */
    margin-right: 4px; /* kleiner Abstand zur ID */
}

.kurszeichen-id {
    font-family: monospace; /* z. B. fester Zeichensatz für IDs */
    font-weight: bold; /* fett */
    color: #006363; /* petrol / oder Wunschfarbe */
    font-size: 1.1em; /* etwas größer als Standardtext */
    letter-spacing: 1px; /* leicht auseinanderziehen */
}


.checkout-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    /* table-layout: fixed; entfernt */
}



.checkout-table td {
    padding: 6px 10px;
    vertical-align: middle; /* wichtig: !important entfernt */
    border: none;

    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}




.checkout-table label {
    font-weight: bold;
    white-space: normal; /* Umbruch wieder erlauben */
}


.checkout-table td:first-child {
    text-align: right;
    padding-right: 10px;
	white-space: nowrap !important;
}



.hinweis-zahlung {
    font-size: 0.9em !important;
    font-style: normal !important;
	font-weight:bold !important;
    color: #444;           /* dezentes Grau */
    text-align: left;    /* mittig ausgerichtet */
    margin-top: 10px;
    margin-bottom: 15px;
    line-height: 1.4em;
}

.hinweis-daten {
    font-size: 1em !important;
    font-style: normal !important;
	font-weight:400 bold;
    color: #444;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

/* ===========================
   Kursseite: Checkbox "Materialien"
   =========================== */
.materialien-box {
    text-align: left;
    display: block;
    margin: 0 auto 0 0;
    max-width: 90%;
}


.materialien-box input[type="checkbox"] {
    transform: scale(1.4); /* 1.0 = Standardgröße; 1.4 = 40% größer */
    margin-right: 6px;     /* etwas Abstand zum Text */
    vertical-align: middle;
}


/* Bildgruppe: zweites Bild immer 90 % der Höhe des ersten */
.bildgruppe {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bildgruppe img:first-of-type {
  width: 100%;
  height: auto;
}

.bildgruppe img:last-of-type {
  width: 90%;
  height: auto;
}

.bildgruppe2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* optionaler Abstand zwischen den Bildern */
}

.bildgruppe2 img:first-of-type {
  width: 100%;
  height: auto;
}

.bildgruppe2 img:nth-of-type(2) {
  width: 100%;
  height: auto;
}

.bildgruppe2 img:last-of-type {
  width: 60%;
  height: auto;
}


/* Unter 500px: alle Bilder in bildgruppe & bildgruppe2 auf 90% verkleinern */
@media screen and (max-width: 670px) {
  .bildgruppe img,
  .bildgruppe2 img {
    width: 90% !important;   /* skaliert alle Bilder proportional */
    height: auto;
  }
}


/* --- Wiederverwendbarer Innenrahmen (Abstand + Schattenrahmen) --- */
.innenrahmen {
  position: relative;
  padding: 10px;
  border-radius: 0px;
}

.innenrahmen::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 2px solid #d7d7d7;
  border-radius: 2px;
  pointer-events: none;
}






/* ===== Datenschutz-Checkbox ===== */

.checkbox-wrapper {
  padding: 10px 12px;
  border: 1px solid #e6b5b5;
  background-color: #fff5f5;
  border-radius: 6px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Label: 2 Spalten – links Box, rechts Text */
.checkbox-wrapper label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px; /* Abstand des Textes zur Checkbox */
  align-items: center;   
  width: 100%;
}

/* Checkbox größer + grün */
.checkbox-wrapper input[type="checkbox"] {
  transform: scale(2.5);
  accent-color: #4caf50;
  cursor: pointer;
  margin-top: 2px;
  margin-right: 0;
}

/* Bei gesetzter Checkbox: gesamtes Feld grünlich */
.checkbox-wrapper:has(input[type="checkbox"]:checked) {
  background-color: #f0fff0;
  border-color: #a5d6a7;
}

/* Text rechts normal linksbündig */
.checkbox-wrapper .datenschutz-text {
  font-size: 14px;
  line-height: 1.5;
  color: #222;
  text-align: left;
  padding: 0;
  margin: 0;
}

/* Links im Text */
.checkbox-wrapper .datenschutz-text a {
  color: #b33b3b;
  text-decoration: underline;
}

.checkbox-wrapper .datenschutz-text a:hover {
  text-decoration: none;
  color: #992f2f;
}


.captcha-text {
    font-size: 1.0em;   /* etwas kleiner */
    font-style: italic; /* optisch dezenter – passt zu deinem Stil */
}

.captcha-label {
    font-size: 0.9em;
    font-style: italic;    /* optional – passt zu deinem Stil */
    display: inline-block; 
    margin-bottom: 0px;
}


kommentar {
    overflow-y: hidden; /* wichtig für auto-height */
}


/* Formularfelder in der Anfrage-Tabelle: immer an die Breite anpassen */
.checkout-table input[type="text"],
.checkout-table input[type="email"],
.checkout-table input[type="date"],
.checkout-table textarea,
.checkout-table select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Labels dürfen umbrechen */
.checkout-table label {
    font-weight: bold;
    white-space: normal;
    line-height: 1.4em;     /* gleiche Höhe wie Eingabefelder */
    display: inline-block;  /* stabilisiert vertikale Ausrichtung */
}


/* Erste Spalte (Labels) rechtsbündig, aber auch umbrechbar */
.checkout-table td:first-child {
    text-align: right !important;  /* überschreibt globales td{text-align:left;} */
    padding-right: 10px;
    white-space: normal;
    max-width: 180px;
    vertical-align: top;
}




@media (max-width: 480px) {
    .checkout-table td:first-child {
        width: 35%; /* Label-Spalte fixieren */
        max-width: 35%;
        text-align: right;
        white-space: normal; /* Umbruch erlaubt */
    }

.checkout-table td:last-child {
    min-width: 200px;   /* Eingabefelder bekommen festen Mindestplatz */
}

}



@media (max-width: 600px) {
    .checkout-table td {
        padding: 2px 4px; /* noch kompakter */
    }

    .checkout-table td:first-child {
        padding-right: 4px; /* Label noch näher ans Feld */
    }
	
	
.checkout-table label {
    line-height: 1.4em;
    display: inline-block;
    padding-top: 2px;
}
}

.checkout-table td:first-child {
    white-space: nowrap !important;
}

body.seite-warenkorb #main {
    padding-left: 5px !important;
    padding-right: 5px !important;
}





/* =========================
   WERBUNG – ENDVERSION
   ========================= */

/* Standard: Desktop */
.kursinfo-box {
  font-size: 24px;
}

.kursinfo-container {
  display: flex;
  align-items: center;
  background-color: #fdf4e3;
  padding: 10px 20px;
  margin-bottom:-40px;
   border-left: 10px solid #006363;
}

.kursinfo-container img:not(.promo-arrow) {
  width: 300px;
  height: auto;
  margin-right: 20px;
  max-width: 100%;
  min-width: 150px;
  flex-shrink: 1;
}




@media (max-width: 700px) {
  .kursinfo-box {
    font-size: calc(18px + (24 - 18) * ((100vw - 500px) / 200));
  }
}

@media (max-width: 600px) {
  .kursinfo-container {
    flex-direction: column;
    text-align: center;
  }

  .kursinfo-container img:not(.promo-arrow) {
    width: 80% !important;
    max-width: 260px !important;
    margin: 0 auto 0px auto !important;
  }
}


.kursinfo-container {
    animation: puls 3s infinite ease-in-out;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4); /*Schatten*/
	background-color: #f9e9c3;
	position: relative;
	
	
}

@keyframes puls {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}



.promo-arrow {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 25px !important;
    height: 24px !important;
    z-index: 10;
    animation: arrowBounce 1.8s ease-in-out infinite;
    pointer-events: none;
}


@keyframes arrowBounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}





.material-plus {
    font-size: 1.4em;
    font-weight: bold;
    vertical-align: central;
}



.linksabstandagb ul.linksabstandagb-punkte {
  list-style-type: disc !important;
  padding-left: 1.2em !important;
  margin-left: 0.8em !important;
    font-size: 0.96em !important;
  line-height: 1.3em;
  font-family: 'Zilla Slab', serif;
  font-style: italic;
  font-weight: 500;
   margin-top: 0.4em;
   margin-bottom:0.5em;
}

.linksabstandagb ul.linksabstandagb-punkte li {
  list-style-type: disc !important;
  margin-left: 0.4em !important;
}







/* Layout: 1 großes Bild links, 2 kleinere rechts untereinander (Höhen bündig) */
.kunstwerkstatt-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;

  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;

grid-auto-rows: 1fr;
}

.kunstwerkstatt-layout .bild-gross {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kunstwerkstatt-layout .bild-rechts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.kunstwerkstatt-layout .bild-rechts img {
  width: 100%;
  height: calc((100% - 20px) / 2); /* 2 Bilder + 1 Gap */
  object-fit: cover;
}

/* Mobil: KEIN Umbruch – Layout bleibt immer 2-spaltig */
@media (max-width: 420px) {
  .kunstwerkstatt-layout {
    grid-template-columns: 1fr 1fr;
  }
}