:root {

		--primary-text-color:#0e71b4;
		--secondary-text-color:#fff;
		
		--primary-color:#fff;
		--secondary-color:#58b89c;
		
		
		--secondary-box-radius:0.5em;
		--third-box-radius:1.5em;
		
		--primary-line-height:1.5em;
		--secondary-line-height:1.2em;
	}
	
	
	
	
	@media screen and (min-width:901px) {
		:root {
			--primary-font-size:21px;
			--secondary-font-size:23px;
			--third-font-size:34px;
			--fourth-font-size:42px;
			
			--box-radius:1em;
		}
	}
	@media screen and (min-width:561px) and (max-width:900px) {
		:root {
			--primary-font-size:18px;
			--secondary-font-size:20px;
			--third-font-size:30px;
			--fourth-font-size:36px;
			
			--box-radius:0.75em;
		}
	}
	@media screen and (max-width:560px) {
		:root {
			--primary-font-size:16px;
			--secondary-font-size:18px;
			--third-font-size:24px;
			--fourth-font-size:28px;
			
			--box-radius:0.5em;
		}
	}
		
		

	body, a {
		color:var(--primary-text-color);
	}

	body {
		font-family:Roboto,Helvetica,Arial,Geneva,sans-serif;
		background:var(--primary-color);
		font-size:var(--primary-font-size);
		line-height:var(--primary-line-height);
		margin:0;
		padding:0;
	}
	
	a {
		text-decoration:none;
	}
	a:hover {
		text-decoration:underline;
	}
	
	h1, h2, p {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
	}
	
	
	h1, h2 {
		line-height:var(--secondary-line-height);
	}
	
	h1 {
		font-size:var(--fourth-font-size);
	}
	h2 {
		font-size:var(--third-font-size);
	}


	header, main {
		max-width:1380px;
		margin:auto;
	}
	header, main, footer {
		padding-left:3.6vw;
		padding-right:3.6vw;
	}
	
	
	main > article:first-child ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align:left;
	}
	
	.b {
		color:var(--secondary-text-color);
		background:var(--secondary-color);
		border-radius:var(--box-radius);
		padding:1.5em;
	}
	.b > :first-child {
		margin-top:0;
	}
	.b > :last-child {
		margin-bottom:0;
	}
	
	
	
	#menu {
		display:flex;
		align-items:center;
		padding:1em 0;
		position:relative;
	}
	.menu {
		list-style:none;
		padding:0;
		margin:0;
		display:flex;
		gap:1.5em;
		margin-left:auto;
	}
	#menu a {
		text-transform:uppercase;
		font-weight:bold;
		font-size:var(--secondary-font-size);
	}
	
	.collapsed-menu.hidden {
		display:none;
	}
	
	
	
	@media screen and (min-width:1081px) {
		.collapsed-menu, .menu-btn{
			display:none;
		}
	}
	@media screen and (max-width:1080px) {
		
		.menu-btn{
			background:none;
			border:none;
			height:48px;
			width:48px;
			color:var(--primary-text-color);
			font-size: 2em;
			font-weight:bold;
			/*line-height:1em;*/
			margin-left:1em;
			display:flex;
			align-items:center;
		}
		.collapsed-menu{
			margin:0;
			padding:1em 2em;
			list-style:none;
			position:absolute;
			top:100%;
			right:0;
			text-align:right;
			align-items:flex-end;
			background:rgba(255,255,255,0.9);
			border-radius:var(--third-box-radius);
		}
		.collapsed-menu a {
			line-height:2em;
		}
		
		
		.menu li:nth-child(5){
			display:none;
		}
	}	
		
	
	
	
	
	@media screen and (max-width:950px) {
		.menu li:nth-child(4){
			display:none;
		}
	}	
	@media screen and (max-width:720px) {
		.menu li:nth-child(3){
			display:none;
		}
	}	
	@media screen and (max-width:540px) {
		.menu li:nth-child(2){
			display:none;
		}
	}	
	@media screen and (max-width:400px) {
		.menu li:nth-child(1){
			display:none;
		}
	}
	
	
	/*@media screen and (max-width:560px) {
		.menu li:nth-child(1){
			display:none;
		}
	}*/
	
	
	
	
	

	.hero .b, main {
		text-align:center;
	}
	
	
	
	.hero:before {
		content:"";
		display:block;
		width:100%;
		border-radius:var(--box-radius);
		background-repeat:no-repeat;
		background-size:contain;
	}
	

	

	.hero .b {
		position:relative;
	}
	.hero h1 {
		margin-bottom:0;
	}
	.hero .b:before {
		content:"";
		position:absolute;
		left:4.3vw;
		width:145px;
		height:201px;
		width:10.508%;
		height:0;
		padding-bottom:14.566%;
		background-image:url(/imgs/berolina-ambulanz.de/wappen.svg);
		background-repeat:no-repeat;
		background-size:contain;
	}
	
	
	@media screen and (max-width:1200px) {
		.hero .b {
			padding-left:calc(3em + 10.508%);
		}
	}	
	@media screen and (max-width:1000px) {
		.hero .b {
			padding:1em 1em 1em calc(2em + 10.508%);
		}
		.hero .b h1 {
			font-size: var(--third-font-size);
		}
	}	
	@media screen and (max-width:800px) {
		.hero .b h1 {
			font-size: var(--secondary-font-size);
		}
	}	
	@media screen and (max-width:500px) {
		.hero .b h1 {
			font-size: var(--primary-font-size);
		}
	}	
	@media screen and (max-width:340px) {
		.hero .b {
			padding-left:1em;
		}
		.hero .b:before {
			display:none;
		}
	}
	
	
	
	
	main {
		display:flex;
		flex-direction:column;
		gap:3em;
		padding-top:3.6vw;
		padding-bottom:2em;
	}
	main > article:first-child .fl {
		margin-top:2em;
	}

	.fl, .af {
		display:flex;
		flex-wrap:wrap;
		gap:2em;
	
	}
	.fl > section {
		flex:1;	
		display:flex;
		flex-direction:column;
		gap:2em;
	}
	.fl .b:last-child {
		margin-top:auto;
	}
	.fl strong {
		display:block;
		font-size:var(--third-font-size);
		line-height:var(--secondary-line-height);
	}
	.fl strong + span {
		font-size:var(--secondary-font-size);
		line-height:var(--secondary-line-height);
	}
	.fl img {
		margin:auto;
	}
	
	
	
	.af > div {
		flex:1;
		text-align:left;
	}
	
	.af img {
		max-width:100%;
		height:auto;
		width:907px;
		border-radius:var(--box-radius);
	}
	.af h2 {
		margin-top:0;
	}
	.af ul {
		list-style:none;
		padding:0;
	}
	.af li {
		margin-top:1em;
	}
	

	/*.co {
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:2em;
	}*/
	.co .b {
		width:100%;
		box-sizing:border-box;
	}
	
	
	
	
	footer {
		/*border-top:3px solid var(--secondary-color);*/
		text-align:center;
		/*padding-top:2em;*/
		display:flex;
		justify-content:center;
		flex-wrap:wrap;
		gap:0.5em;
	}
	footer, footer > * {
		font-weight:bold;
		font-size:var(--secondary-font-size);
	}
	footer span {
		font-size:var(--secondary-font-size);
		font-weight:bold;
	}
	footer > ul + span {
		display:block;
		margin-bottom:1em;
		flex-basis:100%;
	}
	
	footer ul {
		list-style:none;
		text-align:left;
		padding:0;
		display:flex;
		gap:1em;
		margin:1em 0 2em 0;
	}
	footer li {
		display:flex;
		align-items:center;
		gap:0.5em;
		font-weight:bold;
	}
	
	
	
	footer li:before {
		background-image:url(/imgs/berolina-ambulanz.de/phone.svg);
		background-size:contain;
		background-repeat:no-repeat;
	}	
	/*footer li + li:before {
		background-image:url(/imgs/berolina-ambulanz.de/smartphone.svg);
	}*/	
	footer li + li:before {
		background-image:url(/imgs/berolina-ambulanz.de/mail.svg);
	}	
	footer li + li + li:before {
		background-image:url(/imgs/berolina-ambulanz.de/www.svg);
	}
	

	
	
	
	
	@media screen and (min-width:1201px) {
		.af > picture {
			flex-basis:65.725%;
		}
	}
	@media screen and (max-width:1200px) {
		.af > picture {
			flex-basis:907px;
			order:1;
		}
		.af > div {
			flex-basis:100%;
			order:2;
		}
	}
	
	@media screen and (min-width:901px) {
		footer li {
			font-size:var(--third-font-size);
		}
		footer li:before {
			width:92px;
			height:92px;
		}
	}
	
	
	@media screen and (min-width:561px) {
		
		#menu img {
			width:172px;
			height:auto;
		}
		
		.hero:before {
			padding-bottom:53.624%;
		}
	}
	@media screen and (min-width:561px) and (max-width:1200px) {
		.fl > section:first-child, .fl > section:first-child + section {
			flex-basis:calc(50% - 2em);
		}
	}
	
	@media screen and (min-width:561px) and (max-width:900px) {
		footer li {
			font-size:var(--third-font-size);
		}
	}	
	@media screen and (min-width:451px) and (max-width:900px) {
		footer li {
			font-size:var(--third-font-size);
		}
		footer li:before {
			width:60px;
			height:60px;
		}
	}
	
	
	@media screen and (max-width:560px) {
		/*#menu img {
			max-width:40px;
			height:auto;
		}*/
		.hero:before {
			padding-bottom:100%;
		}
		.fl > section {
			flex-basis:100%;
		}

		
	}
	
	@media screen and (min-width:451px) {
		footer ul {
			flex-direction:column;
		}
		footer li:before {
			content:"";
		}
	}

	@media screen and (max-width:450px) {

		footer ul {
			position:fixed;
			bottom:3.6vw;
			left:1.8vw;
			right:1.8vw;
			padding:3.6vw 7.2vw;
			background: rgba(255, 255, 255, 0.9);
			border-radius: var(--third-box-radius);
			justify-content:space-between;
			align-items:center;
			margin:0;
		}
		
		footer ul:before {
			content:"";
			background-image:url(/imgs/berolina-ambulanz.de/wappen.svg);
			background-size:contain;
			background-repeat:no-repeat;
			background-position:center;
		}
		
		footer li {
			text-indent:-999px;
		}
		footer li:last-child {
			display:none;
		}
		footer li a {
			background-image:url(/imgs/berolina-ambulanz.de/phone.svg);
			background-size:contain;
			background-repeat:no-repeat;
		}
		/*footer li + li a {
			background-image:url(/imgs/berolina-ambulanz.de/smartphone.svg);
		}*/	
		footer li + li a {
			background-image:url(/imgs/berolina-ambulanz.de/mail.svg);
		}
	}
	
	
	@media screen and (min-width:360px) and (max-width:450px) {
		
		footer {
			padding-bottom:120px;
		}
		footer ul:before {
			width:50px;
			height:70px;
		}
		footer li, footer li a {
			width:60px;
			height:60px;
		}
	}
	@media screen and (min-width:321px) and (max-width:360px) {
		footer {
			padding-bottom:100px;
		}
		footer ul:before {
			width:40px;
			height:60px;
		}
		footer li, footer li a {
			width:50px;
			height:50px;
		}
	}
	@media screen and (max-width:320px) {
		footer {
			padding-bottom:80px;
		}
		footer ul:before {
			width:30px;
			height:50px;
		}
		footer li, footer li a {
			width:40px;
			height:40px;
		}
	}
	
	
	@media screen and (max-width:320px) {
		footer li {
			font-size:var(--primary-font-size);
		}
	}
	

/* roboto-regular - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/font/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/font/roboto-v30-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/font/roboto-v30-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/font/roboto-v30-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}