@charset "utf-8";

/*
CSS-Datei für raumausstattung.schnittfincke.de
C. Frenkel, Berlin
webmaster@schnittfincke.de
*/

/* @group Schriften */

	/* fira-sans-regular - latin */
	@font-face {
	  font-family: 'Fira Sans';
	  font-style: normal;
	  font-weight: 400;
	  src: url('../fonts/fira-sans-v10-latin-regular.eot'); /* IE9 Compat Modes */
	  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
	       url('../fonts/fira-sans-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	       url('../fonts/fira-sans-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
	       url('../fonts/fira-sans-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
	       url('../fonts/fira-sans-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	       url('../fonts/fira-sans-v10-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
	}
	
	/* fira-sans-600 - latin */
	@font-face {
	  font-family: 'Fira Sans';
	  font-style: normal;
	  font-weight: 600;
	  src: url('../fonts/fira-sans-v10-latin-600.eot'); /* IE9 Compat Modes */
	  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'),
	       url('../fonts/fira-sans-v10-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	       url('../fonts/fira-sans-v10-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
	       url('../fonts/fira-sans-v10-latin-600.woff') format('woff'), /* Modern Browsers */
	       url('../fonts/fira-sans-v10-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
	       url('../fonts/fira-sans-v10-latin-600.svg#FiraSans') format('svg'); /* Legacy iOS */
	}

/* @end */


html {
	box-sizing: border-box;
	font-size: 112.5%;
	overscroll-behavior: none;
	--hell: #ebd4b0;
	--dunkel: #4f0b0a;
	--gesamtbreite: 40em;
	--aussenrand: 0.7em;
	--gs_a: 61.8%;
	--gs_b: 38.2%;
	--lilie: url('data:image/svg+xml;utf8,<svg fill="%23651017" height="127" viewBox="0 0 127 127" width="127" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="m37.2 41c-.781 0-1.18.785-1.37 1.77-.939-.983-1.33-2.36-1.33-3.53.738 0 1.37.294 2.11.736 0-1.28-1.08-1.91-2.11-1.91 0-1.67 1.62-3.29 3.88-3.29 3.59 0 4.91 2.01 4.91 5.25 1.91-1.13 3.68-4.08 3.68-6.82 0-2.75-2.16-5.3-4.91-5.3-4.02 0-5.69 1.52-7.51 3.98-1.42 1.91-1.82 5-1.82 6.18h-.779c0-2.8 1.27-5.59 2.55-8 .59-1.13 1.28-2.5 1.28-3.73 0-1.47-.687-3.09-1.67-4.86-.93-1.72-2.26-4.27-3.14-6.43-.885 2.16-2.21 4.71-3.14 6.43-.979 1.77-1.67 3.39-1.67 4.86 0 1.23.69 2.6 1.28 3.73 1.27 2.41 2.55 5.2 2.55 8h-.781c0-1.18-.392-4.27-1.82-6.18-1.82-2.46-3.49-3.98-7.51-3.98-2.75 0-4.91 2.55-4.91 5.3s1.77 5.69 3.68 6.82c0-3.24 1.33-5.25 4.91-5.25 2.26 0 3.88 1.62 3.88 3.29-1.03 0-2.11.637-2.11 1.91.733-.442 1.37-.736 2.11-.736 0 1.18-.392 2.55-1.32 3.53-.195-.983-.59-1.77-1.37-1.77-.933 0-1.82 1.03-1.82 2.16 0 1.18.69 2.11 1.87 2.11 1.96 0 4.03-2.5 4.22-6.03h.979c0 1.23-.0968 2.21-.389 2.95-.201.537-.392 1.03-.392 1.52 0 .686.981 3.14 1.77 4.91.784-1.77 1.76-4.22 1.76-4.91 0-.492-.195-.982-.389-1.52-.295-.736-.39-1.72-.39-2.95h.979c.194 3.53 2.25 6.03 4.22 6.03 1.18 0 1.87-.928 1.87-2.11 0-1.13-.881-2.16-1.82-2.16"/><use transform="translate(63.5 63.5)" xlink:href="%23a"/></svg>');
	--lilie2: url('data:image/svg+xml;utf8,<svg fill="%23DBC19A" height="127" viewBox="0 0 127 127" width="127" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="m37.2 41c-.781 0-1.18.785-1.37 1.77-.939-.983-1.33-2.36-1.33-3.53.738 0 1.37.294 2.11.736 0-1.28-1.08-1.91-2.11-1.91 0-1.67 1.62-3.29 3.88-3.29 3.59 0 4.91 2.01 4.91 5.25 1.91-1.13 3.68-4.08 3.68-6.82 0-2.75-2.16-5.3-4.91-5.3-4.02 0-5.69 1.52-7.51 3.98-1.42 1.91-1.82 5-1.82 6.18h-.779c0-2.8 1.27-5.59 2.55-8 .59-1.13 1.28-2.5 1.28-3.73 0-1.47-.687-3.09-1.67-4.86-.93-1.72-2.26-4.27-3.14-6.43-.885 2.16-2.21 4.71-3.14 6.43-.979 1.77-1.67 3.39-1.67 4.86 0 1.23.69 2.6 1.28 3.73 1.27 2.41 2.55 5.2 2.55 8h-.781c0-1.18-.392-4.27-1.82-6.18-1.82-2.46-3.49-3.98-7.51-3.98-2.75 0-4.91 2.55-4.91 5.3s1.77 5.69 3.68 6.82c0-3.24 1.33-5.25 4.91-5.25 2.26 0 3.88 1.62 3.88 3.29-1.03 0-2.11.637-2.11 1.91.733-.442 1.37-.736 2.11-.736 0 1.18-.392 2.55-1.32 3.53-.195-.983-.59-1.77-1.37-1.77-.933 0-1.82 1.03-1.82 2.16 0 1.18.69 2.11 1.87 2.11 1.96 0 4.03-2.5 4.22-6.03h.979c0 1.23-.0968 2.21-.389 2.95-.201.537-.392 1.03-.392 1.52 0 .686.981 3.14 1.77 4.91.784-1.77 1.76-4.22 1.76-4.91 0-.492-.195-.982-.389-1.52-.295-.736-.39-1.72-.39-2.95h.979c.194 3.53 2.25 6.03 4.22 6.03 1.18 0 1.87-.928 1.87-2.11 0-1.13-.881-2.16-1.82-2.16"/><use transform="translate(63.5 63.5)" xlink:href="%23a"/></svg>');
}

*, *::before, *::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Fira Sans";
	font-weight: 400;
	line-height: 140%;
	-webkit-text-size-adjust: none;
	-moz-font-feature-settings: "onum", "liga", "kern";
	     font-feature-settings: "onum", "liga", "kern";
}

/* mini (z.B. Uhr) */
@media screen and (max-width: 320px) {
	body {
		-webkit-hyphens: auto;
	       -moz-hyphens: auto;
	        -ms-hyphens: auto;
	            hyphens: auto;
	    -webkit-hyphenate-limit-last: always;   
	       -moz-hyphenate-limit-last: always;
	        -ms-hyphenate-limit-last: always;   
	            hyphenate-limit-last: always;   
	}
}

body::after {
	display: none;
}

@media screen and (max-width: 30em) {
    body::after {
        content: 'schmal';
    }
}

@media all and (min-width: 30em) {
					
    body::after {
        content: 'breit';
    }
	
	body main div.rechts {
	    width: var(--gs_b);
	    max-width: 50%;
	    float: right;
	}
		
}

/* @group Kopf */

	header {
		padding: 
			env(safe-area-inset-top) 
			env(safe-area-inset-right) 
			0 
			env(safe-area-inset-left);
		color: var(--hell);
		background-color: var(--dunkel);
		background-image:  
			linear-gradient(
				0deg,
				var(--hell)	0 2px,
				transparent	2px 100%
			),
			var(--lilie);
	}
	
	header > div {
		width: var(--gesamtbreite);
		max-width: 100%;
		margin: 0 auto;
		padding: var(--aussenrand) var(--aussenrand) 0 var(--aussenrand);
	}

/* @end */

/* @group Menü */

	nav {
		font-size: 0.9em;
	}
	
	nav ul {
		list-style: none;
	}

	nav a, nav b {
		color: var(--hell);
		display: block;
		padding: .2em .4em;
		text-decoration: none;
		border-style: solid;
		border-color: transparent; 
	}

	/* @group Tabs */
		nav ul {
			padding: var(--aussenrand) 0 0 0;
		}
		nav li {
			display: inline-block;
			margin: 0 3px 0 0;
		}
		nav li:last-of-type {
			margin: 0;
		}
		
		nav a, nav b {
			border-width: 2px 2px 0 2px;
			webkit-border-radius: 0.5em 0.5em 0 0;
			   moz-border-radius: 0.5em 0.5em 0 0;
			       border-radius: 0.5em 0.5em 0 0;
		}
		
		nav a:focus, nav a:hover {
			border-color: var(--hell);
			outline: none;
		}
		/* aktiver Tab */
		nav b {
			color: var(--dunkel);
			background-color: var(--hell);
			border-color: var(--hell);
		}

		/* aktiver Tab dunkel */
		@media screen and (prefers-color-scheme: dark) {
			nav b {
				background-color: var(--dunkel);
				color: var(--hell);
			}
		}
	/* @end */

	/* @group Liste */
	@media screen and (max-width: 23em) {
		
		nav ul {
			padding: var(--aussenrand) 0 var(--aussenrand) 0;
		}
		
		nav li {
			display: block;
		}
		
		nav a, nav b {
			border-width: 1px;
			webkit-border-radius: 0.5em;
			   moz-border-radius: 0.5em;
			       border-radius: 0.5em;
		}

		/* aktiver Tab */
		nav b {
			color: var(--hell);
			border-color: var(--hell);
			background: transparent;
		}

	}
	/* @end */
/* @end */






#inhalt, main {
	width: 100%;
	padding: 
		0 
		env(safe-area-inset-right)
		env(safe-area-inset-bottom)
		env(safe-area-inset-left);
	clear: both;
	box-sizing: border-box;
	text-align: left;
}

main > div {
	width: var(--gesamtbreite);
	max-width: 100%;
	margin: 0 auto;
	padding: 1em var(--aussenrand);	
}

hr {
	margin: 1.5em 0;
	height: 1px;
	border: none;
	opacity: 0.7;
	background: linear-gradient(
		90deg,
		transparent		0%,
		currentcolor	20% 80%,
		transparent		100%
	);
}

/* @group Überschriften */

	h1 {
		text-indent: -9999px;
		height: 0;
		padding: 20% 0 0 0;
		background: url(/grafik/h1.svg);
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	h2 {
		margin: 0 0 0.6em 0;
	}
	
	h3 {
		margin: 0 0 0.2em 0;
		padding: 0 0 0.1em 0;	/* verhindert Überschneidung zwischen Unterlängen und Unterstrich */
		border-width: 0 0 2px 0;
		border-style: solid;
	}

/* @end */


/* @group Text */

	b {
		font-weight: bold;
	}

	p {
		margin: 0 0 1em 0;
	}
	
	.versteckt {
		display: none;
	}
	
	.nowrap {
		white-space: nowrap;
		hyphens: none;
	}
	
	/* @group Links */
		.text a {
			position: relative;
		}
		
		.text a:focus, .text a:hover {
			outline: none;
			text-decoration: none;
		}

		.text a:hover::before, .text a:focus::before {
			content: "";
			position: absolute;
			top: -0.3em; 
			right: -0.4em; 
			bottom: -0.2em;
			left: -0.4em;
			border: 2px solid currentcolor;
			border-radius: 0.5em;
		}
				
		/* Telefonnummern */
		a[href^="tel:"] {
			white-space: nowrap;
		}
	/* @end */
	
/* @end */

/* @group Startseite */

	figure {
		margin-bottom: 1em;
		text-align: left;
	}
	
	figure img {
		width: 100%;
		display: block;
	}
	
	figcaption {
		font-size: 0.85em;
	}
	
	@media screen and (max-width: 30em) {

		figure {
				position: relative;
		}
		figure div {
			height: 53vw;
			overflow: hidden;
		}
		figure img {
			margin-top: -9%;
		}
		figure figcaption {
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 0 0.1em 0.5em;
		}
	}

	@media all and (min-width: 30em) {
						
		figure {
		    margin: 0 0 12px 12px;		
		}
		
		figcaption {
			padding-top: 8px;
		}
			
	}

/* @end */

/* @group Leistungen */

	#leistungen section {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: stretch;
		margin-bottom: 1em;
		margin-bottom: calc(2 * var(--aussenrand));
	}
	
	#leistungen section>* {
		margin-bottom: var(--aussenrand);
	}
	
	#leistungen section h3 {
		flex: 0 1 100%;
	}
	
	#leistungen dt {
		font-weight: bold;
	}
	
	#leistungen dd {
		margin-left: 1em;
	}
	
	#leistungen dd, dt + dt, dd + dt {
		margin-top: var(--aussenrand);
	}
	
	#leistungen dl {
	}
	
	div.bilder a img {
		width: 100%;
		min-width: 65px;
		max-width: 130px;
	}
	
						
	#leistungen section dl{
		flex: 1 1 var(--gs_a);
		padding: 0 0.5em 0 0;
	}
	
	#leistungen div.bilder {
		flex: 1 1 var(--gs_b);
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
		justify-content: strech;
		align-content: start;
		gap: var(--aussenrand);
	}

	
	#leistungen .bilder a {
		line-height: 0.7;
	}
		
				
	@media screen and (max-width: 30em) {
		
		#leistungen section dl{
			flex: 1 1 80%;
		}
		
		#leistungen div.bilder {
			flex: 1 1 20%;
		}

	}

/* @end */

/* @group Impressum */

	address {
		font-style: normal;
	}
	
	#impressum .karte {
		text-align: right;
	}

	#impressum .karte > a {
		font-size: smaller;
	}
	
	div.leaflet-popup-content {
		margin: 0.7em;
		text-align: center;
	}

	@media all and (min-width: 30em) {

		#impressum .text {
			width: var(--gs_b);
			float: left;
			padding-right: 0.5em;
		}
	
		#impressum .karte {
			float: right;
			width: var(--gs_a);
			padding-left: 0.5em;
		}
	
		#impressum #map {
			height: var(--gesamtbreite) ;
		}

	}
	
	@media screen and (max-width: 30em) {
		
		#impressum .text, #impressum .karte {
			margin-bottom: 1em;
		}
	
		#impressum #map {
			height: 60vh;
		}
		
	}

/* @end */




/* @group Farben */

	body {
		color: var(--dunkel);
		background: var(--hell) var(--lilie2);
	}
	
	hr {
		color: var(--dunkel);
	}
	
	figure {
		background: #fff;
	}
	
	figure div {
		border: 1px solid;
	}
	
	.schatten, div.bilder img {
		box-shadow: 0 2px 7px rgba(1, 1, 1, 0.5);
	}
	
	.rand {
		border: 8px solid #fff;
	}
	
	/* Dunkelmodus */
	@media screen and (prefers-color-scheme: dark) {
	
		body {
			background: var(--dunkel) var(--lilie);
			color: var(--hell);
		}
		
		hr {
			color: var(--hell);
		}
		
		figure, div#map {
			color: var(--dunkel);
			background: var(--hell);
			filter: brightness(0.85);
		}
		
		.schatten {
			box-shadow: 0 2px 10px rgba(1, 1, 1, 1);
		}
		
		.rand {
			border: 8px solid var(--hell);
		}
		
		div.leaflet-control-attribution {
			background: rgba(255, 255, 255, 0.6);
		}

		.text a {
			color: #7bfc00;
		}
		
	}
	
/* @end */