@charset "UTF-8";

/*font*/
@font-face {
	font-family: 'Signika';
	font-style: normal;
	font-weight: 400;
	src: local('Signika Regular'), local('Signika-Regular'), url(signika.woff) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
	}

/* not working with most browsers
:root {
	--padlr:5em;		/* padding left-right everywhere
	--padlrmob:1em;		/* version for mobile
	}
*/

* {				/* set all margins/paddings to 0 and don't show bullet points */
	line-height:1.3em;
	margin:0;
	padding:0;
	list-style-type:none;
	text-decoration:none;
	color:#000;
	}

body {
	overflow-y: scroll;			/* allways show scrollbar */
	font-family: 'Signika', sans-serif;
	font-size:100%;
	text-align:justify;
	}

.right {
	float:right;
	}

:visited, :active, :link {
	}

header > div, article > div, footer > div {	/* set left-right padding everywhere, div necesserry for maximal width of content */
/*	padding-left:var(--padlr);
	padding-right:var(--padlr);*/
	padding-left:5em;
	padding-right:5em;
	margin:0 auto;
	max-width:70em;
	}

article > div {
	padding-top:1em;
	max-width:35em;
	hyphens: auto; /* Silbentrennung */
	}

article {
	padding-top:3.5em;
	transition:padding-top 0.5s ease, min-height 0.5s ease;	/* animate changing of padding for mobile menu */
	display:none;				/* do not show unselected articles */
	margin:0 auto;
	min-height:calc(100vh - 14.9em);
	padding-bottom:3em;
	}

article#home, article:target {	/*display selected article */
	display:block;
	}

article:target ~ article#home {
	display:none;
	}

article img.broad, article img.map {
	width:100%;
	height:10em;
	object-fit:cover; 
	}

article img.map {
	height:300px;
	}

article img.left, article img.right {
	max-width:20em;
	width:100%;
	}

article img.left {
	margin-right:3em;
	margin-bottom:10em;
	float:left;
	}

/* Positioning of Picture in about section, etc. */
article#about > div {
	max-width:45em;
	}

@media all and (max-width:45em) {
	article img.left {
		margin:0;
		float:none;
		}
	article#about > div {
		max-width:20em;
		}
	}

/* Positioning of Picture in home section */

article img.right {
	margin-right:-7em;
	margin-left:3em;
	margin-top:.4em;
	float:right;
	}

@media all and (max-width:45em) {
	article img.right {
		margin-left:2em;
		max-width:15em;
		margin-right:-3em;
		}
	}

@media all and (max-width:33em) {
	article img.right {
		margin-left:1em;
		max-width:10em;
		margin-right:0;
		}
	}

article h1 {
	margin-top:.5em;
	color:#d66;
	}

article h1:first-of-type {
	margin-top:0;
	}

article h2 {
	font-size:1em;
	color:#d66;
	}

article p {
	margin-bottom:.4em;
	}

article ul {
	margin-top:-.4em;
	margin-left:2em;
	}

article ul li {
	list-style-type:disc;
	padding-top:.3em;
	}

article ul.nav li {
	list-style-type:none;
	}

article strong {
	color:#d66;
	}

article .cite {
	padding:0 2em;
	}

/* Navigation menu on home screen for mobile devices */
div.homenav {
	margin-top:2em;
	display:none;
	}

div.homenav ul {
	margin-left:0;
	margin-top:.2em;
	font-size:1.3em;
	}


/* header/navigation */

header {
	top:0;
	position:absolute;
	background:#FFF;
	color:#333;
	width:100%;
	}

header > div {
/*	width:calc(100% - 2 * var(--padlr));	*/
	width:calc(100% - 10em);
	}

div#header {
	float:left;
	}

input#drop {		/* do not show menu checkbox */
	display: none;
}

header h1 {
	font-size:1.2em;
	line-height: 1.9em;
	color:#d66;
}

header h2 {
	font-size:0.9em;
	line-height: 0;
	color:#444;
}


/* link nav button status to selected article */
header nav ul li a[href="#home"],	/*mark Home as selected */
article#home:target		~ header nav ul li a[href="#home"],
article#osteopathie:target	~ header nav ul li a[href="#osteopathie"],
article#baby:target		~ header nav ul li a[href="#baby"],
article#about:target		~ header nav ul li a[href="#about"],
article#kontakt:target		~ header nav ul li a[href="#kontakt"]
	{
	color:#d66;
	border-bottom:6px solid #AAA;		/* Underline active */
	transition:border 0.2s ease-in-out;
	}

article:target ~ header nav ul li a[href="#home"] { /* mark Home as unselected as soon as anything else is selected */
/*	color:unset;	not working with some browsers*/
	color:#000;
/*	border-bottom:unset;	*/
	border-bottom:none;
	}

/* normal menu */
nav {
	margin-top:0.9em;
	float:right;
	}

nav ul li {
	display:inline-block;
	margin:0 0.5em;
}

nav ul li a:hover {
	color:#d66;
	}

article:target ~ header nav ul li a[href="#home"]:hover {
	color:#d66;
	}

/* Menu Button */
header label {
	margin-top:.3em;
	display:none;	/* do not show menu Button */
	float:right;
	}
	
header label div.bar1, header label div.bar2, header label div.bar3 {
	width: 35px;
	height: 5px;
	background-color: #333;
	margin: 6px 0;
	transition: 0.5s;
	}

/* Animate Menu button on click */
input#drop:checked ~ header label div.bar1 {
	transform: rotate(-45deg) translate(-9px, 6px);
	}

input#drop:checked ~ header label div.bar2 {
	opacity: 0;
	}

input#drop:checked ~ header label div.bar3 {
	transform: rotate(45deg) translate(-8px, -8px);
	}


/* Footer */
footer#details {
	padding-top:0.2em;
	height:6.6em;
	background:#DDD;
	}

footer#copyright {
	height:1.4em;
	padding-top:0.2em;
	background:#222;
	color:#AAA;
	}

footer#copyright a {
	color:#AAA;
	}

/* mask email and phone; user and domain in reverse */
.mail:before {
	content:attr(data-domain)"@"attr(data-user);
	unicode-bidi:bidi-override;
	direction:rtl;
	}

.tel:before {
	content:attr(data-num);
	unicode-bidi:bidi-override;
	direction:rtl;
	}

/* small display */
@media all and (max-width:33em) {

	header > div, article > div, footer > div {	/* set left-right padding everywhere */
		padding-left:1em;
		padding-right:1em;
/*		padding-left:var(--padlrmob);
		padding-right:var(--padlrmob);*/
		margin:0 auto;
/*		max-width:calc(33em - 2* var(--padlr));	*/
		max-width:23em;
		}

	header > div {
		width:calc(100% - 2em);
		}
	}
/* mobile */
@media all and (max-width:60em) {

	input#drop:checked ~ article {
		padding-top:17em;	/* move everything down to make room for menu (if checked)*/
		min-height:calc(100vh - 28.4em);
		}

	nav {
		height:0;			/* set height of menu to zero */
		overflow:hidden;		/* only show text of menu within menu box */
		float:none;			/* unset float setting from desktop version */
		clear:both;			/* put menu below headline */
		transition:height 0.5s ease;	/* animate menu */
		line-height:normal;		/* reset line height */
		}
	
	nav ul li {
		margin:0;
		display:block;
		}
	
	nav ul li a {
		margin-left:-2px;		/* Strange padding on left side...looks unalligned */
		font-size:2em;
		line-height:1.3em;
		}

	input#drop:checked ~ header nav {	/* show menu if pressed */
		display:block;
		height:13.5em;
		}

	header label {
		display:block;		/* show menu button */
		}

	/* Navigation menu on home screen for mobile devices */
	div.homenav {
		display:block;
		}

	div.homenav a:hover{
		color:#d66;
		}

	input#drop:checked ~ article div.homenav {
		display:none;
		}

	}


/* narrow mobile 
@media all and (max-width:23em) {
	header h1 {
		font-size:1.2em;
		line-height:2.7em;
		}
}

@media all and (max-width:21em) {
	header h1 {
		font-size:1.1em;
		line-height:2.8em;
		}
}

@media all and (max-width:20em) {
	header h1 {
		font-size:1em;
		line-height:3.1em;
		}
}
*/