@charset "UTF-8";

/* Stand: Freitag, 15. Juni 2018 16:15 Uhr */



/* Schriften bzw. Webfonts; Code von Fontsquirrel.com, Herbst 2016 */

@font-face {
    font-family: 'aller_lightregular';
    src: url('aller_lt-webfont.woff2') format('woff2'),
         url('aller_lt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }

@font-face {
    font-family: 'aller_lightitalic';
    src: url('aller_ltit-webfont.woff2') format('woff2'),
         url('aller_ltit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }

@font-face {
    font-family: 'allerbold';
    src: url('aller_bd-webfont.woff2') format('woff2'),
         url('aller_bd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }
/*
	font-weight und font-style müssen jeweils normal sein!
	Begründung: Der Browser darf normale, fette oder kursive Schriftschnitte
	nicht noch (zusätzlich) verschrägen oder fett(er) machen!
	Deshalb immer an konkreter Stelle, z.B. für die Tags em oder strong,
	den genauen Schriftnamen mit font-weight und font-style normal
	angeben, statt zu sagen, nimm die für das Dokument vorgegebene
	Schrift Aller light, und mache sie dann künstlich kursiv oder fett!
	Siehe unten bei konkreten Einbindungen von Fett- und Kursiv-Schnitt.
*/



/*
	Zurücksetzen aller Browservoreinstellungen 
	bezüglich der Abstände und Rahmen
*/

* {
	margin: 0;
	padding: 0; }

img {
	border: none; }




/* Basics */

html, body {
	font-family: 'aller_lightregular', 'Trebuchet MS', sans-serif;
	font-size: 15px; /* 15px entspricht 0.97em der Browservoreinstellungen bei Firefox auf Mac */
	line-height: 1.6em; /* 23px entspricht 1.6em der Browservoreinstellungen bei Firefox auf Mac */
	background-image: url(../src/hintergrund.jpg);
	background-position: center 0px;
	color: rgb(30,70,160); /* Schriftfarbe fast identisch mit Logoblau */
	text-align: center; /* horizontales Zentrieren für den IE */ }
/*
	Es scheint, dass alle relevanten Browser ihre interne font-size-Voreinstellung
	bei 16px haben, dies entspricht also 1em. Aber User können auch ihre Vorein-
	stellungen ändern. Deshalb definiere ich hier AUSSERHALB der Media Queries die
	Standardschriftgröße und den Zeilenabstand in Pixeln und beziehe mich auf die
	Standardschriftgröße IN den Media Queries mit 1em, das dann eben 15 und nicht
	16 Pixeln entspricht. Laut dem Artikel

		https://zellwk.com/blog/media-query-units/

	ist es nämlich keine gute Idee, in Media Queries mit Pixel-Größen für Schrift
	und Zeilenabstand zu arbeiten, sondern em ist das Mittel der Wahl, da nur hier
	alle Browser gleich reagieren und darstellen.
*/


a {
	text-decoration: none;
	transition: color 0.075s linear; }

p, ul.fliess, ul.kurz {
	-ms-hyphens: auto;
	-moz-hyphens: auto; /* nur für sehr alte Fireföxe */
	-webkit-hyphens: auto;
	hyphens: auto; }




/* Textformatierung */

.inhaltsspalte h1 {
	font-family: 'allerbold', 'Trebuchet MS', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 0.97em;
	margin-top: 0px;
	margin-bottom: 23px;
	color: rgb(40,80,170);
	display: none; }
/*
	Camino braucht, um h1 durch jQuery einblenden zu können, die
	genauere Bestimmung, von welchem Element h1 das Kindelement ist.
	Ohne das Voranstellen von .inhaltspalte werden die Überschriften
	einfach nicht angezeigt und der Fließtext wird nach oben geschoben
	eingeblendet.
*/ 

h1.dreizeilig {
	margin-top: 0px;
	margin-bottom: 26px;
	line-height: 1.6em; }
/*
	Die Aller Bold scheint ein seltsames Verhältnis zu Zeilenhöhen zu haben. 
	Sonderfall für mehrzeilige Überschriften; ohne Änderung der Zeilenhöhe
	würde die Schrift nicht mehr Register halten (eigentlich 23px). Nicht
	benutzen für zweizeilige Überschriften!
*/

.inhaltsspalte h2 {
	font-family: 'allerbold', 'Trebuchet MS', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 0.97em;
	line-height: 1.57em;
	margin-top: 2.6em;
	color: rgb(40,80,170);
	display: none; }
/*
	Neu Juni 2018: Für Überschriften h2, die ich bisher überall durch
	strong als Spitzmarke simuliert hatte. Diese "normale" h2 erzeugt eine
	Leerzeile zwischen der Überschrift und dem nachfolgenden Fließtext.
*/

h2.nah {
	margin-bottom: -0.8em;
	}
/*
	Neu Juni 2018: Für Überschriften, die nur durch einen Zeilenumbruch
	vom nachfolgenden Fließtext getrennt sind (etwa im Impressum).
*/

h2.integriert {
	float: left;
	margin-top: 0;
	margin-right: 11px; }
/*
	Neu Juni 2018: Durch float:left wird die Überschrift imgrunde als
	Spitzmarke definiert. Es ist aber mit der Aller Bold etwas hakelig,
	sie auf die identische Grundlinie zu bekommen, auf der auch der
	folgende Fließtext liegt. Das ging natürlich mit strong einfacher,
	aber auch da musste ich die Zeilenhöhe der Bold berücksichtigen
	und etwas ändern.
*/


.inhaltsspalte p {
	margin-top: 12px;
	margin-bottom: 14px;
	display: none; }

.inhaltsspalte ul {
	margin-left: 34px;
	list-style-image: url(../src/pfeildreieck.gif);
	margin-bottom: 16px;
	display: none; }

ul.fliess li {
	margin-bottom: 10px;
	padding-left: 0px; }

ul.kurz li {
	margin-bottom: 7px;
	padding-left: 0px;
	line-height: 1.3em; }




/* Textauszeichnungen im Fließtext */

em {
	font-family: 'aller_lightitalic', 'Trebuchet MS', sans-serif;
	font-weight: normal;
	font-style: normal; }

strong {
	font-family: 'allerbold', 'Trebuchet MS', sans-serif;
	font-weight: normal;
	font-style: normal;
	color: rgb(40,80,170);
	line-height: 18px; }
/*
	Für Fett-Auszeichnungen bzw. Betonungen im Fließtext. Wieder muss
	für die Bold ein anderer Zeilenabstand definiert werden.
*/




/* Bilder in Fließtextspalte - keine Breakpoints nötig */

img.foto_links {
	float: left;
	padding: 10px 15px 0px 9px;
	display: none; }
/*
	Für Fotos, die links oben in einen Absatz integriert sind.	
	Berechnungsschema Bildhöhe: x Zeilen = x mal 15px (Schrifthöhe),
	plus (x – 1) mal 8px (Zeilenhöhe 23px minus Schrifthöhe 15px),
	minus 10px ergibt je nach gewähltem x die Höhe des Bildes.

	Beispiel für Bild, das in sechs Zeilen passt:
	6 mal 15 = 90px, plus
	5 mal 8px = 40px, macht 130px,
	minus 10px = 120px Bildhöhe
*/

.slogan_links {
	float: left;
	padding: 7px 11px 0px 5px;
	display: none; }
/*
	Für Slogans, die links oben in einen Absatz integriert sind.
	Berechnungsschema Sloganhöhe: x Zeilen = x mal 15px (Schrifthöhe),
	plus (x – 1) mal 8px (Zeilenhöhe 23px minus Schrifthöhe 15px),
	minus 4px ergibt je nach gewähltem x die Höhe des Slogans.

	Beispiel für Slogan, der in sechs Zeilen passt:
	6 mal 15 = 90px, plus
	5 mal 8px = 40px, macht 130px,
	minus 4px = 126px Sloganhöhe
*/




/* Links */

a.intern:link {
	color: rgb(30,70,160);
	border-bottom: 1px dotted rgb(180,180,80); }

a.intern:visited {
	color: rgb(30,70,160);
	border-bottom: 1px dotted rgb(180,180,80); }

a.intern:focus {
	color: rgb(70,110,200);
	border-bottom: 1px dotted rgb(200,200,100); }

a.intern:hover {
	color: rgb(70,110,200);
	border-bottom: 1px dotted rgb(200,200,100); }

a.intern:active {
	color: rgb(20,60,150);
	border-bottom: 1px dotted rgb(170,170,70); }


a.mail:link {
	color: rgb(30,70,160);
	border-bottom: 1px dotted rgb(180,180,80); }

a.mail:visited {
	color: rgb(30,70,160);
	border-bottom: 1px dotted rgb(180,180,80); }

a.mail:focus {
	color: rgb(70,110,200);
	border-bottom: 1px dotted rgb(200,200,100); }

a.mail:hover {
	color: rgb(70,110,200);
	border-bottom: 1px dotted rgb(200,200,100); }

a.mail:active {
	color: rgb(20,60,150);
	border-bottom: 1px dotted rgb(170,170,70); }


a.extern:link {
	color: rgb(30,70,160);
	border-bottom: 1px dotted rgb(180,180,80); }

a.extern:visited {
	color: rgb(30,70,160);
	border-bottom: 1px dotted rgb(180,180,80); }

a.extern:focus {
	color: rgb(70,110,200);
	border-bottom: 1px dotted rgb(200,200,100); }

a.extern:hover {
	color: rgb(70,110,200);
	border-bottom: 1px dotted rgb(200,200,100); }

a.extern:active {
	color: rgb(20,60,150);
	border-bottom: 1px dotted rgb(170,170,70); }


a.download:link {
	color: rgb(30,70,160);
	border-bottom: 1px dotted rgb(180,180,80); }

a.download:visited {
	color: rgb(30,70,160);
	border-bottom: 1px dotted rgb(180,180,80); }

a.download:focus {
	color: rgb(70,110,200);
	border-bottom: 1px dotted rgb(200,200,100); }

a.download:hover {
	color: rgb(70,110,200);
	border-bottom: 1px dotted rgb(200,200,100); }

a.download:active {
	color: rgb(20,60,150);
	border-bottom: 1px dotted rgb(170,170,70); }
/*
	Unterpunktungsfarbe im Ausgangszustand ist jeweils etwas
	dunkler als das Sandbraun von Texttrenner und ul-Pfeil
*/




/* Mail-Formular auf der Kontakt-Seite, Display-Größen-unabhängige Defs */

#formular {
	display: none; }

input {
	font-family: 'aller_lightregular', 'Trebuchet MS', sans-serif;
	font-size: 1em;
	background: rgb(255,253,250);
	padding: 0px 15px 0px 15px;
	outline: none;
	color: rgb(30,70,160);
	border: solid 1px rgb(195,195,130);
	border-bottom: none; }

textarea {
	font-family: 'aller_lightregular', 'Trebuchet MS', sans-serif;
	font-size: 1em;
	background: rgb(255,253,250);
	padding: 15px;
	height: 160px;
	outline: none;
	color: rgb(30,70,160);
	border: solid 1px rgb(195,195,130); }

table.buttons_formular {
	border: 0px;
	margin-top: 4px;
	margin-left: -2px; }

input#reset {
	font-family: 'aller_lightregular', 'Trebuchet MS', sans-serif;
	font-size: 1em;
	height: 46px;
	width: 100px;
	cursor: pointer;
	color: rgb(30,70,160);
	border: solid 1px rgb(195,195,130); }

#reset:hover {
	color: rgb(70,110,200); }

input#submit {
	font-family: 'aller_lightregular', 'Trebuchet MS', sans-serif;
	font-size: 1em;
	height: 46px;
	width: 100px;
	cursor: pointer;
	color: rgb(30,70,160);
	border: solid 1px rgb(195,195,130); }

#submit:hover {
	color: rgb(70,110,200); }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: rgb(172,164,156);
	font-size: 0.875em; }

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
	color: rgb(0,0,0); }

input::-moz-placeholder, textarea::-moz-placeholder {
	color: rgb(172,164,156);
	font-size: 0.875em; }

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
	color: rgb(0,0,0); }

input::placeholder, textarea::placeholder {
	color: rgb(172,164,156);
	font-size: 0.875em; }

input:focus::placeholder, textarea::focus:placeholder {
	color: rgb(0,0,0); }

input::-ms-placeholder, textarea::-ms-placeholder {
	color: rgb(172,164,156);
	font-size: 0.875em; }

input:focus::-ms-placeholder, textarea:focus::-ms-placeholder {
	color: rgb(0,0,0); }

/* on hover placeholder */

input:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder {
	color: rgb(0,0,0);
	font-size: 0.875em; }

input:hover:focus::-webkit-input-placeholder, textarea:hover:focus::-webkit-input-placeholder {
	color: rgb(0,0,0); }

input:hover::-moz-placeholder, textarea:hover::-moz-placeholder {
	color: rgb(0,0,0);
	font-size: 0.875em; }

input:hover:focus::-moz-placeholder, textarea:hover:focus::-moz-placeholder {
	color: rgb(0,0,0); }

input:hover::placeholder, textarea:hover::placeholder {
	color: rgb(0,0,0);
	font-size: 0.875em; }

input:hover:focus::placeholder, textarea:hover:focus::placeholder {
	color: rgb(0,0,0); }

input:hover::placeholder, textarea:hover::placeholder {
	color: rgb(0,0,0);
	font-size: 0.875em; }

input:hover:focus::-ms-placeholder, textarea:hover::focus:-ms-placeholder {
	color: rgb(0,0,0); }


/* Test, um die browsereigenen Hervorhebungen bei nicht passenden Angaben zu ändern */
:invalid {
	box-shadow: none; /* FF */
	outline: 0;       /* IE */ }




/* ---------------------------------------------------------------------------------- */

/* Media Queries für Tablets/Laptops/Desktops ab 761 Pixel Display-Breite */

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


	html, body {
		height: 1200px;
		font-size: 0.97em; /* 15px entspricht 0.97em der Browservoreinstellungen bei Firefox auf Mac */
		line-height: 1.6em; /* 23px entspricht 1.6em der Browservoreinstellungen bei Firefox auf Mac */ }
	/* Heutzutage eigentlich nicht mehr nötig, da die Browser den
	Scrollbalken IM dargestellten Bereich anzeigen, es kann also
	gar nicht zu horizontalen Rucklern führen, wenn eine Seite so
	wenig Inhalte hat, sodass kein Scrollbalken angezeigt wird. */


	/* Header für Tablet- und Desktop-Displays */
	div.header {
		margin: 0 auto;
		height: 166px;
		background-image: url(../src/headerstreifen.jpg) !important;
		background-position: center 0px !important;
		background-repeat: repeat-x !important; }
	/* Wird über 760 Pixel Display-Breite (etwa ab Auflösung 768x1024)
	wie bisher angezeigt */

	img#kopfbereich {
		width: 740px;
		height: 206px; }
	/* Das Bild wird über die Definition text-align: center für body
	in der Mitte platziert. */


	/* Inhaltsbereich bzw. gesamter Satzspiegel */
	div.satzspiegel {
	margin: 0 auto;
	width: 740px;
	min-width: 740px;
	margin-top: 32px; }
	/* Wird über 760 Pixel Display-Breite (etwa ab Auflösung 768x1024)
	genauso angezeigt wie bisher */


	/* Navigation für Smartphones und Handhelds */
	/* ausblenden ab 761 Pixel Display-Breite */
	div#mobilenavi {
		display: none; }


	/* Navigation für Tablets, Laptops, und Desktops */
	div#navispalte {
	float: left;
	position: relative;
	top: 46px;
	left: 0px;
	width: 180px;
	text-align: right; }
	/* Wird über 760 Pixel Display-Breite (etwa ab Auflösung 768x1024)
	genauso angezeigt wie bisher */


	/* Hauptnavigation/Liste mit per CSS-Klasse ausblendbaren Unternavis */
	#navispalte ul {
		list-style-type: none; }

	ul.naviliste {
		position: relative; }

	ul.navi_unter {
		margin-top: 1px;
		margin-bottom: 1px;
		font-size: 13px;
		padding-right: 16px;
		line-height: 20px; }

	.unu {
		display: none; }
	/* Ausblendung der für die jeweilige Seite unnötigen Unternavi */

	.snu {
		display: block; }
	/* Wird eventuell später für Skriptzugriff gebraucht */

	div#navispalte a:link {
		color: rgb(30,70,160); }

	div#navispalte a:visited {
		color: rgb(30,70,160); }

	div#navispalte a:focus {
		color: rgb(40,80,170); }

	div#navispalte a:hover {
		color: rgb(40,80,170); }

	div#navispalte a:active {
		color: rgb(40,80,170); }

	ul.naviliste li a.aktiv {
		font-family: 'allerbold', 'Trebuchet MS', sans-serif;
		font-weight: normal;
		font-style: normal;
		line-height: 18px;
		color: rgb(40,80,170); }
	/* Für die Hauptnaviliste gelten eigentlich 23px Zeilenhöhe */

	ul.navi_unter li a.aktiv {
		font-family: 'allerbold', 'Trebuchet MS', sans-serif;
		font-weight: normal;
		font-style: normal;
		line-height: 14px;
		color: rgb(40,80,170); }
	/* Für die Unternaviliste gelten eigentlich 20px Zeilenhöhe */

	/* Für die Links in lis, die mit der Aller Bold ausgezeichnet werden,
	muss man komischerweise kleinere Zeilenabstände definieren als in
	den Navilisten selbst – sonst springen die Listenpunkte beim
	Fettwerden des Listenpunkts. Scheinbar gehen die Glyphen der Aller
	Bold von einem höheren Zeilenabstand aus als den 23px, die ich
	definiert habe, und schieben den jeweils darüberstehenden Listen-
	punkt etwas nach oben. Verrückte Welt. */


	/* Inhalte in Fließtextspalte */
	div.inhaltsspalte {
		text-align: left;
		position: relative;
		margin-left: 275px;
		margin-right: 25px;
		padding-bottom: 70px; }
	/* Die Fließtextspalte wird über 760 Pixel Display-Breite (etwa ab Auflösung
	768x1024) genauso angezeigt wie bisher */
	/*
	Breite der sichtbaren Fließtextspalte: 440px;
	Anfängliche Ausblendung aller Textelemente durch display: none
	in den Definitionen der einzelnen Elemente.
	*/


	/* Große Fotos zwischen Fließtextabsätzen */
	.foto_gross {
		margin: 5px 50px 0px 26px; }

	.foto_gross img {
		display: none; }

	/* Sonderfall mittiges Foto zwischen Fließtextabsätzen, 350px breit */
	.foto_streifen {
		margin: 5px 55px 0px 35px; }

	.foto_streifen img {
		display: none; }
	/* Große Fotos zwischen Fließtextabsätzen sind in Tablet- und Desktop-Ansicht
	364px breit, werden mittig platziert und werden in der Smartphone-Ansicht
	auf höchstens 420 Pixel Breite hochskaliert, meist aber auf 85 Prozent
	(bezogen auf die Breite des Viewports) verkleinert. */


	/* Kleine, zentriert ausgerichtete Vignetten/Zeichnungen */
	.icon_mittig {
		margin: 4px 156px 2px 140px;
		display: none; }
	/* Für die Vignetten in Ergänzende Heilweisen: drei Symbole, zwei davon
	von Irma neu gezeichnet, eingebaut am 2013-07-12. */

	.trenner {
		margin: -4px 174px -6px 158px;
		display: none; }
	/* Der Spiralentrenner in Sandbraun; gehört zwischen Absätze */

	.abschluss {
		margin: 4px 188px 60px 174px;
		display: none; }
	/* Ein deutsches Spiralen-Ornament aus dem Pepin-Press-Buch als Abschluss
	aller Fließtexte - inzwischen ersetzt durch Irmas eigene Zeichnung.
	2013-07-12. */

	/* Kleine zentrierte Bilder werden über 760 Pixel Display-Breite (etwa ab
	Tablet-Auflösung 768x1024) genauso angezeigt wie bisher; die Klasse ist
	nun nicht mehr dem Bild, sondern einem Paragraph zugewiesen, in dem es
	jeweils steckt; bei der Tablet- und Desktop-Darstellung bleibe ich bei
	den genauen Margins. */


	/* Mail-Formular auf der Kontakt-Seite */
	#formular {
		position: relative;
		width: 390px;
		margin: 20px auto 40px 0px; }

	input {
		width: 390px;
		height: 50px; }

	textarea {
		width: 390px;
		max-width: 390px;
		min-width: 390px; }


	h2.integriert_sonder {
		float: left;
		margin-top: 0;
		margin-right: 11px; }
	/* Neu 2018-06: die in der Smartphone-Ansicht als normal absatz-
	bildend definierte Überschrift soll in der Desktop-Ansicht als
	Spitzmarke und als Sprungmarke fungieren. Betrifft nur Ergänzende
	Therapien. */

}

/* Ende Media Queries für Tablets/Laptops/Desktops ab 761 Pixel Display-Breite */

/* ---------------------------------------------------------------------------------- */





/* ---------------------------------------------------------------------------------- */

/* Media Queries für Smartphones/Handhelds bis 760 Pixel Displaybreite */


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


	/* Header für Tablet-/Laptop- und Desktop-Displays */
	div.header {
		display: none; }
	/* Wird unter 760 Pixel Display-Breite komplett ausgeblendet. Anstelle
	des Headers wird auf Smartphones und Handhelds eine am oberen
	Bildschirmrand fixierte Version des Menüs angezeigt. */


	/* Inhaltsbereich bzw. gesamter Satzspiegel */
	div.satzspiegel {
		margin: 70px 0px 0px 0px;
		font-size: 1em; /* hinzugefügt 1em! Bezieht sich auf die oben definierten 15px */
		line-height: 1.6em; /* dito hinzugefügt */ }
	/* Wird unter 760 Pixel Display-Breite umformatiert; Abstand oben ist
	für das oben fixierte Mobil-Menü im eingeklappten Zustand, unter dem die
	Inhalte sonst verschwinden würden. */
	/* Das Problem mit Sprungmarken innerhalb des Fließtexts ist damit allerdings
	nicht gelöst, bei Anklicken eines Links, der zu einer Sprungmarke führt, liegt
	die Sprungmarke leider auch unter dem Menüstreifen - betrifft im Moment aber
	nur Ergänzende Therapien, Lösungsansatz siehe direkt darunter, 2018-06-15 */

	h2.integriert_sonder {
		margin-top: 2.6em; }
	/* Neu 2018-06: die in der Desktop-Ansicht als Spitzmarke definierte
	Überschrift soll in der Smartphone-Ansicht als normale absatz-
	bildende Überschrift fungieren, da sie gleichzeitig als Sprung-
	marke fungiert und bei Sprung zur Spitzmarke sonst zu viel unter
	dem Menüstreifen verborgen wäre. Betrifft nur Ergänzende Therapien. */


	/* Navigation für Smartphones und Handhelds */
	div#mobilenavi {
		position: fixed;
		top: 0px;
		left: 0px; 
		width: 100%;
		min-height: 44px;
		max-height: 44px;
		border-bottom: 1px solid rgb(170,170,170);
		box-shadow: 3px 3px 20px rgba(0,0,0,0.15);
		background-image: url(../src/header_mobil.jpg);
		background-repeat: repeat-y;
		text-align: left; }

	div#mobilenavi img#navi_icon {
		position: relative;
		top: 12px;
		left: 16px; }

	ul.mobile {
		font-family: 'aller_lightregular', 'Trebuchet MS', sans-serif;
		font-size: 1em; /* geändert in 1em von 15px! */
		line-height: 1.9em; /* geändert in 1.9em von 28px! */
		letter-spacing: 1px;
		list-style-type: none;
		display: none;
		position: absolute;
		top: 44px;
		left: 12px;
		background-image: url(../src/header_mobil_slide.jpg);
		min-width: 244px;
		padding-top: 11px;
		padding-left: 18px;
		padding-right: 14px;
		padding-bottom: 10px;
		border: 1px solid rgb(170,170,170);
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		box-shadow: 6px 6px 16px rgba(0,0,0,0.15); }

	ul.mobile li.unu {
		margin-left: 14px;
		display: none; }

	ul.mobile li.snu {
		margin-left: 14px; }

	ul.navi_unter {
		list-style-type: none; }

	div#mobilenavi a:link {
		color: rgb(30,70,160); }

	div#mobilenavi a:visited {
		color: rgb(30,70,160); }

	div#mobilenavi a:focus {
		color: rgb(255,255,255); }

	div#mobilenavi a:hover {
		color: rgb(255,255,255); }

	div#mobilenavi a:active {
		color: rgb(255,255,255); }

	div#mobilenavi a.aktiv {
		font-family: 'allerbold', 'Trebuchet MS', sans-serif;
		color: rgb(30,70,160); }


	/* Navigation für Tablets und Desktop */
	div#navispalte {
		display: none; }
	/* Wird unter 760 Pixel Display-Breite komplett ausgeblendet */


	/* Inhalte in Fließtextspalte */
	div.inhaltsspalte {
		margin: 60px 16px 16px 16px;
		text-align: left;
		padding-bottom: 30px; }
	/* Fließtextspalte wird unter 760 Pixel Display-Breite umformatiert */


	/* Große Fotos zwischen Fließtextabsätzen */
	.foto_gross {
		text-align: center; }

	.foto_gross img {
		width: 85%;
		height: 85%;
		max-width: 420px;
		display: none; }

	.foto_streifen {
		text-align: center; }

	.foto_streifen img {
		width: 85%;
		height: 85%;
		max-width: 420px;
		display: none; }
	/* Große Bilder werden auf Smartphones etwas verkleinert. Die 85% beziehen
	sich auf die Gesamtbreite des betreffenden Bildschirms; damit sie nicht zu
	stark vergrößert werden können, max-width von 420 Pixel definiert. */


	/* Kleine, zentriert ausgerichtete Vignetten/Zeichnungen */
	.icon_mittig, .trenner, .abschluss {
		text-align: center;
		display: none; }
	/* Kleine Bilder befinden sich nun in Paragraphs, die auf Smartphone-
	Displays einfach zentriert werden können. */


	/* Mail-Formular auf der Kontakt-Seite */
	#formular {
		width: 95%; }

	input {
		width: 95%;
		height: 46px; }

	textarea {
		width: 95%;
		max-width: 95%;
		min-width: 95%; }

	table.buttons_formular {
		margin-bottom: 32px; }

}

/* Ende Media Queries für Smartphones/Handhelds bis 760 Pixel Displaybreite */

/* ---------------------------------------------------------------------------------- */





/* ---------------------------------------------------------------------------------- */

/* Titelschriftzug der Navigation für Smartphones und Handhelds: andere Breakpoints */


/* Titel kurz: "Susanne Sussner" */
/* Titel lang: "Susanne Sussner - Heilpraktikerin" */
@media screen and (max-width: 480px) {

	div#mobilenavi img#titel_kurz {
		position: relative;
		top: 14px;
		left: 23px; }

	div#mobilenavi img#titel_lang {
		display: none; }

}

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

	div#mobilenavi img#titel_kurz {
		display: none; }

	div#mobilenavi img#titel_lang {
		position: relative;
		top: 14px;
		left: 23px; }

}

/* Funktionsweise: Bis 480 Pixel Breite wird der kurze Titel angezeigt,
ab 481 Pixel Breite bis 760 Pixel Breite der lange. Bei größeren
Breiten wird die Mobile-Navi sowieso ausgeblendet. */


/* Ende Titelschriftzug der Navigation für Smartphones und Handhelds */

/* ---------------------------------------------------------------------------------- */





/* ---------------------------------------------------------------------------------- */

/*
	Sonderfall mehrzeilige Überschriften, die durch br sinnig getrennt
	sind, auf Smartphones aber als Fließtext dargestellt werden sollen.
	Funktioniert wirklich, indem man einem betreffenden br-Tag eine Klasse
	zuordnet, die das br unter einer gewissen Breite des Bildschirms
	nicht als Zeilenumbruch, d.h. gar nicht darstellt.
*/

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

    br.desk1 {
		display: none; }

}

/*
	Sonderfall Impressum, Umbruch soll in oberstem Satz über Smartphone-
	Display-Breite 360 Pixel da sein, bei schmalerem Bildschirm aber nicht.
*/

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

    br.desk2 {
		display: none; }

}

/* ---------------------------------------------------------------------------------- */