@charset "UTF-8";
/* -------------------------------------------------------------
   STYLE_2025.CSS — konsolidierte, mobile-first Version
   Enthält: Layout, Formulare, Media Queries
   Autor: ChatGPT (Optimierung basierend auf Kwerk CSS)
   Datum: 2025-10-31
------------------------------------------------------------- */

/* ========== BASIS-STYLE (Mobile First) ========== */

/* ---- Layout ---- */

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body { 	height: 100%; }
body {
	width: 100%;
	font-family: museo-sans, sans-serif;
	font-weight: 300;
	font-style: normal;	
	color: #000;
	text-align: center;
	background: none; 
	overflow-y: auto;
	 overflow-x: hidden;

 }
a:link,
a:visited,
a:hover, a:active, a:focus {	
	border: none !important;
	color: #000;
	text-decoration: none;
		}
a:visited {	
	border: none !important;
		}
a[href="#impressum"] {
	text-decoration: underline;
	}
a[href="http://www.kwerk-zug.ch"] {
	display: block;
	position: fixed; top: 10px; left: 20px;
	width: 200px; height: 200px;
	}
nav a.home:before,
.box a:before {
	font-size: 23px;
	font-family: swing-king, sans-serif;
	font-weight: 300;
	font-style: normal;
}
.box a[name="ausgebucht"] {
	padding-left: 5px;
	font-weight: 700;
	}
.box a[name="ausgebucht"]:before {
content: "J ";
margin-right: 5px;
	} 
a.document:before {  /*ersatz druch doclink!*/
content: "X ";
margin-right: 5px;
	}
a.flyer:before {  
content: " ";
		height: 20px !important;
		display: inline-block;
		vertical-align: middle;
		background-image: url(../img/icon_flyer.png);
		background-position: top left;
		background-repeat: no-repeat;
		background-size: 30px;
		padding-left: 32px;
	}

.box a[href*="formular_newsletter"]:before {
		content: " ";
		height: 20px !important;
		display: inline-block;
		vertical-align: middle;
		background-image: url(../img/icon_newsletter.svg);
		background-position: top left;
		background-repeat: no-repeat;
		background-size: 27px;
		padding-left: 32px;
	}
.box a.formicon:before,
.box a[href*="formular_mitgliedschaft"]:before,
.box a[href*="formular_foerderverein"]:before,
.box a[href*="formular_anmeldung"]:before {
	content: "p ";
	}

.box a[href*="schuldetektive.ch"]:before {
	content: " ";
		height: 26px !important;
		display: inline-block;
		vertical-align: middle;
		background-image: url("../img/logo_schuldetektive.svg");
		background-position: top left;
		background-repeat: no-repeat;
		background-size: 26px;
		padding-left: 30px;
	}
.box a[href*="schuldetektive.ch"],
.box a[name="rezension"] {
	text-decoration: none;
	font-weight: 700;
	}
.box a[name="rezension"]::before {
	display: inline-block;
	content: "\f02d";
	font: var(--fa-font-solid);
	margin-left: 4px;
	margin-right: 8px;
	}
.box a.doclink {
	text-decoration: none;
	font-weight: 700;
	}
.box a.doclink::before {
	display: inline-block;
	content: "\f15c";

	font: var(--fa-font-solid);
	margin-left: 4px;
	margin-right: 8px;
	}






.box a.targettinglink {
	text-decoration: none;
	font-weight: 700;
	}
.box a.targettinglink::before {
	display: inline-block;
	content: "\f0c1";

	font: var(--fa-font-solid);
	margin-left: 4px;
	margin-right: 8px;
	}
.box a.torte:before {
/*content: "l "; Herz Amor mit Pfeil */
/*content: "g "; Torte mit Kerzen */
content: "l ";
	}
/*.box a[href*="video"]:before {
content: "C ";
	} */

.box h4:not(:first-child){
	margin-top: 39px;
}
.box img + h4, 
.box section + h4 {margin-top: 0px!important;}

nav a.home:before,
.box a[href$="index.php"]:before,
.box a[href$="kursangebot"]:before {
content: " ";
	display: inline-block;
width: 26px;
height: 24px;
	margin-right: 10px;
background-image: url("../img/nav_home.svg");
background-size: contain;
background-repeat: no-repeat;
text-decoration: none!important;	
}
nav a.home:before {

background-image: url("../img/nav_home_we.svg");
	
}
nav a.home:hover {text-decoration: none;}
.box a.nosign:before {
	content: inherit;
	}
.space {
	padding-top: 13px;
	}
.box a[href^="https://vimeo.com/712831558"],
.box a[href^="https://vimeo.com/531307044"],
.box a[href^="https://twitter.com"],
.box a[href^="https://www.facebook.com/sharer"] {
	background-image: url(../img/nav_some.svg);
		display: block;
		height: 22px;
		width: 22px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 1px 1px;
		text-decoration: none;	
		}
.box a[href^="https://twitter.com"] {
		width: 29px;
		background-position: -142px 1px;
		}
.box a[href^="https://vimeo.com/712831558"],
.box a[href^="https://vimeo.com/531307044"] {
		background-position: -56px 1px;
		}
.box a[href^="https://vimeo.com/712831558"]:after,
.box a[href^="https://vimeo.com/531307044"]:after {
	content: attr(alt);
	white-space: nowrap;
	padding-left: 30px;
	font-weight: 700;
		}	
.box a[href^="https://www.facebook.com/sharer"]:after {
	content: "Teilen";
	white-space: nowrap;
	padding-left: 30px;
	font-weight: 700;
	}
.box a.english[href^="https://www.facebook.com/sharer"]:after {
	content: "Share";
	white-space: nowrap;
	padding-left: 30px;
	font-weight: 700;
	}
.box a[href^="https://twitter.com"]:after {
	content: "Tweet";
	white-space: nowrap;
	padding-left: 30px;
	font-weight: 700;
	}
a[target="_blank"] {
	text-decoration: underline;
	}
p {	
		font-size: 18px;
		line-height: 24px;
		margin: 12px 0px 12px 0px;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
		}
p.bold {
	font-weight: 700!important;
	 }
p.liste {
		margin: 0px 0px 6px 12px !important;
}
p.liste:before {
content: "• ";
margin-right: 5px;
	}
h1 {	
	font-family: museo, serif;
	font-weight: 700;
	/*font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (1280 - 320)));*/
	font-size: calc(min(25px, calc(19px + (25 - 19) * ((100vw - 320px) / (1280 - 320)))));
	line-height: 125%;
	}
	
h3, h3 a  {	
	font-family: museo, serif;
	font-weight: 700;
	font-size:22px;
	line-height: 26px;
	padding-top: 22px;
	} 
h2 {	
	font-family: museo, serif;
	font-weight: 700;
	font-size:26px;
	line-height: 32px;
	padding-top: 8px;
	}
h4 {
	font-family: museo, serif;
	font-weight: 300;
	font-size:22px;

	line-height: 26px;
	}

.szquadrat {
	width: 128px; height: 128px; margin: 4px; padding: 8px; background-color: #000; display: inline-block;
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}
#wrapper { 
	 min-height: 100%;
	 margin: 0;
	 padding-bottom: 20px;
	 width: 100%;
	 text-align: left;
	 }
#home #wrapper { 
	 background-image: url("../img/bg-blutblau.png");
	 background-image: url("../img/bg-blutblau.svg");
	 background-size: 2385px;
	 background-position: -42px -3px;
	 background-repeat: no-repeat;
	 }
	 
/************************ HEADER FORMAT **************************/		

	header {
	width: 100%;
	height: 196px;
	color: #000;
	position: fixed; /*fixed für die Folgeseiten!*/
	top: 0;
	z-index: 2;
	background-color: rgba(255,255,255,0.8);
	background-image: url(../img/kw-logo-sc-3z-01.png) , url(../img/bb-header.png);
	background-image: url(../img/kw-logo-sc-3z-01.svg) , url(../img/bb-header.svg);
	background-size: 185px, 2385px;
	background-position: 22px 15px, -42px -3px;
	background-repeat: no-repeat;
	display: flex;
	justify-content: flex-start;
		} 
	header .home a {
		display: block;
		width: 200px;
		height: 180px;
		float: left;		
		}

		header ul  { 
		display: flex;
		width: 790px;

			padding-top: 23px;
			padding-right: 40px;
	flex-flow: row nowrap;
	justify-content: flex-end;
			}
		header ul li {
			list-style-type: none;
			margin-right: 8px;
			}
		
		header ul li:nth-child(3) {
		margin-right: 70px;
			}

header ul li form {
		padding: 0px!important;
}
header ul li button {
		height: 38px;
		width: 98px;
		border: solid 3px #000;
		background-color: transparent;
		border-radius: 10px!important;
		font-family: museo, serif;
		color: #000;
		font-weight: 700;
		font-size: 16px;
		cursor: pointer;
		}

		header ul li a { 
		display: block;
		height: 38px;
		width: 38px;
		background-position: top left;
		background-repeat: no-repeat;
		background-image: url(../img/nav_some.svg); 
	} header ul li a[href^="https://www.facebook"] {
		background-position: 1px 1px;
	}  header ul li a[href^="https://vimeo"] {
		background-position: -97px 1px;
	}	header ul li a[href^="https://www.insta"] {
		background-position: -48px 1px;
	}	header ul li a[href="../index.php"],
		header ul li a[href="eng/index.php"] { /*Sprachwechsel*/
		font-family: museo, serif;
		font-weight: 700;
		font-size: 16px;
		line-height: 42px;
		text-align: center;
		background-position: -298px 1px;
	} 
	/************* border: 1px solid red; ******************/
		
	#menu {
		display: flex;
		flex-flow: column nowrap;
		width: 100%;
		max-width: 990px;
		align-items: flex-end;
		height: 60px;
		}	

	#menu label { 
		position: fixed;
		display: block;
		float: left;
	   margin-top: 20px;
	   padding-left: 20px;
 	   width: 40px;
	   height: 30px;
	   z-index: 11;
	} 
	#menu input {display:none}
	.line { 
	   position: absolute; 
	   left: 2px;
	   height: 5px; 
	   width: 40px; 
	   background: #000; 
	   border-radius: 2px;
	   display: block; 
	   transition: all 1s; 
	   transform-origin: center; 
	}

	.line:nth-child(1) { top: 8px; }
	.line:nth-child(2) { top: 20px; }
	.line:nth-child(3) { top: 32px; }
	
	#menu input:checked + label .line:nth-child(1){
	   background: rgba(255,255,255,1); 
	   transform: translateY(12px) rotate(-45deg);
	}
	
	#menu input:checked + label .line:nth-child(2){
	   opacity:0;
	}
	
	#menu input:checked + label .line:nth-child(3){
	   background: rgba(255,255,255,1); 
	   transform: translateY(-12px) rotate(45deg);
	}
/*****************Toggle Navigation*******************/	
	header .home a span,
	header ul li a span,
	#menu li a span {display: none;}
			
/***************************************************************		
Hier folgt das Hamburgermenu auf der farbigen Fläche

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

*/

#menu input ~ nav {
	background-color: rgba(247,71,71,0.98);
	position: fixed;
  top: 0;  
  left:  100%;
  width: 100%; 
  height: 100%;
  max-height: 100%;
	padding-top: 175px;
	text-align: center;

	z-index: 10;
	transition: 0.5s; 
 overflow-y: auto;
 overflow-x: hidden; 
	display: flex;
	flex-flow: column nowrap; /*column statt row wrap*/
	justify-content: flex-start;
	align-content:flex-start;
	

} 
#menu input:checked ~ nav {
  left: 0; 
  transition-delay: 0.5s;
}	

#menu input ~ nav::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 95%;
	height: 185px;
	display: block;
	background-image: url(../img/kw-logo-we-3z-01.png);
	background-image: url(../img/kw-logo-we-3z-01.svg);
	background-position: 22px 15px;
	background-repeat: no-repeat;
	background-size: 185px;
}
#menu input ~ nav > ul {
	position: absolute;
  /*  top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
	
	top: 220px;
	left: 50%;
    transform: translate(-50%);	
	min-width: 340px;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	text-align: left;	
	display: flex;
	flex-flow: column;
	list-style-type: none;
	padding-left: 33px!important;
	}


	.item {
 /*   border-top: 1px solid white; 
    overflow: hidden; */
}

.btn {
    display: block;
    position: relative;
    padding: 8px 0;
    background: none;
	color: rgba(255,255,255,1)!important;
	font-family: museo-sans-rounded, sans-serif;
	font-weight: 300;
	font-style: normal;
 	font-size: 24px;
  	line-height: 24px;	
}
/*
.btn::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    left: 20px;
    bottom: -7px;
    transform: rotate(45deg);
}
*/

.smenu {
    overflow: hidden;
	-webkit-transition: max-height 1s;	
	-moz-transition: max-height 1s;	
	-o-transition: max-height 1s;
	transition: max-height 1s;	
    max-height: 0;
	font-size: 16px !important;
	line-height: 18px;
}



.smenu a {
  display: block;
  background: none !important;
  position: relative;
  text-decoration: none;
  color: rgba(255,255,255,1);
  padding: 4px 0px 4px 12px;

/*		-webkit-transition: opacity 0.5s ease;	
	-moz-transition: opacity 0.5s ease;	
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;	
	opacity: 0.1;*/
}
.item:target .smenu {
    max-height: 50%;
} /*.item:target .smenu a {
    opacity: 1;
} */

.smenu a::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 90%;
    background: #fff;
    left: 0;
    top: 0;
    transition: .3s;
    opacity: 0;
}

.smenu a:hover::before {
    opacity: 1;
}
.item > .home {
	margin-left: 1px;
	color: white;	
}
#zurueck {margin-top: 16px; border: none;}


/*********************** HOME FORMAT **************************/	
		#kwerk  {
			width: 100%;
			min-width: 1024px;
			padding: 130px 0px 0px 0px;  /*210 enspricht der Höhe vom Menubar*/
			  display: flex;
			  flex-flow: column wrap;
			  min-height: 930px; 
			}
	/*	#kwerk h1, 		
		#kwerk a {
		font-family: museo, serif;
		font-weight: 700;
		font-size: calc(18px + (34 - 18) * ((100vw - 320px) / (1280 - 320)));	
		line-height: 150%;

			}*/
			

		#kwerk h1.kinder {
			margin: 50px 0 0 30px;
			}

/**********************************/




#kwerk h1.kompetenz { 
		width: 105px;
		height: 105px;
		margin: -135px 0 200px 330px;
		display: flex;
		justify-content: center;
		align-items: flex-start;

		}
	#kwerk h1.kompetenz::after { 
				content: attr(title);
				white-space: nowrap;
		display: block;
		position: absolute;
				margin: 105px 0 0 25px;
z-index: 1;
}

	#kwerk h1.kompetenz a::after { 
				content: " "; 
				display: block;
		position: absolute;
				width: 170px;
				height: 28px;
				margin: 5px 0; 
				z-index: 99;
				 }
	#kwerk h1.kompetenz a::before {
			display: block;
		    content: " ";
			width: 105px;
			height: 105px;
			margin-left: 15px;
			background-image: url(../img/K-kompetenz.png);
			background-image: url(../img/K-kompetenz.svg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
		animation: pulse 0.6s ease;
}	
	
			#kwerk h1.kompetenz a span { display: none; }


		#kwerk h1.kurse {
			height: 125px;
			margin: -77px 0 0 515px;
			}
			

		#kwerk h1.kurse a.pulse {
			float: left;
			display: block;
			width: 110px;
			height: 110px;
			background-image: url(../img/K-kurse.png);
			background-image: url(../img/K-kurse.svg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			}
			#kwerk h1.kurse a span { display: none; }
			
			/************Herzschirttmacher**************/
			@-webkit-keyframes pulse {
			0% { -webkit-transform: scale(1.0); }
			50% { -webkit-transform: scale(0.95); }
			100% { -webkit-transform: scale(1.0); }
			}
			
			@-moz-keyframes pulse {
			0% { -moz-transform: scale(1.0); }
			50% { -moz-transform: scale(0.95); }
			100% { -moz-transform: scale(1.0); }
			}
			
			@keyframes pulse {
			0% { transform: scale(1.0); }
			50% { transform: scale(0.95); }
			100% { transform: scale(1.0); }
			}
			

			.pulse, #kwerk h1.kompetenz a:hover:before {
			-webkit-animation-name: pulse;
			-webkit-animation-duration: 2s;
			-webkit-animation-iteration-count: infinite;
			-moz-animation-name: pulse;
			-moz-animation-duration: 2s;
			-moz-animation-iteration-count: infinite;
			animation-name: pulse;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			}
			/************Herzschirttmacher**************/
			
			
		#kwerk h1.kurse a:after { 
				content: " ";
				display: block;
				width: 235px;
				height: 24px;
				margin-top: 75px;
				margin-left: 100px; 
				 }
		#kwerk h1.kurse:after { 
				content: attr(title);
				white-space: nowrap;
				margin-top: 75px;
				margin-left: -15px;
				float: left; }






		#kwerk h1.kultur { 
			height: 220px;
			margin: 22px 0 0 900px;
			}	
		#kwerk h1.kultur a {
			display: block;
			width: 200px;
			height: 200px;
			background-image: url(../img/K-news.png);
			background-image: url(../img/K-news.svg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			text-align: center;
		} 
		@keyframes shake {
			  0% { transform: translate(1px, 1px) rotate(0deg); }
			  10% { transform: translate(-1px, -2px) rotate(-1deg); }
			  20% { transform: translate(-3px, 0px) rotate(1deg); }
			  30% { transform: translate(3px, 2px) rotate(0deg); }
			  40% { transform: translate(1px, -1px) rotate(1deg); }
			  50% { transform: translate(-1px, 2px) rotate(-1deg); }
			  60% { transform: translate(-3px, 1px) rotate(0deg); }
			  70% { transform: translate(3px, 1px) rotate(-1deg); }
			  80% { transform: translate(-1px, -1px) rotate(1deg); }
			  90% { transform: translate(1px, 2px) rotate(0deg); }
			  100% { transform: translate(1px, -2px) rotate(-1deg); }
			}
		#kwerk h1.kultur a:hover {
			  animation: shake 0.5s;
			  animation-iteration-count: infinite; 
			}
		#kwerk h1.kultur a span {
			display: none;
		} 

/*********************************************/

.kontinuitaet {
	
   height: 282px;
   width: 290px;
   perspective: 1500; /* Hier wird die Perspektive der gesamten Szene festgelegt. Der Wert hat Auswirkung auf die Verzerrung 
   float: left;*/
	margin: -80px 0 0 510px;
}

.kontinuitaet:hover .flip { 
   transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */ 
}

.kontinuitaet .front { 
			background: url(../img/K-kontinuitaet.png) 0 0 no-repeat;
			background: url(../img/K-kontinuitaet.svg) 0 0 no-repeat;
}

.kontinuitaet .back { 
			background: url(../img/K-werkschau.png) 0 0 no-repeat;
			background: url(../img/K-werkschau.svg) 0 0 no-repeat;
}
.kontinuitaet .look { 
			background: url(../img/K-showcase.png) 0 0 no-repeat;
			background: url(../img/K-showcase.svg) 0 0 no-repeat;
}
.flip {
   transition: .5s /* Die Drehung soll 0,5 Sekunden dauern */;
   transform-style: preserve-3d; /* Kind-Elemente  (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
   position: relative;
   height: 100%;
}

.front,
.back,
.look{
   backface-visibility: hidden /* Die Rückseite von Elementen soll unsichtbar sein */;
   position: absolute;
   width: 100%;
   height: 100%;
}

.front { z-index: 2; }

.back, .look {
   transform: rotateY(180deg) /* Die Rückseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */;
   z-index: 1;
}

/***********************************************/

	#kwerk h1.kreativitaet {
			display: block;
			width: 1040px;
			margin-top: 105px;
			text-align: right;
		
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
					width: 1040px;

			}
	#kwerk h1.kunst { 
		width: 130px;
		height: 130px;
		margin: -285px 0 0 210px;
		display: flex;
		justify-content: center;
		align-items: flex-start;

		}
	#kwerk h1.kunst::after { 
				content: attr(title);
				white-space: nowrap;
				margin-top: 55px;
				margin-left: 10px;
				float: left; }

	#kwerk h1.kunst a::after { 
				content: " ";
				display: block;
		position: absolute;
				width: 125px;
				height: 24px;
				margin: -70px 0 0 250px; 

				 }
	#kwerk h1.kunst a::before {
			display: block;
		    content: " ";
			width: 125px;
			height: 125px;
			margin-left: 125px;
			background-image: url(../img/K-kunst.png);
			background-image: url(../img/K-kunst.svg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			transition: transform 5s ease-in-out;
	/*	animation: rotation 6s infinite linear; */
		}	
	#kwerk h1.kunst a:hover:before {
transform: rotate(360deg);
}
/*
@keyframes rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}*/

	#kwerk .kontinuitaet a span,
	#kwerk .kunst a span { display: none; }

/**********************************************/

#kwerk h1.schenken {
	position: absolute;
	top: 390px;
	left: 455px;
	width: 37px!important;
}
#kwerk .schenken .icon {
      cursor: pointer;
}
#kwerk .schenken .fa-circle {
    color: rgba(29,37,192,1.0);
}
#kwerk .schenken .fa-plus {
	color: white;
}
   

    .text-container {
      display: inline-block;
      overflow: hidden;
      height: 1.1em;
      white-space: nowrap;
      vertical-align: top;
      text-align: right; 
      width: 258px;
	  position: relative;
	  margin-top: -37px;
	  margin-left: -258px;	
    }
    .animated-text {
      display: inline-block;
      transform: translateX(258px); /* Startposition rechts ausserhalb des Containers */
	  will-change: transform;
	  transition: transform 1s linear;
	transition-delay: 6500ms;
	  transition-timing-function: steps(8, end);
    }
    .icon:hover + .text-container .animated-text {
		 transform: translateX(0); 
			transition-delay: 0ms;
/* Text von rechts nach links einblenden */
    }
/********************Bildernavigation**********************/		
		
	   #kursangebot {	
			  display: flex;
			  flex-flow: column wrap;
			  padding: 140px 0px 0px 10px; /*nicht ganz die Höhe von Menubar*/
		}
  

	/*	#kursangebot nav { 
		  margin-left: 0px;
		 
				} */
			.portrait ul, 
			#print ul, 
			#kursangebot nav ul {
			min-width: 800px;
			display: flex;
			flex-flow: row wrap;
			}
/************/			
			.portrait ul li {
			list-style-type: none;
			width: 320px;
			height: 196px;
			margin: 15px 30px 40px 0px;
			background-repeat: no-repeat;
			background-size: cover !important;
			padding-top: 225px;
			font-weight: 700;
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
			opacity: 0.9;
			}
			.portrait ul li:hover  {
			-webkit-filter: grayscale(0%);
			filter: grayscale(0%);
			opacity: 1;
			}
/************/			
		#print ul li, 
		#kursangebot nav ul li {
			list-style-type: none;
			width: 320px;
			height: 196px;
			margin: 15px 10px 70px 20px;
			background-repeat: no-repeat;
			background-size: cover !important;
			padding-top: 225px;
			font-weight: 700;
			}
			#print ul li  {
			margin: 15px 30px 40px 0px;
			}
	/*	#kursangebot nav ul li:nth-child(1),*/
		#kursangebot nav ul li.hide  {
			display: none;
			}
		#kursangebot nav ul:nth-child(2) {
			display: none;
			}
		.portrait ul li a span,
		#print ul li a span {display: none;}
		#kursangebot nav ul li a { 
		    display:block; 
		    padding-top: 225px;
		    margin-top: -225px; /*mit diesen Einstellungen das Bild als Link aktivieren*/
			font-size: 22px;
			line-height: 25px;
			}
		.portrait ul li a:before, 
		#print ul li a:before, 
		#kursangebot nav ul li a:before,
		#kursangebot nav ul li a:after {
			display: block;
			font-weight: 300;
			font-size: 16px;
			line-height: 20px;
		}
		#print ul li a:before{
			margin-top: 6px;		
} 

		#kursangebot nav ul li a:before  {
    content: attr(data-title) "\A";
    text-transform: uppercase;
    color: white;
    font-weight: 500;
    margin-top: -26px;
    margin-bottom: 6px;
    padding: 3px;
    background-color: rgba(29, 37, 192,0.77);
    text-align: right;
			}
		#kursangebot nav ul li a.sndcol:before  {
    background-color: rgba(247,71,71,0.88);
} 
	#kursangebot nav ul li a.trdcol:before  {
    background-color: rgba(131, 137, 249,0.8);
} 
		#kursangebot nav ul li a:after  {
			content: attr(data-line) "\A";
			white-space: pre;  
			}
		.portrait ul li a:before,
		#print ul li a:before {  
			content: attr(data-line) "\A";
	font-family: museo-sans, sans-serif;
	font-weight: 300;
			}
		.portrait ul li a:after,
		#print ul li a:after { 
			content: "\A" attr(data-link);
		}
/********************Bildernavigation**********************/		
.schule .box { display: flex;
	flex-direction: row;
	padding: 196px 20px 0px 30px;  /*196 enspricht der Höhe vom Menubar*/
        }
#home .box { display: flex;
	flex-direction: row;
	padding: 60px 20px 0px 30px;  /*196 enspricht der Höhe vom Menubar*/
        }
.box {  display: flex;
	flex-direction: row;
	padding: 0px 20px 0px 30px; 
	margin-top: -60px; /*-60 die Höhe vom Menubar*/
        }

	
#angebot
	{
	order: 2;
	width: 770px;
}
#home #angebot
	{
	order: 2;
	width: 770px;
	align-self: flex-end;
}

#angebot section {
	padding-top: 210px;
	
}
#angebot section:first-of-type {
	padding-top: 0px;
}
#angebot section:last-of-type {
	padding-bottom: 30px;
}
.cv h2 + p {
	margin: 0px 0px 12px 0px;
}
.cv p > a {
	text-decoration: none;
	font-weight: 500;
}


/************** Darstellung der Kurse **********************/
p.kurse_details:first-of-type  {		
		padding-top: 30px;
		}
p.kurse_details   { 
	padding-top:0px;
	margin: 0px 0px 0px 120px;
	text-indent: -60px;
}
p.kurse_details:before   {
	content: attr(data-label);
	display: inline-block;
	min-width: 60px;
	}
p.kurse_details[data-label="Leitung:"] a:link ,
p.kurse_details[data-label="Teacher:"] a:link {
	text-decoration: underline !important;
	}
/***********************************************************/	
#impressum {
	order: 1;
	width: 350px;
	padding-right: 25px;
	align-self: flex-end;
	margin-bottom: 30px;
 }	
 	
.start {
	align-self: flex-start !important;
	padding-top: 310px;
}	
#dsvgo {
	margin-top: 40px;
	margin-left: 20px;
	width: 740px;
 }
#dsvgo > p {
	font-size: 16px;
	line-height: 20px;
	color: rgba(0,0,0,1);
	 
	 }
.kbs-logo,
#impressum a[href^="https://bildschulen.ch"] {
		display: block;
		height: 50px;
		width: 165px;
		padding-top: 55px;
		background-image: url(../img/logo_kbs.svg); 
		background-position: bottom left;
		background-repeat: no-repeat;
		background-size: 165px;
		
	} #impressum a[href^="https://bildschulen.ch"]::before {
			content: "Mitglied der";
			display: block;
			height: 50px;
			width: 165px;
			margin-top: -50px;
			font-family: museo-sans, sans-serif;
			font-weight: 300;
			font-style: normal;
			font-size: 18px;
			line-height: 24px;

}	 	.kbs-logo span,
		.box a[href^="https://bildschulen.ch"] span {display: none;}	 
.box img, section.titelbild  {
	object-fit: cover; 
	width: 100%;
	max-width: 760px;
	height: auto;
	max-height: 500px;
	/*margin-bottom: 12px;*/
	padding-bottom: 0px!important;
	 display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
	position: relative;
	}

.slider {
  position: relative;
  width: 400%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  animation: 30s cubic-bezier(1, 0.95, 0.565, 1) sliding infinite;
}
.slide {
  position: relative;
  min-width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
}
@keyframes sliding {
  0% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}


.box a.local {
	font-weight: 700;
	}

/************Parnterlog**************/	
.MfU { 
    margin-top: 60px;
    text-align: left; /* optional, Überschrift zentrieren */
}

.partner {
    display: flex;
    flex-wrap: wrap;        /* mehrere Reihen wenn nötig */
    justify-content: flex-start; /* gleichmäßig zentriert */
    gap: 20px 30px;         /* vertikaler und horizontaler Abstand */
    margin-top: 30px;
    padding: 0;
    list-style: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.partner li {
    flex: 0 1 auto;         /* flexibel, aber max. Inhalt */
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner li a {
    display: block;
    height: 50px;            /* Basis-Höhe */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Logos individuell zuweisen */
.partner li a[href^="https://www.beisheim-stiftung.com"] { background-image: url(../img/logo_beisheim.svg); width: 160px; height: 44px; }
.partner li a[name="AEHS"] { background-image: url(../img/logo_AEHS.png); width: 160px; height: 60px; margin-top: -20px; }
.partner li a[href^="https://www.glencore.ch"] { background-image: url(../img/logo_glencore.svg); width: 140px; }
.partner li a[href^="https://www.korporation-zug.ch"] { background-image: url(../img/logo_korporation.svg); width: 190px; height: 44px; }
.partner li a[href^="https://www.ref-zug.ch"] { background-image: url(../img/logo_ref_kirche_zug.svg); width: 130px; }
.partner li a[href^="https://www.cham.ch"] { background-image: url(../img/logo_cham.svg); width: 130px; }
.partner li a[href^="https://www.neuheim.ch"] { background-image: url(../img/logo_neuheim.svg); width: 155px; margin-top: 10px; }
.partner li a[href^="https://www.unteraegeri.ch"] { background-image: url(../img/logo_unteraegeri_sw.svg); width: 140px; margin-top: 6px; }
.partner li a[href^="https://www.oberaegeri.ch"] { background-image: url(../img/logo_oberaegeri.svg); width: 190px; margin-top: 10px; }
.partner li a[href^="https://www.zg.ch"] { background-image: url(../img/logo_kanton.svg);  background-position-x: -5px; width: 270px; height: 70px; margin-top: -10px; }
.partner li a[href^="https://www.stadtzug.ch"] { background-image: url(../img/logo_stadt.svg); background-position-x: 0px; width: 80px; }
.partner li a[href^="https://www.migros-kulturprozent.ch"] { background-image: url(../img/logo_migros.svg); width: 100px; height: 35px; margin-top: 10px; }
.partner li a[href^="https://www.baar.ch"] { background-image: url(../img/logo_baar.svg); width: 76px; }

.partner li a span {
    display: none; /* Text ausblenden */
}

/* Optional: Responsive Anpassung */
@media (max-width: 399px) {
    .partner li a {
        height: 40px;
        max-width: 100px;/* evtl. Breiten anpassen, z.B. max-width */
    }
    .partner li a[href^="https://www.zg.ch"] { max-width: 220px; }

}


/************CONTENT**************/	



/* ---- Formulare ---- */
/*Formulare*/
form {
	font-size: 18px !important;
	padding: 210px 20px 0px 20px;  /*210 enspricht der Höhe vom Menubar*/
	text-align: left;
	width: 100% !important;
	
	}
fieldset {
	border: none;
	} 
fieldset ul {
	margin: 0;
	padding: 15px 0 0 0;
	list-style-type: none;
	}	
fieldset li {
	margin: 0 0 12px 0;
	padding: 0;
	width: 100%;
	}
li.selector:after {
	content:attr(data-choice);
	font-weight: 700;
	}	
label {
	margin-top: 10px;
	display: block;
	width: 100%;
	}
.selector,
.label {
padding-top: 30px;	
font-weight: 700;
	}
	
label[title="Pflichtfeld"]:before {
	content: "*";
	margin-right: 6px;
	}
label[title="Pflichtfeld"]:after {
	font-weight: 700;
	}
textarea, select, input[type="text"] {
	display: block;
	width: 100%;
	height: 35px;
	border: none;
	padding: 0;
	background-color: rgba(105,131,138,0.2);
	color: #000;
font-family: museo-sans, sans-serif;
font-weight: 300;
font-style: normal;
	font-size: 18px !important;
	}
textarea, select {
	height: 160px !important;
	padding: 6px;
	}



.half {float: left; width: 49.5% !important; margin-bottom: 12px;}
.medium {float: left; width: 65% !important; margin-bottom: 12px;}
.small {float: left; width: 34% !important; margin-bottom: 12px;}
.space {margin-right: 1%;}	
input[type="submit"] {
	margin: 0 0 0 6px;
	color: rgb(141, 141, 141);
	}
input[type="reset"] {
	margin: 0 0 0 6px;
	color: rgb(141, 141, 141);
	}
.btnschicken, .btnzurueck {
	font-size: 16px;
    pointer-events: auto;
    z-index: 10; /* Oder sicherstellen, dass kein Overlay die Buttons verdeckt */
}

input[type="reset"], input[type="submit"] {
	font-weight: 700;
	margin: 44px 6px 0px 0px;
	float: left;
	width: 160px;
	height: 35px;
	color: #000;
	text-align: center;
	border: none;
	background-color: rgba(105,131,138,0.2);
	} input[type="reset"]:hover, input[type="submit"]:hover {
	background-color: rgba(105,131,138,0.1);
	}

input[name="Rewrite"] {
		display: none;
	}
input[name="Bemerkung"] {
		display: none;
	}
li.selectbox {
	height: 35px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	}
/* Customize the label (the container) */
.container {
  display: inline-block; 
  float: left;
  height: 35px;
  width: 35px;
  position: relative;
  margin-top: -5px;
  margin-right: 10px;
  margin-bottom: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 35px;
  width: 35px;
	background-color: rgba(105,131,138,0.2);
  border: none;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
	background-color: rgba(105,131,138,0.1);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
	background-color: rgba(105,131,138,0.1);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left:10px;
  top: 1px;
  width: 10px;
  height: 22px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}
li:nth-child(16),
li:nth-child(22),
li:nth-child(28) {
	margin-top: 21px;
	}
/*label.container:after {
	content: attr(title);
	white-space: nowrap;
	width: 100%;
	display: inline-block;
	margin-top: 8px;
	}
*/

#fehler_betrag,
#fehler_klasse,
#fehler_haus,
#fehler_groesse,
#fehler_lehrer,
#fehler_vorname,
#fehler_name,
#fehler_organisation,
#fehler_geburtstag,
#fehler_strasse,
#fehler_plz,
#fehler_ort,
#fehler_eltern,
#fehler_tel,
#fehler_teilnehmer,
#fehler_mail, 
#fehler_atmail,
#fehler_auswahl,
#fehler_choose,
#fehler_agb,
#fehler_message { 
	position: absolute;
	margin-top: 0px;
	width: 100%;
	font-weight: 700;
	background-color: #FFF;
	display:none;
} 
.form_danke {
	font-weight: 700;
	
	
} 


/**********Optionsschlater Gruppe **********/
li div {
	display: inline-block;
	margin-right: 15px;
}


 input[type="radio"]
{
  appearance: none;
}

 input[type="radio"] + label
{
  cursor: pointer;
  position: relative;
  padding-left: 30px;
  line-height: 20px;


}

 input[type="radio"] + label::before
{
  content: "";
  display: inline-block;
  width: 20px;
  aspect-ratio: 1;
  border: 1px solid rgba(105,131,138,0.5);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.3s;
}

  input[type="radio"] + label::after
{
  content: "";
  display: inline-block;
  width: 10px;
  aspect-ratio: 1;
  border: 1px solid rgba(105,131,138,0.3);
  background: rgba(105,131,138,0.3);
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.3s;
}

 input[type="radio"]:checked + label::after
{
  opacity: 1;
}

/**************************/


/* ---- Media Queries ---- */
@charset "UTF-8";
/* CSS Document */
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Schriftgrössen */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (max-width : 1024px) {
#home #wrapper { 
	 background-size: 2235px; /* um 150px weniger */
	 background-position: -42px -3px;
	 overflow: auto;
	 }
	header {
	background-size: 185px, 2235px;
	background-position: 22px 15px, -42px -3px;
		} 
/**************** HOME FORMAT *****************/		
		#kwerk  {
			min-width: 300px;
			width: 100%;
			max-width: 1024px;
			}
	
#kwerk h1.kinder {
			order: 1;
			margin: 10px 0 0 30px;
			}
		#kwerk h1.kurse {
			margin: 0 0 0 480px;
			order: 2;
			}

		#kwerk h1.kultur, #kwerk h1.culture {  /*News*/
			order: 3;
			margin: 0 0 0 780px;
			}	
	#kwerk h1.kultur a, #kwerk h1.culture a {
			width: 190px;
			height: 190px;
		} 
	#kwerk h1.kunst {
		order: 4;
				width: 110px;
		height: 110px;
				margin: -110px 0 0 180px;
	}
	#kwerk h1.kunst::after { 
				margin-top: 77px;
				margin-left: 5px;
			 }
	#kwerk h1.kunst a::after { 
				margin: -50px 0 0 250px; 
				 }
	
		#kwerk .kontinuitaet {
		 	order: 5;
			margin-left: 460px;
			}		
		#kwerk h1.kreativitaet {
			order: 7;
			max-width: 100%;
			padding: 10px;
			text-align: right;
			margin-top: 40px;
			}	
		#kwerk h1.kompetenz {
			order: 6;
		width: 80px;
		height: 80px;
		margin: -135px 0 0 220px;	
			}	
	
	#kwerk h1.kompetenz::after { 
				margin: 85px 0 0 25px;
}
	#kwerk h1.kompetenz a::before {
			width: 80px;
			height: 80px;
	}
	
	#kwerk h1.schenken {
	top: 365px;
	left: 420px;
}
	.text-container {
      width: 228px;
	  position: relative;
	  margin-top: -30px;
	  margin-left: -228px;	
    }
	
		#kursangebot nav ul {
			display: flex;
			flex-flow: row wrap;
			}
		#kursangebot nav ul li {
			width: 300px !important;
			height: 170px;
			padding-top: 225px;
			}

}
@media only screen and (max-width: 768px) {
/**************** HOME FORMAT *****************/		
#home #wrapper { 
	 background-size: 1700px; /* um 685px weniger */
	 background-position: -36px 80px;
	 }
	header {
	background-size: 185px, 1700px;
	background-position: 22px 15px, -36px 80px;
	justify-content: space-between;
		} 
	
	
header ul  { 
 			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-end;
			width: 100%;
			height: 120px;
			padding-right: 0px!important;
			margin-right: 78px;
			}

	
	#menu {
		max-width: 748px;
		padding-right: 20px;
}

	#kwerk h1.kinder {
			order: 1;
			margin: 10px 0 0 30px;
			}
		#kwerk h1.kurse {
			height: 80px;
			margin: 20px auto;
			order: 2;
			}

		#kwerk h1.kurse a.pulse {
			width: 80px;
			height: 80px;
			}
		#kwerk h1.kurse a:after { 
				margin-top: 45px;
				margin-left: 55px;
				 }
			#kwerk h1.kurse:after { 
				margin-top: 30px;
				margin-left: 0px;
				 }
		#kwerk h1.kultur {  /*News*/
			order: 3;
			margin: -15px auto;
			}	
	#kwerk h1.kultur a, #kwerk h1.culture a {
			width: 190px;
			height: 190px;
		} 
	#kwerk h1.kunst {
		order: 4;
				margin: -76px 0 0 0;
	}
	#kwerk h1.kunst::after { 
				margin-top: 77px;
				margin-left: 5px;
			 }
#kwerk h1.kunst a::after { 
				margin: -50px 0 0 250px; 
				 }
	
		#kwerk .kontinuitaet {
		 	order: 5;

			margin: 0px auto;
			}		
	
		#kwerk h1.kreativitaet {
			order: 7;
			max-width: 100%;
			padding: 10px;
			margin-top: 40px;
			text-align: right;
			}	
	
#kwerk h1.kompetenz {
			order: 6;
		width: 80px;
		height: 80px;
		margin: -40px 0 0 40px;
			}	
	


	
	
	
/********************Bildernavigation**********************/		
#home .box,
.box,
.schule .box	{  
	flex-direction: column;
        }
	
	
#angebot
	{
	order: 1;
	max-width: 100%;
}
	
#impressum {
	width: 100%;
	order: 2;
	margin-top: 30px;
	align-self: flex-start;
}
form {
	padding: 210px 0px 0px 0px !important;  /*210 enspricht der Höhe vom Menubar*/
	}
#dsvgo {
	margin-left: 0px;
	width: 100%;
 }	

}
@media only screen and (max-width: 479px) {
header ul  { 
 			display: flex;
			flex-flow: row wrap;
			justify-content: flex-end;
			width: 100%;
			height: 120px;
			margin-left: calc((100% - 460px) / 2);
			margin-right: 0px;


			
			}
	header ul li:nth-child(4) {order: 1;}
	header ul li:nth-child(5) {order: 2; margin-right: 68px;}	
	
	header ul li:nth-child(1) {order: 3;}
	header ul li:nth-child(2) {order: 4; }
	header ul li:nth-child(3) {order: 5; margin-right: 22px;}
	
	
	#menu {
		max-width: 479px;
		padding-right: 20px;
	}
video {
	display: none;
	max-width: 360px !important;
}
/**************** HOME FORMAT ****************/	
	
	#kwerk h1.schenken {
	top: 340px;
	left: 308px;
}
	.text-container {
      width: 190px;
	  position: relative;
	  margin-top: -30px;
	  margin-left: -190px;	
    }
	
	#kwerk  {
		min-width: 0px !important;
		width: 100%;
		max-width: 100%;
		}

		#print,
		#kursangebot, .portrait {	
				  padding: 0px 0px 0px 0px; 
			}
		#print nav ul,
		#kursangebot nav ul, .portrait ul {
			min-width: 300px;
			width: 100%;
			flex-flow: column wrap;
			}
			#print nav ul li,
			#kursangebot nav ul li, .portrait ul li {
				width: 100%;
			}
	

		p.kurse_details  {
			font-size: 1.1em;
		} 			
			
/***********************************************************/	
form {
	display: flex;
	flex-flow: column nowrap;
	}
.doppel {
	display: flex;
	flex-flow: column wrap;
	}	
	
.space {
	width: 2px;}	

input.btnzurueck, input.btnschicken {
	margin-top: 22px !important;
}
}


@media only screen and (max-width: 399px) {
	header {
	width: 100%;
	height: 176px;
	background-image: url(../img/kw-logo-sc-3z-01.png);
	background-image: url(../img/kw-logo-sc-3z-01.svg);
	background-size: 150px;
	background-position: 18px 28px;
	background-repeat: no-repeat;
	display: flex;
	justify-content: flex-start;
		} 
	header .home a {
		width: 160px;
		height: 150px;
		}
header ul  { 
 			display: flex;
			flex-flow: row wrap;
			justify-content: flex-end;
			width: 100%;
			height: 120px;
			margin-left: calc((100% - 380px) / 2);
			margin-right: 0px;


			
			}
	header ul li:nth-child(4) {order: 1;}
	header ul li:nth-child(5) {order: 2; margin-right: 68px;}	
	
	header ul li:nth-child(1) {order: 3;}
	header ul li:nth-child(2) {order: 4; }
	header ul li:nth-child(3) {order: 5; margin-right: 22px;}
	
		
/**************** MENU FORMAT *****************/
	
#menu {
		max-width: 399px;
		padding-right: 20px;
	}
#menu input ~ nav::before,
	#menu input ~ nav > ul:first-child:before {
	background-size: 150px;
}

	
	
}