/* extra Zusatz CSS Angaben die nur für die Kontakt Seite gelten - zwecks besserer Übersicht hier ausgelagert */

.error { background-color:var(--error-background); }

#site { max-width:30% } /* bei großen Bildschirmen wird bewusst nur ein kleiner Bereich genützt */

input.content_hackbox:not(:checked) ~ label.content_mehr_lesen::after { content:'\25BA  Formular...' } /* extra Beschriftung */

#anfrage{ /* ganzes Formular */
	width:98%;
	padding-bottom:40px;
}

#name {
	position:absolute;
	width:0px;
	border:none;
}

#email {
	display:block;
	width:98%;
	margin-top:10px;
	padding:10px 0 10px 10px
}

#text {
	display:block;
	width:98%;
	margin:15px 0 10px;
	font-family:inherit;
	font-size:0.8em;
	padding:10px 0 10px 10px
}

#senden{
	padding:5px 15px;
	font-size:1em;
	font-weight:500;
	border:1px solid silver;
	color:var(--senden-color);
	background-image:linear-gradient(to top, gainsboro 0%, white 30%);
	border-radius:20px;
	box-shadow:0px 10px 3px rgba(0, 0, 0, 0.35);
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* Abschnitt DANKE Info */
#danke {
	max-width:25vw;
	margin:6vh auto auto;
	padding:0em 5em;
	text-align:center;
	background:#fff;
	border-radius:50%;
	box-shadow:0px 0px 30px rgba(255, 255, 255, 1); /* weißer Schein */
	animation:background_fade 13s; /* hier wird die Dauer der Animation definiert */
}

@keyframes background_fade { /* betrifft die wegfliegende Gans; diese fadet aus und man sieht die Gänse auf der Wiese */
	0% {opacity:1;}
	30% {opacity:1;}
	55% {opacity:0;}
	100% {opacity:0;}
}

@media only screen and (orientation:portrait) {
	#danke { margin-top:25vh }
	img { width:50%; height:auto }
}
@media only screen and (orientation:landscape) {
	img { height:50%; width:auto }
}
/* Ende DANKE Info */

/* ▄■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▄
   █********************* ANPASSUNGEN AN BILDSCHIRMGRÖSSEN ************************█ 
   ▀■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▀ */
   
@media screen and (max-width:1280px) {
	#site { max-width:40% }
}
@media screen and (max-width:1000px) {
	#site { max-width:50% }
}
@media (max-width:820px) {
	#site { max-width:80% }
	section > label > h1 { margin-top:0px; width:80% }
	#name { top:85px }
	#email { top:85px }
	input { font-size:120% }
	#text { font-size:150% }
	#danke { max-width:45vw }
}
@media (min-height:770px) and (orientation:portrait) {
	section { margin-top:35vh } /* Position der Überschrift (und Aufklapp-Button bzw. Text) */
}
@media screen and (max-width:600px) {
	#site { max-width:95% }
	#name { top:80px }
	#email { top:80px }
	input { font-size:120% }
	#text { font-size:150% }
}