/* ### Konstanten ########################################################### */
 :root {
   --color-std-orange: #FF8000;
   --color-std-grey: #AAAAAA;
 }

/* ### CSS Reset ############################################################ */
img {
	display: block;
	width: 100%;
	height: auto;
}

/* ### Typografie ########################################################### */
body,
button,
input,
select,
textarea,
div,
section {
	color: #888888;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 1em 0;
	text-align: center;
}

p {
	margin: 0;
	padding: 1em 0;
}


p a,
p a {
	color: var(--color-std-orange);
}
p a:hover,
p a:focus,
p a:hover,
p a:focus {
  color: red;
	border-bottom: 1px solid #FFFFFF;
}


.icon {
  float: right;
	width: 16px;
	height: 16px;
}


/* ### Bereich: Header ###################################################### */
.container {
  width: 100%;
}
.header {
  background-color: var(--color-std-orange);
  color: #FFFFFF;
  text-align: right;
  font-size: 0.8em;
}
.full {
  margin: auto;
  max-width: 50em;
  padding: 0;
  /*border: 1px solid grey;*/
}



/* ### Bereich: Navigation ################################################## */
.navigation {
  margin: 0;
  padding: 0;
}
.navigation_logo { visibility: hidden; }
.navigation_logo img { visibility: hidden; }
@media screen and (min-width: 600px) {
  .navigation_logo {
    visibility: visible;
    float: left;
    height: 2.6em;
    /*border: 1px solid green;*/
  }
  .navigation_logo img {
    visibility: visible;
    height: 1.6em;
    margin-left: 0.5em;
    margin-top: 0.5em;
    margin-right: 1em;
    margin-bottom: 0.5em;
    width: auto;
    /*border: 1px solid blue;*/
  }
}

.navigation_menue {
  height: 2.5em;
  margin: 0;
  padding: 0;
  padding-top: 1em;
  padding-bottom: 1.5em;
  background: #FFFFFF;
  /*border: 1px solid purple;*/
}
.navigation_menue ul {
  float: right;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.navigation_menue li {
  display: inline; /* li nebeneinander anzeigen */
  list-style-type: none; /* ohne Aufzählungspunkte */
  margin: 0;
  padding: 0.5em;
  font-family: Arial, sans-serif;
  font-size: 1.0em;
  text-decoration: none;
}
.navigation_menue a:link {
  font-family: Arial, sans-serif;
  color: var(--color-std-orange);
  text-decoration: none;
}
.navigation_menue a:hover {
  font-family: Arial, sans-serif;
  color: #666666;
}
.navigation_menue li:hover {
  /*border-bottom: 0.2em solid grey;*/
}



/* ### Bereich: 2-Spaltig ################################################### */
.twin,
.twin_intro_text {
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 1em;
	background-color: var(--color-std-orange);
	color: #FFFFFF;
}
.twin_intro_text h1 {
  padding: 0;
  color: #FFFFFF;
}

.twin:last-of-type,
.twin_intro_text:last-of-type {
  /*padding: 2em;
	background-color: var(--color-std-orange);*/
}

.twin_intro_img_praxis {
  width: 100%;
  height: 100%;
  padding: 0em;
  background-image: url("../img/layout/teamhebamme.jpg");
  background-size: cover;
  background-position: 50% 50%;
}
.twin_intro_img_team {
  width: 100%;
  height: 100%;
  padding: 0em;
  background-image: url("../img/layout/team.jpg");
  background-size: cover;
  background-position: 50% 50%;
}
.twin_intro_img_ultraschall {
  width: 100%;
  height: 100%;
  padding: 0em;
  background-image: url("../img/layout/ultraschall.jpg");
  background-size: cover;
  background-position: 50% 50%;
}
.intro_text {
  text-align: center;
  color: #FFFFFF;
}



/* ### Bereich: Splash (Text: 2-Spaltig) #################################### */
.splash {
	background: #FFFFFF;
	padding-bottom: 1em;
}
.splash-content {
	padding: 0.5em;
}
/* Bei einem großen Bildschirm wird der Text 2-Spaltig dargestellt */
@media screen and (min-width: 600px) {
	.splash-text {
	  columns: 2;
    column-gap: 2em;
	}
	.splash-text p {
		padding-top: 0;
	}
}

/* ### Bereich: Bucket ###################################################### */
.buckets {
	padding: 0em;
  margin: 0em;
	background: #FFFFFF;
}

.buckets ul {
	margin: 0em;
	padding: 0em;
}
.buckets li {
	margin-bottom: 0em;
	background: #FFFFFF;
	list-style-type: none;
}
.bucket {
	padding: 0.5em;
}


/* ### Bereich: Weitere ##################################################### */
.more {
	padding: 1em;
}



/* footer section */
.footer,
.footer4 {
	padding: 1em;
	background: #888888;
	text-align: center;
	color: #EEEEEE;
  font-size: 0.8em;
  margin:auto;
}

aside .aside {
  display:inline-block;
  text-align: left;
  color: #EEEEEE;
  font-size: 1em;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer4 h1,
.footer4 h2,
.footer4 h3,
.footer4 h4 {
  padding-bottom: 0;
}

.footer a,
.footer4 a {
	color: #FFFFFF;
}
.footer a:hover,
.footer a:focus,
.footer4 a:hover,
.footer4 a:focus {
	border-bottom: 1px solid #FFFFFF;
}


/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
	.grid {
		max-width: 50em;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
Use flex to create a three-bucket layout
--------------------------------------------------------------*/

@media screen and (min-width: 600px) {
	@supports (display: flex) {
		.buckets ul {
			display: flex;
			justify-content: space-around;
		}
		.buckets li {
			width: calc(33% - 1em);
		}
    .bucket {
      padding: 0em;
    }
	}
}


/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@media screen and (min-width: 600px) {
	/* Layout with CSS Grid */
	@supports (display: grid) {

		/* 4-Spalten layout. Zwei mittige Spaltenmit einer maximalen Breite von 2x25em */
		.grid {
			display: grid;
			grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
      /*border: 1px solid grey;*/
		}
    .grid4 {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
      /*border: 1px solid grey;*/
		}

		/* Elemente werden zentriert, indem sie in den zwei mittleren Spalten dargestellt werden */
		.splash-content,
		.more-content,
		.buckets ul {
			grid-column: 2/4;
      /*border: 1px dotted green;*/
		}
    .more-content {
      padding-left: 0.5em;
      padding-right: 0.5em;
    }

		/* Use automatic grid placement + span to let each item span two columns:*/
		.twin,
    .twin_intro_text,
    .twin_intro_img,
    .twin_intro_img_team,
    .twin_intro_img_ultraschall,
		.footer aside {
			grid-column: span 2;
      /*border: 1px solid violet;*/
		}
    .footer4 aside,
    .twin2 {
      grid-column: span 1;
      /*border: 1px solid violet;*/
    }

    .intro_text {
      float: right;
      max-width: calc(21em + 2em);
      /*border: 1px solid red;*/
    }
	}
}