/* Basiseinstellungen ******************************************************************************************************************/

/* Konstanten */
:root {
	--const-border-radius: 3%;
}

/* latin-ext - reicht eigentlich aus für D */
@font-face {
  font-family: 'Overlock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/overlock-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Overlock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/overlock-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Default-Padding (=Rand drumherum): 8 Pixel! */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  text-align: center; /* Texte zentrieren, betrifft nicht li...*/
}

/* MODALES POPUP */

#note { font-size: 17px; background-color: transparent; background-image: url(../img/black70.png); background-repeat: repeat; text-align: center;
	visibility: visible; position: fixed; z-index: 900; top: 0; width: 100%; height: 100%; float: none; overflow: hidden; clip: rect(auto auto auto auto); }
.popup { font-size: 17px; background-color: #fff; background-repeat: no-repeat; text-align: left; visibility: visible; position: relative; z-index: 900;
	top: 120px; width: 70%; height: auto; float: none; overflow: hidden; clip: rect(auto auto auto auto); margin-right: auto; margin-left: auto; padding: 50px;
	border: solid 1px #2c60af; border-radius: 20px; -webkit-box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); -moz-box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); }
.popuptext { color: #436572; font-size: 1.25rem; line-height: 1.25rem; width: 53%; float: left; }
/* .popuptext > p { margin: 10; } */
.popupbild { width: 45%; float: right; clear: left; }
.headlinepopup { font-size: 2.5rem; font-weight: bold; line-height: 2.75rem; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 20px; padding-left: 0; }
.highlightpopup { color: #ea7d06; font-size: 1.875rem; font-weight: bold; line-height: 1rem; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 10px; padding-left: 0; }
.x-button { position: absolute; top: 10px; right: 10px; }


section {
  min-height: 100%; /* hierdurch ist jede Section immer die gesamte Bildschirmhöhe hoch, auch wenn man das Browserfenster verkleinert! */
}

a {
  text-decoration: none; /* unterdrückt Unterstreichen bei Hyperlinks */
}

li {
  list-style-type: none; /* entfernt Punkte vor Aufzählungen, außerdem werden die Einträge dadurch auch gecentert (durch oben: text-align: center)! */
}

/* Speziellere Tags */

/* Ausblenden von Elementen über Klasse */
.inputJetzt {
  display: none;
}

/* info_box_gruen/rot sind für E-Mail-Versandergebnis */
.info_box_gruen {
  width: 450px;
  margin: 0px auto;
  background: #46691C;
  color: #ffffff;
  padding: 10px;
  border: 1px solid #888888;
  border-radius: 5px;
  text-align: center;
  margin-top: 15px;
}

.info_box_rot {
  width: 450px;
  margin: 0px auto;
  background: red;
  color: #ffffff;
  padding: 10px;
  border: 1px solid #888888;
  border-radius: 5px;
  text-align: center;
  margin-top: 15px;
}

h1, h2, h3, a, td, .grid {
  font-family: 'Overlock';
  font-weight: 900;
  color: #46691C;
}

.navMob a {
  font-family: 'Overlock';
  font-weight: 900;
  color: #ADDB76;
}

h1, h2, h3, h4, a {
  text-transform: uppercase;
}

h2 {
  color: #5d7177;
}

h3 {
  font-size: 40px;
  padding-top: 5%; /* %-Angabe, da feste Pixel-Werte auf unterschiedlich großen Bildschirmen seltsam aussehen können */
  margin: 0px;  /* damit zwischen den sections kein zusätzlicher farbiger Balken existiert (default ca. 30px?) */
  margin-bottom: 5px; /* H3 hat einen Standard Margin von 40, ist zuviel */
}

.Zweitüberschrift {
  /* h3 Zweitüberschriften auf einer Seite sollen weniger Padding haben */
  padding-top: 3%; /* %-Angabe, da feste Pixel-Werte auf unterschiedlich großen Bildschirmen seltsam aussehen können */
}

h4, p {
  font-family: 'Overlock';
  font-size: 1.25rem;
  /* font-family: 'Roboto Slab', serif; */
  color: #494949; /* leichtes Grau */
}

hr {
  width: 90px; /* nur wenig breit statt über ganze Breite */
  height: 3px; /* fetter */
  background: #46691C;
  border: 0;
  margin: 0 auto 40px auto; /* Im Uhrzeigersinn bei 12 Uhr beginnend. Alternativ: Einzeltags -left:... nehmen */
}

#logo, li, img, .button, .fa-bars, .main-nav, label {
  transition: 300ms; /* kleine Verzögerungs-Animation für die Deckkraftänderung beim hover unten. Funktioniert nicht bei allen Browsern, daher: */
  -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; /* browserabhängige Definitionen: safari, Mozilla, Opera */
}

.clickable-div /* Für Logo im Header */
{
	cursor: pointer;
}

.fa-chevron-circle-down {
    font-size: 40px;
    opacity: 0.7;
    color: #203309; /* #46691C;*/
    margin-top: 20px;
		margin-bottom: 20px;
  }

.fa-chevron-circle-down:hover {
    opacity: 1; /*  */
  }

.fa-bars {display: none;}	/* Hamburger-Menü initial ausblenden */


/* NEUES HAMBURGER MENU */

.navMob {
    /* border-bottom: 1px solid #EAEAEB; */
    text-align: right;
    height: 65px;
    line-height: 65px;
}

.menu {
    margin: 0 20px 0 0;
}

.menu a {
    clear: right;
    text-decoration: none;
    margin: 0 10px;
    line-height: 40px;
}

label {
    margin: 0 20px 0 0;
    font-size: 26px;
    line-height: 40px;
    display: none;
    width: 26px;
    float: right;
		color: #ADDB76;
}

#toggle {
    display: none;
}
/* NEUES HAMBURGER MENU */


/* HEADER ******************************************************************************************************************/

header {
  width: 100%;
  height: 65px;
  position: fixed;
  top: 0; /* Bei position: fixed kann man den header damit nach unten ziehen (Abstand zwischen Browserfenster und oberem Rand header) */
  left: 0; /* ... bzw. nach rechts */
  background: white; /* Alternativ #fff */
  background-color: #334016; /* HEADER! */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 1px=Höhe des Schattens, 3px=Schärfe (Verlauf!), rgba=rgb+Alpha-Channel = Transparenz. 0=komplett Transp. 1=keine Transp. */
  z-index: 10; /* =Vorder-/Hintergrund. Default = 0. Höchster Wert ganz vorne. Ohne dies überlagern z.B. Bilder u.U. den header!
                 Haben mehrere Objekte einen z-index, sollte der header den höchsten Wert haben */
}

#logo {
	width: 50px;
  float: left;
  margin: 5px 0 0 50px;
}

#logo:hover { /* Pseudo-Klasse erstellen */
  opacity: 0.5; /* halbe Deckkraft beim Drüberfahren */
  }

#logo img {
  width: 100%; /* im Logo Div-Container -> Bild wird auf dessen Größe verkleinert, sonst ist es immer gleich groß */
}

header nav {
  float: right; /* Menüpunkte rechtsbündig */
  margin: 10px 50px 0 0;
}

header nav ul a li {
  float: left; /* Einzelne li's statt untereinander jetzt nebeneinander, der oberste links */
  margin-left: 25px; /* Abstand zwischen den Texten einfügen, nicht margin-right, da sonst das letzte Wort zu viel rechten Rand hat */
}

header nav ul a li { /* Text-Menüeinträge  */
  font-size: 16px;
  color: #ADDB76;
}

header nav i { /* Hamburger-Menüeintrag  */
  font-size: 16px;
  color: #ADDB76;
}

#Behandlungsablauf .fett { /* War mal #Behandlungsablauf ul li */
  font-family: 'Overlock';
  font-size: 1.25rem; /* [=20px] */
  color: #46691C;
  font-weight: bold;
}

header nav ul li:hover {
  padding-top: 5px; /* Text 5 Pixel nach unten verschieben, wenn Maus drüber ist. Durch das transition auch für li oben eine kleine Verzögerung */
}

/* LandingPage = LANDING-PAGE ******************************************************************************************************************/

#LandingPage h1 {
  /* ohne das hier verschwindet die H1 unter dem header */
  margin: 140px auto 0 auto; /* damit das funktioniert, muss man vor dem h1 z.B. eine Linie einfügen, damit die h1 sich mit den 240px davon abstoßen kann!
                                Die Linie ist unter dem header verschwunden, ist aber da und theoretisch sichtbar! */
  font-size: 6.875rem; /* 110px; */
  color: #46691C;
}

#LandingPage h2 {
  margin: 0 auto 0 auto;
  font-size: 5rem; /* 80px; */
  color: #46691C;
	text-shadow: 0 0 0.5em white;
}

#LandingPage p {
  margin: 0 auto 0 auto;
  margin-top: 20px;
  font-size: 1.75rem; /* 28px; */
	font-weight: bold;
	text-shadow: 0 0 0.5em white;
  color: #203309;
}

#LPPortrait {
	width: 350px;
	margin-top: 10px;
  opacity: 1.0; /* Standard für das Bild in home (=Pfeil) 70%  */
	border-radius: var(--const-border-radius);
	box-shadow: 0 2px 5px white; /* 1px=Höhe des Schattens, 3px=Schärfe (Verlauf!), rgba=rgb+Alpha-Channel = Transparenz. 0=komplett Transp. 1=keine Transp. */
}

#LPLogo {
	width: 116px;
	margin-top: 10px;
  opacity: 1.0; /* Standard für das Bild in home (=Pfeil) 70%  */
}

/*
#LandingPage img {
  width: 32px;
  margin-top: 150px;
  opacity: 0.7;
}

#LandingPage img:hover {
  opacity: 1;
}
*/

/* Profil ******************************************************************************************************************/

#Profil {
  background-color: #e8ffe8;
}

#Foto {
  width: 250px;
}

/* Das DH-Logo hat #Profil > p > img und wird daher hier nicht berücksichtigt! */
#Profil > img:hover {
  transform: scale(1.05); /* leichte Vergrößerung beim Drüberfahren, die Transition 300ms von oben gilt auch hier */
  -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05);
}

#Profil h4 {
  font-size: 25px;
}

#Profil p {
  width: 1100px;
  margin: 0 auto 0 auto; /* Zentriert den ganzen Textblock, sonst wäre der Text zwar zentriert, aber der Block komplett links */
  margin-bottom: 18px;
}


/* Behandlungsspektrum ******************************************************************************************************************/

#Behandlungsspektrum {
  background-color: #e0ffe0;
}

#Behandlungsspektrum p {
  width: 1100px; /* Den Text von der ganzen Seitenbreite auf 700 px einengen */
  margin: 18px auto 18px auto; /* Zentriert den ganzen Textblock, sonst wäre der Text zwar zentriert, aber der Block komplett links */
}

#GridBehandlungsspektrum {
  max-width: 1140px; /* max- = WICHTIG, DAMIT der  */
  margin: 0 auto 0 auto;
}

.grid {
	width: 95%;
  display: grid; /*grid = block-level grid oder inline-grid = inline-level grid*/
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-gap: 0.75rem;
}


.grid > div {
  background: #ADDB76;
  padding: 1.0rem;
  border-radius: 0.75rem;
  margin-bottom: 0px;
}

/* Die Überschrift in den Grid-Boxen ist vergrößert, aber der Erklärungstext normal */
.grid > div > span {
	font-size: 1rem;
	font-weight: normal;
}

body {
  /* margin: 1rem; */
  font-size: 18px;
}

#Behandlungsspektrum img {
  border-radius: var(--const-border-radius);
  /* width: 100%; */ /* Auto. Verkeinerung der Bilder in allen Screen-Formaten! */
}

/* Behandlungsablauf ******************************************************************************************************************/

#Behandlungsablauf {
  background-color: #d1ffd1;
}

#Behandlungsablauf p {
	width: 1100px; /* Den Text von der ganzen Seitenbreite auf 700 px einengen */
  margin: 0 auto 0 auto; /* Zentriert den ganzen Textblock, sonst wäre der Text zwar zentriert, aber der Block komplett links */
  margin-top: 18px; /* Vor jedem Absatz einen Abstand */
  margin-bottom: 18px; /* Nach jedem Absatz einen Abstand. Vor & Nach addieren sich nicht auf!!!! */
}

/* Grid-Definitionen von oben gelten auch hier! */

#Behandlungsablauf img {
  border-radius: var(--const-border-radius);
}

/* Behandlungsmethoden ******************************************************************************************************************/

#Behandlungsmethoden {
  background-color: #c9ffc9;
}

#Behandlungsmethoden p {
  width: 1100px; /* Den Text von der ganzen Seitenbreite auf 700 px einengen */
  margin: 0 auto 0 auto; /* Zentriert den ganzen Textblock, sonst wäre der Text zwar zentriert, aber der Block komplett links */
  margin-top: 18px; /* Vor jedem Absatz einen Abstand */
  margin-bottom: 18px; /* Nach jedem Absatz einen Abstand. Vor & Nach addieren sich nicht auf!!!! */
	font-weight: normal;
}

#GridBehandlungsmethoden {
  max-width: 1140px; /* max- = WICHTIG, DAMIT der  */
  margin: 0 auto 0 auto;
}

#GridBehandlungsmethoden img {
  /* margin-bottom: 10px; */
  border-radius: var(--const-border-radius);
  width: 100%; /* Auto. Verkeinerung der Bilder in allen Screen-Formaten! */
	margin-top: 18px; /* Vor jedem Absatz einen Abstand */
  margin-bottom: 18px; /* Nach jedem Absatz einen Abstand. Vor & Nach addieren sich nicht auf!!!! */
}

/* Kontakt ******************************************************************************************************************/

#Kontakt {
  background-color: #c2ffc2; /* C9E70B Grasgrün = C1DB00 (Saturierung 100) mit Saturierung 95 */
}

#Kontakt p {
	width: 1100px;
	margin: 0 auto 0 auto; /* Zentriert den ganzen Textblock, sonst wäre der Text zwar zentriert, aber der Block komplett links */
}

form input, textarea {
  /* font-family: 'Roboto Slab', serif; */
  font-family: 'Overlock';
  font-size: 20px;
  margin-bottom: 10px;
  border-radius: 2px; /* abgerundete Ecken */
  border: 2px solid; /* durchgehender Rahmen */
  border-color: #494949;
  outline: none; /* entfernt den blauen Rahmen, der um das gewählte Textfeld erscheint, falls man das nicht möchte */
}

form input:first-child { /* Pseudoklasse: nur das obersteder 3 Eingabefelder soll einen zusätzlichen kleinen Abstand erhalten */
  margin-top: 10px;
}

form input {
  width: 552px;
  height: 30px;
}

form textarea {
  width: 550px;
  height: 150px;
  resize: none; /* Kein Vergößern des Textfeldes mehr möglich */
}

.input_text { /* Nur damit man diese hier über die Klasse ansprechen kann, haben die 3 Eingabefelder diesen Klassennamen hier bekommen! */
  color: #494949; /* das ist die Farbe des Textes, in dem man das Feld ausfüllt - nicht die des Placeholders! */
  padding-left: 10px;
}

/*Die Textfarben des Placeholders auf ein Grau setzen */
::-webkit-input-placeholder {color: #999999;}
::-moz-placeholder {color: #999999;}
:-ms-input-placeholder {color: #999999 !important;}
:-moz-placeholder {color: #999999;}

.button {
  background-color: #f0f0f0;
  color: #494949;
  width: 566px;
  height: 50px;
}

.button:hover { /* Pseudoklasse */
  background-color: #494949; /* Button- & Textfarbe gerade vertauschen */
  color: #f0f0f0;
}

/* Impressum ******************************************************************************************************************/

#Impressum {
  background-color: #baffba; /* C9E70B Grasgrün = C1DB00 (Saturierung 100) mit Saturierung 95 */
}

#Impressum th, td {
  text-align: left;
  padding: 8px;
}

#Impressum p {
	font-size: 1rem;
	width: 1100px; /* Den Text von der ganzen Seitenbreite auf 700 px einengen */
  margin: 0 auto 0 auto; /* Zentriert den ganzen Textblock, sonst wäre der Text zwar zentriert, aber der Block komplett links */
  margin-top: 18px; /* Vor jedem Absatz einen Abstand */
  margin-bottom: 18px; /* Nach jedem Absatz einen Abstand. Vor & Nach addieren sich nicht auf!!!! */
	font-weight: normal;
}

table {
  width: 700px;
  margin: 0 auto;
  background: white;
  font-size: 1.25rem;
	border-radius: 5px; /* abgerundete Ecken */
}

tr:nth-child(even) {background-color: #f2f2f2;}

/* FOOTER ******************************************************************************************************************/

footer {
  width: 100%;
  height: 70px;
  background-color: #334016; /* #203309; */

}

footer p {
  font-size: 16px;
  color: #ADDB76;
  padding-top: 25px;
  margin: 0px;  /* damit zwischen den sections kein zusätzlicher farbiger Balken existiert (default ca. 30px?) */
}





/* MEDIA QUERIES ******************************************************************************************************************/
/* max-width: ...px legt fest, dass die Angaben zwischen {} ausgeführt werden, wenn die Display-Größe max. ... Pixel ist */

/* MEDIA QUERIES - MOBILE **************************************/

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

	#note p { margin-top: 0; margin-bottom: 0; }
	.popup { font-size: 15px; background-color: #fff; background-repeat: no-repeat; text-align: center; visibility: visible; position: relative; z-index: 900; top: 20px; width: 85%; height: 88%;
		float: none; overflow: hidden; clip: rect(auto auto auto auto); margin-right: auto; margin-left: auto; padding: 15px; border: solid 1px #2c60af; border-radius: 20px;
		-webkit-box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); -moz-box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); }
	.popuptext { width: 100%; }
	.popuptext, .infotext { color: #436572; font-size: 0.85rem; line-height: 1rem; width: 100%; float: left; margin: 0; }
	.popupbild { width: 100%; float: right; clear: left; }
	.headlinepopup { font-size: 1.2rem; font-weight: bold; line-height: 1.50rem; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 5px; padding-left: 0; }
	.highlightpopup { color: #ea7d06; font-size: 1.05rem; font-weight: bold; line-height: 1.1rem; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 0px; padding-left: 0; }

	#LandingPage {
		background-image: url("../img/LandingWiese480x512Faded.jpg");
	  background-position: center center;
	  background-size: cover; /* reduziert das viel zu große Bild auf Bildschirmgröße */
	  background-attachment: scroll;
	}

	#logo {
    width: 30px;
		float: left;
	  margin: 5px 0 0 20px;
  }

	hr {
	  margin: 0 auto 15px auto; /* Im Uhrzeigersinn bei 12 Uhr beginnend. Alternativ: Einzeltags -left:... nehmen */
	}

	.grid {
		grid-gap: 0.125rem;
	}

	/* Überschrift in den Grid-Boxen vergrößern */
	.grid > div {
		font-size: 1.125rem;
		font-weight: 900;
		margin-bottom: 10px;
		padding: 0.2rem;
	  border-radius: 0.5rem;
	}

	/* Die Überschrift in den Grid-Boxen ist vergrößert, aber der Erklärungstext normal */
	.grid > div > span {
		font-size: 1rem;
		font-weight: normal;
	}

	section {
		padding-bottom: 20px; /* Am Ende der Section noch etwas Platz lassen. Bei margin-bottom wäre es ein weißer Balken! */
	}

	#LandingPage p {
	  font-size: 1.15rem; /* 28px; */
	}


	#LPPortrait {
		width: 200px;
		margin-top: 6px;
		opacity: 1.0; /* Standard für das Bild in home (=Pfeil) 70%  */
	}

	#LPLogo {
		width: 60px;
		margin-top: 6px;
	  opacity: 1.0; /* Standard für das Bild in home (=Pfeil) 70%  */
	}

	.fa-chevron-circle-down {
	    font-size: 25px;
	    opacity: 0.7;
	    color: #203309; /* #46691C;*/
	    margin-top: 0px;
			display: none; /* Auf Smartphone Seitenwechsel-Pfeil nicht anzeigen!!!! */
	  }

	header {
		height: 40px;
	}


/* NEUES HAMBURGER MENU */

.navMob {
    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: 40px;
    line-height: 40px;
}

	label {
			display: block;
			cursor: pointer;
	}

	.menu {
			text-align: center;
			width: 100%;
			display: none;
	}

	.menu a:first-child {
		padding-right: 50px;
	}

	.menu a {
			display: block;
			border-bottom: 1px solid #EAEAEB;
			background-color: #334016;
			margin: 0;
			color: #ADDB76;
	}
	#toggle:checked + .menu {
			display: block;
	}

	label:hover {
		opacity: 0.5; /* Hamburger-Menü beim Drüberfahren mit halber Deckkraft anzeigen */
	}

	/* NEUES HAMBURGER MENU */




  header nav {
    margin: 0;
    float: none;
  }

  .fa-bars {
    font-size: 20px;
    display: inline-block; /* inline-level-element, das aber trotzdem width & height hat */
    width: 100%;
    cursor: pointer; /* Änderung zur Hand, wenn die Maus über das Symbol geht */
    text-align: right;
    float: right;
    margin: -35px 30px 0 0;
  }

  .fa-bars:hover {
    opacity: 0.5; /* Hamburger-Menü beim Drüberfahren mit halber Deckkraft anzeigen */
  }

  header nav ul {
    height: 0;
    overflow: hidden; /* damit die ausgeblendeten Menüpunkte wirklich nicht angezigt werden */
    margin: 0;
    padding: 0;
    width: 100%; /* warum das, wo doch alles ausgeblendet ist???? */
  }

	/* Ausklappbares Navigationsmenü */
  header nav ul.open {
    height: auto; /* bei jedem Draufklicken erhält die Niagation diese Höhe anstatt von 0 von oben */
  }

	/* Die einzelnen Menüpunkte des aufgeklappten Hamburger-Menüs stylen */
  header nav ul li {
    width: 100%;
    padding: 5px 0; /* bei nur 2 Werten ist der obere für oben + unten, der zweite für links + rechts */
    margin: 0;
    font-size: 11px;
    border-top: 1px solid #dddddd; /* Strich zwischen den Einträgen */
		background-color: #334016;
  }

  header nav ul a li:hover {
    background-color: #eeeeee; /* farbige Unterlegung des jeweils unter der Maus befindlichen Menüpunktes */
  }

  #LandingPage h1 {
    font-size: 2rem;
    margin-top: 60px;
  }

  #LandingPage h2 {
    font-size: 1.8rem;
		width: 90%;
    height: auto;
  }

	h3 {
    font-size: 1.5rem;
		padding-top: 11%; /* vergrößern zu den 8% von oben, sonst verschwindet die Überschrift (teilweise) unter dem Menübalken */
  }

	#Profil p {
		font-size: 1rem;
		width: 95%;
		margin-bottom: 10px; /* sonst weißer Balken zwischen sections */
	}

  #Behandlungsspektrum p {
		font-size: 1rem;
    width: 95%;
		/* margin-bottom: 0px; */ /* sonst weißer Balken zwischen sections */
	  margin: 10px auto 10px auto; /* Zentriert den ganzen Textblock, sonst wäre der Text zwar zentriert, aber der Block komplett links */
  }

	#GridBehandlungsmethoden img {
		padding: 10px 0 0 0;
		width: 60%; /* Auto. Verkeinerung der Bilder in allen Screen-Formaten! */
		margin: 0px 0px; /* sonst weißer Balken zwischen sections */
	}

	#Behandlungsablauf p {
		font-size: 1rem;
		width: 95%;
		margin-bottom: 0px; /* sonst weißer Balken zwischen sections */
  }

	#Behandlungsablauf .fett { /* War mal #Behandlungsablauf ul li */
	  font-size: 1rem;
	}

	#Behandlungsablauf img { /* Praxisbilder anpassen */
		height: auto;
	  /* width: 95%; */
	}

	#Kontakt p {
		font-size: 1rem;
		margin-bottom: 0px; /* sonst weißer Balken zwischen sections */
		padding: 10px;
		width: 95%;
	}

	#Impressum p {
		width: 95%;
		padding: 10px;
	}

	/* DAS FOLGENDE MACHT DIE FORMATIERUNG KOMISCH, WEGLASSEN! */
/*
	#Kontakt p {
		font-size: 1em;
		width: 95%;
	}

	#Impressum p {
		font-size: 1em;
		width: 95%;
  } */

	table {
	  width: 330px;
	  margin: 0 auto;
	  background: white;
	  font-size: 1rem;
	}

  form input, form textarea {
    width: 90%;
  }

  .button { /* Separat von den form-Tags abhandeln, da andere Breite */
    width: 95%;
  }

	footer {
	  width: 100%;
	  height: 30px;
	  background-color: #334016; /* #203309; */

	}

	footer p {
	  font-size: 0.8rem;
	  color: #ADDB76;
	  padding-top: 8px;
	  margin: 0px;  /* damit zwischen den sections kein zusätzlicher farbiger Balken existiert (default ca. 30px?) */
	}

}







/* MEDIA QUERIES - TABLETS **************************************/
/* Laptop: 1366 x 768 */

@media screen and (min-width: 546px) and (max-width: 1024px)
{

	#LandingPage {
		background-image: url("../img/LandingWiese1024x651Faded.jpg");
	  background-position: center center;
	  background-size: cover; /* reduziert das viel zu große Bild auf Bildschirmgröße */
	  background-attachment: scroll;
	}

  header {
    height: auto; /* Höhenanpassung mit Inhalten, kein fixer Wert mehr */
  }

	.menu a {
	    margin: 0 5px;
	}

	body {
	  font-size: 0.875rem; /* [=14px]*/
	}

	/* Modales  Popup */
	.popup { font-size: 15px; background-color: #fff; background-repeat: no-repeat; text-align: center; visibility: visible; position: relative; z-index: 900; top: 20px; width: 80%; height: 85%;
		float: none; overflow: hidden; clip: rect(auto auto auto auto); margin-right: auto; margin-left: auto; padding: 20px; border: solid 1px #2c60af; border-radius: 20px;
		-webkit-box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); -moz-box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); box-shadow: -1px 6px 24px 0px rgba(0,0,0,0.75); }
	.popupbild { width: 100%; float: none; clear: none; }
	.popuptext { color: #436572; font-size: 20px; line-height: 24px; width: 100%; float: none; }
	.infotext { color: #436572; font-size: 1.1rem; line-height: 1.2rem; width: 100%; float: left; margin: 0; }
	.headlinepopup { font-size: 1.9rem; font-weight: bold; line-height: 1.9rem; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 15px; padding-left: 0; }
	.highlightpopup { color: #ea7d06; font-size: 1.35rem; font-weight: bold; line-height: 1.3rem; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 0px; padding-left: 0; }

  #logo {
    width: 30px;
		float: left;
	  margin: 5px 0 0 20px;
  }

	.navMob {
	    height: 40px;
	    line-height: 40px;
	}

  header nav {
    margin: 0 25px 0 0;
  }

  header nav ul a li {
    font-size: 0.8rem;
		margin-left: 15px; /* Abstand zwischen den Texten einfügen, nicht margin-right, da sonst das letzte Wort zu viel rechten Rand hat */
  }

	#LandingPage h1 {
    font-size: 3rem;
    margin-top: 80px;
  }

  #LandingPage h2 {
    font-size: 2rem;
		width: 90%;
    height: auto;
  }

	#LPLogo {
		width: 76px;
		margin-top: 6px;
	  opacity: 1.0; /* Standard für das Bild in home (=Pfeil) 70%  */
	}

  h3 {
    padding-top: 12%;
  }

  #LandingPage p {
    width: 90%; /* Statt der festen 700px-Breite größerer Displays hier an die Fensterbreite anpassen */
  }

  #Profil p {
    width: 95%; /* Statt der festen 700px-Breite größerer Displays hier an die Fensterbreite anpassen */
		font-size: 1.125rem;
	}

  #Behandlungsspektrum p {
    width: 95%;
		font-size: 1.125rem;
  }

  #GridBehandlungsspektrum {
    width: 95%;
  }

  #Behandlungsablauf p {
    width: 95%;
		font-size: 1.125rem;
  }

/*
	#Behandlungsablauf img {
    width: 100%;
  }
*/

  #GridBehandlungsablauf {
    width: 95%;
  }

  #Behandlungsmethoden p {
    width: 95%;
		font-size: 1.125rem;
  }

  #GridBehandlungsmethoden {
    width: 95%;
  }

	#Kontakt p {
		font-size: 1.125rem;
		width: 95%;
	}

  form input, form textarea {
    width: 80%;
  }

  .button { /* Separat von den form-Tags abhandeln, da andere Breite */
    width: 82%;
  }

	#Impressum p {
    width: 95%;
	}

	table {
	  width: 540px;
	  margin: 0 auto;
	  background: white;
	  font-size: 1.125rem;
		border-radius: 5px; /* abgerundete Ecken */
	}

}


	/* MEDIA QUERIES - DESKTOPS **************************************/

@media screen and (min-width: 1025px)
{

	#LandingPage {
	  background: url('../img/LandingWiese1920x1221Faded.jpg'); /* LandingWiese480x512Faded.jpg */
	  background-position: center center;
	  background-size: cover; /* reduziert das viel zu große Bild auf Bildschirmgröße */
	  background-attachment: fixed; /* vorher wurde das Bild mit hoch gescrollt, jetzt bleibt es fix und wird von der folgenden Section überlagert beim Scrollen! */
	}

}

/* MEDIA QUERIES - DESKTOPS **************************************/

@media screen and (min-width: 1025px) and (max-width: 1900px)
{

	#note p { margin-top: 0; margin-bottom: 0; }
/*	.popuptext, .infotext { color: #436572; font-size: 0.85rem; line-height: 1rem; width: 50%; float: left;  margin: 0; } */
	.popuptext { color: #436572; font-size: 15px; line-height: 20px; width: 50%; float: left; }
	.headlinepopup { font-size: 30px; font-weight: bold; line-height: 35px; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 20px; padding-left: 0; }
	.highlightpopup { color: #ea7d06; font-size: 20px; font-weight: bold; line-height: 1.25rem; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 10px; padding-left: 0; }

}