/*
####################################
# SVG-Navigation: sanfter Zoom     #
####################################
*/

/*
#####################
# Schrift (zentral) #
#####################
*/
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #222222;
}

/*
############
# Layout   #
############
*/
body {
	margin:0 10px; padding:112px 0 0;
}
#navleiste {
	position:fixed; top:0; left:0; right:0; z-index:10;
	width:433px; height:100px;
	background:url(../image/bogen.svg) no-repeat;
	margin:0 auto;
	pointer-events:none;
}
#bogenklick {
	position:absolute; left:0; top:0;
	cursor:pointer;
	pointer-events:auto;
}
#navleiste a {
	position:absolute; width:60px; height:60px;
	pointer-events:auto;
}
#navleiste #info {
	position:absolute; left:0; width:433px; top:6px;
	color:#333;
	pointer-events:none;
}
#navleiste a img {
	width:60px; height:60px; display:block;
	transition: transform 0.3s ease;
	transform-origin: 50% 50%;
}
#navleiste a:hover img {
	transform: scale(1.5);
	position:relative; z-index:2;
}
#navleiste a.aktiv img {
	transform: scale(1.5);
	position:relative; z-index:2;
}
#info {
	opacity:0;
	transition: opacity 0.7s ease;
}

/*
####################################
# Hintergrund-Feder (Gimmick)      #
####################################
Aufgehelle Feder, 50% der Browserbreite, schwebt
sanft an ihrer Stelle. Gimmick: Ihre Spitze steht
wie der Minutenzeiger einer Uhr auf die aktuelle
Minute (Bild-Grundausrichtung: 3 Uhr; gefuehrt
von head.js via CSS-Variable --feder-winkel).
*/
body::before {
	content: "";
	position: fixed;
	top: 35vh;
	left: 10vw;                     /* 60vw breit -> mittig */
	width: 80vw;
	aspect-ratio: 29.71586 / 12.255938;   /* Format der feder.svg */
	background: url(../image/feder.svg) no-repeat center / contain;
	opacity: 0.16;
	z-index: -1;
	pointer-events: none;
	transform: rotate(var(--feder-winkel, 0deg));
	animation: feder-schweben 8s ease-in-out infinite;
}
@keyframes feder-schweben {
	0%, 100% { transform: translate(0, 0)        rotate(var(--feder-winkel, 0deg)); }
	25%      { transform: translate(2.5vw, -2vh) rotate(calc(var(--feder-winkel, 0deg) + 3deg)); }
	50%      { transform: translate(0, -4vh)     rotate(calc(var(--feder-winkel, 0deg) + 4deg)); }
	75%      { transform: translate(-2.5vw, -2vh) rotate(calc(var(--feder-winkel, 0deg) + 3deg)); }
}
@media (prefers-reduced-motion: reduce) {
	body::before {
		animation: none;
		transform: rotate(var(--feder-winkel, 0deg));
	}
}

/*
####################################
# Aufzählungen: Feder als Zeichen  #
####################################
Alle Listen (<ul>) erhalten die Feder als Aufzählungszeichen.
Im Markdown einfach normale Listen schreiben:
   - Punkt 1
   - Punkt 2
Eine Klasse ist nicht nötig; <ul class="feder"> funktioniert
aber weiterhin genauso.
*/
ul {
	list-style: none;
	margin-left: 1.2em;
	padding-left: 0;
}
ul li {
	position: relative;
	padding-left: 1.7em;
	margin-bottom: 0.25em;
}
ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.3em;
	height: 0.54em;   /* Seitenverhältnis der Feder ca. 2.4:1 */
	background: url(../image/feder.svg) no-repeat left center;
	background-size: contain;
}

/*
####################################
# Startseite                       #
####################################
Das Startbild wird horizontal und vertikal
im Bereich unter der Navigation zentriert.
*/
.startseite {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 112px);
}

/*
####################################
# Kontaktformular (email.php)      #
####################################
Halbdurchscheinend: die schwebende Feder
scheint durch die Felder hindurch.
*/
form.kontakt fieldset {
	background: rgba(230,230,230,0.3);
	border: 1px solid #bbbbbb;
	border-radius: 6px;
	margin-bottom: 1em;
}
form.kontakt legend {
	font-weight: bold;
	padding: 0 0.4em;
}
form.kontakt input[type="text"],
form.kontakt textarea {
	background: rgba(255,255,255,0.55);
	border: 1px solid #bbbbbb;
	border-radius: 4px;
	padding: 4px 6px;
	font-family: inherit;
	font-size: 14px;
	color: #222222;
}
form.kontakt textarea {
	vertical-align: top;
}
form.kontakt input[type="submit"],
form.kontakt input[type="reset"] {
	background: rgba(230,230,230,0.6);
	border: 1px solid #bbbbbb;
	border-radius: 4px;
	padding: 4px 14px;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}
form.kontakt input[type="submit"]:hover {
	background: rgba(230,230,230,0.85);
}