@charset "utf-8";
/*=============================================*/

:root {
	--scroller: 12px;
	--ankerlinks: calc(5.5rem + 2.5vw);
	--ankeroben: 5px;
}

html {
	scrollbar-width: thin;
}

h1, h2, h3, h4, h5, h6, p, div.p, table {
	margin: 0px 0px 1.3rem 0px;
	padding: 0 0.5rem;
	font-weight: inherit;
}

h3 {
	font-size: 2rem;
	text-decoration: underline solid 1px black;
}
#massstab {
/**/	display: none;
	background-color: violet;
	height: 7px;
	width: 40rem
}
/* Das FORMULAR*/
#formdiv  {
	background-image: linear-gradient(-20deg, rgb(230 230 230), rgb(230 230 230), rgb(241 218 241), rgb(218 218 242), rgb(217 241 241), rgb(218 242 218), rgb(241 241 217), rgb(242 232 217), rgb(241 219 218), rgb(230 230 230), rgb(230 230 230));
	display: inline-block;
	margin: 3px auto;
	padding: 3px;
	text-align: center;
/*	background-color: salmon;*/
	width: min(28%, 40rem);
	max-width: 100%;
	border: 2px ridge rgb(255 0 255);
	border-radius: .5rem;
	box-sizing: border-box;}

#formdiv form {
	width: 100%;
	max-width: 40rem;
	margin: 0 auto;
	display: block;
	box-sizing: border-box;
	text-align: center;
}

	#koeder {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	label {
/*		background-color: turquoise;*/
		display: block;
		margin: 0.3rem 0px 0px 0px;
		padding: 0px;
	}

	.fblabel::first-letter {
		font-size: 1.6rem;
		color: rgb(255 0 255);
	}

	input, textarea, button {
		display: inline-block;
		width: 90%; 
		border: 2px ridge rgb(255 0 255);
		border-radius: .5rem;
		margin-bottom: 0.3rem;
	}

	input, textarea {
		font-family: monospace;
	}

	.input {
/*		background-color: thistle;*/
		margin: 0.3rem auto 0px auto;
		vertical-align: top;
	}

	textarea {
		height: 8rem;
	}

button {	
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button:hover	{
	color: rgb(206, 0, 206);
	background-color: rgb(255, 197, 255);
}

input, textarea {
	font-size: 1.2rem;
}

/*
	line-height: 1.9;
  box-shadow: 0 0 0 .1em #3983ab;
  border: 2px dashed white;

*/

/* SPRACHEINSTELLUNGEN */
.spr0, .spr1 {
	display: none;
}

body.deutsch .spr0 {
	display:inline;
}

body.english .spr1 {
	display:inline;
}

body.deutsch .flag {
	transform: scaleX(1);
}

body.english .flag {
	transform: scaleX(-1);
}

a	{
	background-color: ButtonFace; 
	text-decoration:none;
	font-size: 1.6rem;
	color: rgb(255 0 255);
	border: 2px ridge rgb(255 0 255);
	border-radius: .5rem;
	display: inline-block;
	padding: 0px 5px;
	margin: 5px 0px 0px 0px;
}

a:hover	{
	color: rgb(206, 0, 206);
	background-color: rgb(255, 197, 255);
}

a:active {	
	background-color: rgba(255 240 10 / 100% ); 
	color: rgb(255 0 255);	
}

	p a {
		font-size: inherit;
		padding: 3px;
	}

body { 
	background-image: linear-gradient(-20deg, rgb(230 230 230), rgb(230 230 230), rgb(241 218 241), rgb(218 218 242), rgb(217 241 241), rgb(218 242 218), rgb(241 241 217), rgb(242 232 217), rgb(241 219 218), rgb(230 230 230), rgb(230 230 230));
	position: relative;
	padding:0px; 
	border:0px;
	margin:0px; 
	width:100%; 
	height:100%;
	font-family: 'Ysabeau Infant', 'Century Gothic', 'Futura Medium', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.5rem;
	line-height: auto;
}

/*
	background-size: contain;
	background-repeat: repeat;
	min-height: 100vh;
	
	background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
	background-attachment: fixed;


	background-image: linear-gradient(to top, #f3e7e9, #e3eeff, #f3e7e9, #e3eeff, #f3e7e9, #e3eeff);
	
	
Regenbogen:
	background-image: linear-gradient(to bottom, red, orange, yellow, green, blue, purple, red, orange, yellow, green, blue, purple);


	background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255 255 255 / 50%) 47%, rgba(0 0 0 / 50%) 100%);
	background-blend-mode: screen;
	
 
 	background-image: linear-gr0adient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
	
	background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
	background-blend-mode: screen;	

	background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);	

		background-color: #dddddd;
*/

	#tester {
		display: none;
		position:absolute;
		z-index: 12;
		width: 50px
	}

	#tester button {
	position: sticky;
	width: fit-content;
	top: 0px;
	display: inline-block;
	}

	#tester button:hover {
		background-color: rgb(250, 218, 250);
	}

	#container {
		position: relative;
		width: calc(100vmin - var(--scroller));
		margin: 0px auto;
		container-type: inline-size; /* Macht den Container abfragbar */
		z-index: 11;
	}

		#hgbild {
			width: calc(100vmin - var(--scroller));
			aspect-ratio: 12 / 8;
			position: absolute;
			border-radius: 0px 0px 1rem 1rem;
			z-index: 0;
			background-color: #FC2; 
			background-image:	url(../fotos/kopf_hg12-8.jpg);
			background-position: top left;					
			background-size: cover;
			background-repeat: no-repeat;
		}

		#logo {
			width: 100%;
			aspect-ratio: 12 / 3.5;
			background:
				url(../fotos/logo.png)		
				center bottom / 75%		
				no-repeat;				
			position: relative;
		}

		#abstand {
			width: 100%;
			aspect-ratio: 12 / 3.7;
			position: relative;
		}

			#telefon {
				display: inline-block;
				position: absolute;
				width: auto;
				top: 40%;
				left: 5%;
				transform: rotate(-25deg);
			}

			#sprache {
				display: inline-block;
				position: absolute;
				bottom: 0px;
				right: 2.5%;
			}

				#sprache a {
					background-color: ButtonFace;
					border: 2px ridge rgb(255 0 255);
					color: #000;
					display: flex;
					width: 5.5rem;
					justify-content: center; 
					align-items: center; 
					padding: 3px 0px;
					margin: 0px 0px 8px 0px; 
				}

				#sprache a:hover {
					background-color: rgba(255 0 255 / 100% );
				}
				
					.deen {
						display: flex;
						justify-content: center; 
						align-items: center;
						height: 2rem;
					}

					.flag {
						display:inline-block;
						width: 2rem;	
						aspect-ratio: 4 / 3;
					}

					#design {
						display: inline-block;
					}
/* Menü */
		.menus {
			width: 100%;
			aspect-ratio: 12 / 0.8;
			display: block;
			position: sticky;
			top: 5px;
		}

			#menubutton {
				display: inline-block;			
				position: absolute;
				width: 5.5rem;
				border-radius: .5rem;
				font-size: 1.6rem;
				cursor: pointer;
				right: 2.5%;
				text-align: center;
				z-index: 11;
			}

			#popovermenu {
				width:  13rem;
				height: fit-content;
				list-style-type: none;
				text-align: center;
/*
				background-image: linear-gradient(-20deg, rgb(230 230 230), rgb(230 230 230), rgb(241 218 241), rgb(218 218 242), rgb(217 241 241), rgb(218 242 218), rgb(241 241 217), rgb(242 232 217), rgb(241 219 218), rgb(230 230 230), rgb(230 230 230));
				border: 2px ridge rgb(255 0 255);
				border-radius: 1rem; 
*/				background-color: rgba(250, 218, 250, 0);
				border: none;
				z-index: 12;
			}

			#popovermenu:popover-open::backdrop {
				backdrop-filter: blur(5px) brightness(0.8);
			}

/*Positionierung mit anchor(), für später, wenn alle Browser das unterstützen. Bis dahin wird die Positionierung mit JavaScript übernommen.*/
			[popover] {			/* :popover-open */
				inset: auto;
				margin: 0;
				top: anchor(top);
				right: calc(anchor(left) - 10px);
				justify-self: anchor-center;
			}

/* wenn Anker nicht vorhanden */
			.noanker {
				display:block;
				position: absolute;
				top: 10px;
				right: calc(2.5% + 5.5rem - 10px);
			}

			#menuhgr {
				position: absolute;
				width: 200vw;
				height: 300vh;
/* */				top: -100vh;
				left: -100vw; 
				background-color: rgba(0 0 0 / 30%);
				z-index: 10;
				backdrop-filter: blur(5px);
			}

			.versteckt {
				display: none;
			}

			[popover] {
			/* Final state of the exit animation */
				opacity: 0;
				transform: scaleY(0);
				transform-origin: top right;

			transition-property: opacity, transform, overlay, display;
			transition-duration: 0.3s;
			transition-behavior: allow-discrete;
			/* Using the shorthand transition property, we could write:
				transition: 
				opacity 0.7s,
				transform 0.7s,
				overlay 0.7s allow-discrete,
				display 0.7s allow-discrete;

				or even:
				transition: all 0.7s allow-discrete;
			*/
			}

				[popover]:popover-open {
				opacity: 1;
				transform: scaleY(1);
				}
			
		/* Needs to be included after the previous [popover]:popover-open 
			rule to take effect, as the specificity is the same */
			@starting-style {
			[popover]:popover-open {
				opacity: 0;
				transform: scaleY(0);
			}
			}


			#popovermenu .li {
				display: block;
				margin: 5px;
				flex-grow: 1;
				border-radius: 1rem;
			}

			#popovermenu a {
				width: 96%;
				padding: 0px 3px 3px 3px;
			}

		#seite {
			width: 100%;
			border-radius: 1rem 1rem 0px 0px;
			overflow:hidden;
		}

			.box {
				min-height:50px;
				margin: 0px auto;
				border-radius:1rem;
				overflow: hidden;
			}

				.box img {
					width: clamp(50%, calc(86.67% - 238.33px), 70%);
					border-radius:1rem;
					margin-bottom: 0.5rem;
				}

					.rex {
						float: right;
						margin-left: 0.5rem;
					}

					.lix {
						float: left;
						margin-right: 0.5rem;
					}

				#hallo1 b {
					font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
					font-size: 6rem;
					font-weight: bold;
				}

				#hallo2a {
					Display:none;
				}

				#goog {
					text-align: left;
				}


				.goog  {
					vertical-align: bottom;
				}

				span.goog img.star {
					display:inline-block;
					height: 1.6rem;
					width: 1.6rem;
					margin: 0px;
					vertical-align: bottom;
					float: none;
				}

				i.goog  {
					display: inline-block;
					vertical-align: bottom;
					font-size: 1rem;
/*					font-style: italic; */
					color: #555;
				}

				div.font1 {
					font-family: 'Ysabeau Infant'; 
					font-size: 2rem;
					text-align: center;
				}

				div.font2 {
					font-family: 'aw_siam_english_not_thaiRg'; 
					font-size: 2rem;
					letter-spacing: 0.1em; 
					text-align: center;
				}

				figure {
					display: inline-block;
					width: 13rem;
					margin: 5px;
				}

				figcaption, figcaption a {
					font-size: 1rem;
					line-height: 1rem;
					font-style: italic;
					text-align: center;
				}

				img.impr {
					width: 13rem;
					border-radius: 1rem;
				}

		.trenner {
				display: flex;
				width:100%; 
				aspect-ratio: 12 / 2.5;
				text-align: right;
				background: 
					url(../fotos/trennblumen.gif)
					center center / 50%	
					no-repeat;
			}

				.trenner div  {
					display: inline-block;
					margin: auto 0px auto 10px;
					background-color: rgba(255 255 204 / 70% );
				}

					.trenner div a {
						display: none;
						transform: scaleX(0.8) rotate(-90deg);
						font-size: 1.6rem;
						margin-right: 7px;
					}

/* Media Query: Blendet das Element ein, wenn die */
/* Container-Breite maximal 1130px */
@container (width < 1130px) {
	#formdiv  {
		display: block;
		width: min(70%, 40rem);
		max-width: 100%;
		clear:both;
	}
}


/* Container-Breite maximal 650px */
@container (width < 650px) {
	#menubutton { display: inline-block; }
	#mainmenu { display: none; }
	#sprache {display:none;}
	.trenner div a { display: none; }
	#abstand { aspect-ratio: 12 / 3.5; }
	.menus { aspect-ratio: 12 / 1; }
/*
*/
}


/* Container-Breite maximal 480px */
@container (width < 480px) {
	#abstand { aspect-ratio: 12 / 3.1; }
	.menus { aspect-ratio: 12 / 1.4; }
	.box img {
		width: 100%;
		float:none;
		margin:0px 0px 7px 0px;
	}
}


/* Container-Breite maximal 380px */
@container (width < 380px) {
	#abstand { aspect-ratio: 12 / 2.8; }
	.menus { aspect-ratio: 12 / 1.7; }
	#formdiv  {
/*		width: min(70%, 40rem);*/
		width: 96%;
	}
}

@media screen and (max-height: 570px) {
  #popovermenu, #popovermenu:popover-open {
    height: 400px;
	overflow: scroll;
  }
}