@font-face { font-family: 'Amulya';
	src: url('material/amulya.woff2') format('woff2-variations'),
	/* will be the standard and works in Safari now */
	url('material/amulya.woff2') format('woff2');
	/* for the other supporting browsers */
	font-weight: 300 700; font-display: fallback; }

/* Fallback nicht-variable Schriften */
@font-face {font-family: 'Amulya Static';
	font-style: normal; font-weight: 400; font-display: fallback;
	src: url('material/amulya-400.woff2') format('woff2');}
@font-face {font-family: 'Amulya Static';
	font-style: normal; font-weight: 700; font-display: fallback;
	src: url('material/amulya-700.woff2') format('woff2');}

*, ::before, ::after { box-sizing: border-box; }

body { font-family: 'Amulya Static', Seravek, 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size:100%; margin:0; padding:0; background-color: white; }

@supports (font-variation-settings: normal) {
body { font-family: 'Amulya', Seravek, 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; } }

/* Menü */
html {scroll-behavior: smooth; scroll-padding: 4em; }
#top {position:relative; top:0px; z-index:10; padding:.4em 0 .2em;
	width: 100%; background-color:hsl(200, 45%, 25%);
	box-shadow: 0 4px 3px -3px #000; }
nav {margin: 0px auto; width: 92%; max-width:60em;
	padding: 0.1em 2.1em;}

nav ul {padding:0; margin:0;}
nav ul:after { /* clearfix */
	visibility: hidden; display: block; font-size: 0;
	content: ""; clear: both; height:0;}
nav ul li { position: relative; list-style: none;
	display: block; width: 100%;}
nav ul li a { display: block; text-align: center;
	border-bottom: 1px solid #777; position: relative; padding: .6em 0;
	font-weight:450; text-decoration:none;
	color: #fff; background-color:hsl(200, 45%, 25%);
	transition: background-color 0.3s, color 0.1s;}
nav ul li a:hover { color: hsl(200, 45%, 25%); background-color:#fff;}

@media all and (min-width: 27.5em) and (min-height:27.5em) {
	html { scroll-padding:6.5em; }
	#top { position:sticky; }
	nav ul li { float: left; display: block; width: 33%}
	nav ul li a { border-bottom: none; } }

@media all and (min-width: 50em) {
	html { scroll-padding:4.5em; }
	nav ul li { width: 16.65%;}
	nav ul li:nth-child(2) { width: 22%;}
	nav ul li:nth-child(3),
	nav ul li:nth-child(4) { width: 14%;} }

@media all and (min-width: 62em) {
	html { scroll-padding:2.5em; }
	#top { height: 55px; }
	h1 {float:left;}
	nav ul { width: 78%; float:right;} }


/* Folien */
#start, #philosophie, #behandlungen, #produkte, #preisliste, #braut, #kontakt, #impressum {
	text-align:center; width:100%; min-height:100vh; padding:6vw 1vw 6vw; background: #e7e7e7 center center / cover no-repeat; text-shadow: #eee 0 0 35px; }

#start > div, #philosophie > div, #behandlungen > div, #produkte > div, #preisliste > div, #braut > div, #kontakt > div, #impressum > div {
	text-align:left; margin:auto; width:92%; max-width:57em;
	padding: 3vw 5vw 7vw;}

#start {background-image: linear-gradient(180deg, transparent, transparent 20%, hsl(200, 45%, 35%) 101%), url(material/studio-k.jpg);
	min-height:70vh; padding: 2em;}
@media all and (min-width: 39em) {
	#start {background-image: linear-gradient(180deg, transparent, transparent 20%, hsl(200, 45%, 35%) 101%), url(material/studio.jpg); padding: 5em;} }

#start div {text-align:center; max-height: 85vh; padding:0}
#start img {max-width: 100%; max-height: 70vh;}
#start p {padding-top: 1em; color: white;
	font-size: 1.5em; font-size: clamp(1.1em, 2.4vw, 1.8em); }

#philosophie {background-image: url(material/halbgesicht-k.jpg); }
#philosophie h2 {background-position: 0 0;}
@media all and (min-width: 39em) {
	#philosophie {background-image: url(material/halbgesicht.jpg); }
	#philosophie > div { padding-left: 50%; } }
@media all and (min-width: 62em) {
	#philosophie > div { padding-left: 30em; } }

#behandlungen {background-image: url(material/rain-k.jpg);}
#behandlungen h2 {background-position: 0 16.67%;}
#behandlungen > div { background-color: #e7e7e7;
	background-color: rgba(255,255,255,0.8);}
#behandlungen img { max-width: 100%; text-align: center; padding-bottom: .7em; }
@media all and (min-width: 39em) {
	#behandlungen {background-image: url(material/rain.jpg);}
	#behandlungen img { max-width: 40%; position: relative; float: right; padding-left: 1em; } }

#produkte {background-image: url(material/make-up-k.jpg);
	background-attachment: fixed; }
#produkte > div { background-color: #e7e7e7;
	background-color: rgba(255,255,255,0.8);}
#produkte h2 {background-position: 0 33.33%;}
#produkte h3 {padding-top: 1em; }
#produkte img { max-width: 40%; position: relative; float: right; padding-left: 1em; padding-bottom: 1.5em; top: 1.5em; }
@media all and (min-width: 39em) {
#produkte {background-image: url(material/make-up.jpg);} }
@media all and (min-width: 50em) { #produkte img { max-width: 20%; } }

#preisliste {background-color: #fff; background-image: url(material/zweig.jpg); background-size: 40%; background-position: 100% 0; }
#preisliste h2 {background-position: 0 50%;}
#preisliste .spalten {columns: 14em; column-gap: 3em;}

#braut {background-image: url(material/brautstrauss-k.jpg) }
#braut h2 {background-position: 0 66.67%;}
#braut .spalten {columns: 2 15em; column-gap: 3em;}
@media all and (min-width: 50em) {
	#braut {background-image: url(material/brautstrauss.jpg);}
	#braut > div { padding-left: 25%; } }
@media all and (min-width: 66em) {
	#braut > div { padding-left: 18em; } }

#preisliste ul, #braut ul {list-style-type: none; padding: 0; }
#preisliste li, #braut li {display: grid; grid-template-columns: auto max-content; align-items: end; }
#preisliste .preis, #braut .preis {text-align: right; }

#kontakt { background-image: url(material/kontakt-k.jpg); background-attachment: fixed; }
@media all and (min-width: 39em) {
	#kontakt {background-image: url(material/kontakt.jpg); } }
#kontakt > div { background-color: #e7e7e7;
	background-color: rgba(255,255,255,0.7); text-align:center;}
#kontakt h2 {background-position: 0 83.33%;}
#kontakt img { height: 270px; }
@media all and (min-width: 45em) {
	#kontakt img { position: relative; float: right; top: -6em; } }


#impressum h2 {background-position: 0 100%;}
#impressum p {font-size:75%}
#impressum .spalten {columns: 14em; }


/* Überschriften */
h1 {margin:0 auto; text-indent: -9999px; width: 150px; height: 40px;
	background: url(material/logo-schriftzug.svg) no-repeat; color:#fff }
h2 {margin: 0 0 0 -0.4em;
	text-indent: -9999px; width: 250px; height: 75px;
	background: url(material/headlines.svg) no-repeat;
	background-size: cover; }
@media all and (min-width: 27.5em) { h2 {width: 300px; height: 90px;} }
@media all and (min-width: 39em) { h2 {width: 400px; height: 120px;} }

h3 {font-size:1.25em; line-height:1.2; color: hsl(200, 45%, 25%);
	margin: 0.9em 0 -0.5em -0.02em; font-weight:700;}

.spalten h3 {margin-top: 0; break-after: avoid;}
.spalten ul, .spalten p {margin-bottom: 1.4em; -webkit-hyphens:none; hyphens:none; }

p, ul, ol {font-size: 1em; line-height:1.5;
	color:#111; font-weight:420; margin-bottom:-0.3em;
	-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

i, em {font-style:normal; font-weight:300;}
b, strong {font-weight:700; color: hsl(200, 45%, 35%) }
a {color:hsl(200, 45%, 25%); font-weight:700;}

::selection {background: hsl(200, 45%, 25%); color:#fff /* webkit */ }
::-moz-selection {background: hsl(200, 45%, 25%); color:#fff /* gecko */}