@charset "utf-8";
/*
Design-Vorgaben der TelefonSeelsorge:

Primärfarben:
#fbbb11 - das Gelb aus dem Logo
#4c2858 - das Lila aus dem Logo
Sekundärfarben:
#c87002 - das Braun, hier für Links im Text
#e6d8a6 - Sandfarbe, hier für Hindergrund
*/

body {
	margin:0;
	padding:0;
	font: 90%/1.4 Arial, Helvetica, sans-serif;
	color:#444;
	background-color:#e6d8a6;
}
h1, h3, h4, h5, h6, p {
	margin-top: 0;	 /* Durch Entfernen des oberen Randes wird ein Problem vermieden, bei dem Ränder aus dem umgebenden Block entweichen. Der verbleibende untere Rand sorgt für den Abstand von allen folgenden Elementen. */
}
h1, h2, h3 { font-weight:normal; color:#4c2858; }
h1 { font-size:1.8em; }
h2 { font-size:1.4em; margin-top:2em; }
h3 { font-size:1.2em; }
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;
}
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link, a:visited {
	color:#c87002;
	text-decoration: none; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	color:#c87002;
	text-decoration: underline;
}
a[href$=pdf] { background: transparent url(../gfx/pdf.png) 0 50% no-repeat; padding: 36px; line-height:36px;}

blockquote { margin:0 0 0 4rem;}

/* ~~ Dieser Container fester Breite umgibt alle anderen Blockelemente. ~~ */
#wrapper {
	margin: 24px auto;
	padding:0;
	width:1150px;
	background-color:#fff;
	box-shadow:0 0 6px 4px rgba(0,0,0,0.2);
}
/* ------- der Headerbereich mit Navigation + Logo ------- */
header {
	position:relative;
}
header #logo {
	position:absolute;
	z-index:15;
	top:80px;
	left:30px;
	background:rgba(255,255,255,0.7);
	padding:8px;
	box-shadow:0 0 6px 4px rgba(0,0,0,0.2);
}
nav {
	margin:0;
	padding:16px 2px 16px 30px;
}
nav a:link, nav a:visited {
	margin:0;
	padding:0;
	font-size:1.2em;
	color:#666;
	text-decoration:none;
}
nav a.aktiv { /* die gerade angezeigte Seite soll hervorgehoben werden */
	border-bottom:4px solid #fbbb11;
}
nav a.inaktiv {
	border-bottom:4px solid #fff;
}
nav a:hover {
	color:#4c2858;
	border-bottom:4px solid #fbbb11;
	text-decoration:none;
}
nav a:not(:last-child):after {
	content: "\2022"; /* \0196 ist der senkrechte Strich */
	padding:0 0.4em 0 0.4em;
	border-bottom:4px solid #fff;
}
.slideshow {
	width: 1150px;
	height: 386px;
	margin: 0; padding: 0;
	overflow: hidden;
}
.slideshow img {
	width:100%;
	height:100%;
}
#cyclecaption {
	position:absolute;
	z-index:17;
	bottom:-14px;
	right:0px;
	background:rgba(255,255,255,1);
	padding:2px 4px;
	margin:0 4px 0 0;
	box-shadow:0 0 4px 4px rgba(0,0,0,0.2);
	text-align:right;
	font-size:75%;
}
/* ------- der Content ------- */
section {
	min-height:330px;
	margin:30px 50px 30px 300px;
}
/* ------- der Seitenstreifen mit den gelben Boxen ------- */
aside {
	float:left;
	margin:30px 0 0 30px;
	font-size:1.2em;
}
aside div {	/* eine gelbe Box */
	background:#ffb30d;
	margin:0 0 12px 0;
	padding:12px 12px 8px 12px;
	box-shadow:0 0 6px 4px rgba(0,0,0,0.2);
}
aside div i { /* das Symbol links */
	display:block;
	float:left;
	font-size:1.4em;
	color:#4c2858;
	letter-spacing:0.4em;
}
aside div div { /* der restliche Text in der Box */
	margin:-0.6em 0 0 1.6em;
	box-shadow:0 0 0 0 rgba(0,0,0,0);
}
aside div div a:link, aside div div a:hover, aside div div a:active, aside div div a:visited {
	text-decoration:none;
	color:#444;
}
/* ------- der Seitenfuß ------- */
footer {
	clear:both;
	margin:18px 20px 6px 20px;
	padding:4px 0 4px 280px;
	border-top:1px solid #999;
	font-size:0.8em;
}
footer a {
	text-decoration:none;
	color:#444;
}

/* ------- die Beiträge auf "Team" und "Links" ------- */
article {clear:right; width:85%;}
article.bildlinks { min-height:120px; margin: 0 0 18px 0; }
article.bildlinks figure { float:left; margin:0 16px 0 0;}
article.bildlinks p { margin:0 0 1em 200px; }
article.bildlinks h2 { margin:2em 0 1em 200px; }
article.bildlinks h3 { margin:2em 0 1em 200px; }

article.bildlinks2 { min-height:120px; margin: 0 0 18px 0; }
article.bildlinks2 figure { float:left; margin:0 16px 0 0;}
article.bildlinks2 p { margin:0 0 1em 300px; }
article.bildlinks2 h2 { margin:2em 0 1em 300px; }

figure.rechts { float:right; }
figure.rechts figcaption { text-align:right; }
figcaption { font-size:0.8em; margin: 4px 0 0 0;}

/* ------- die Beiträge auf "Unterstuetzer" ------- */
article.links {
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
}
article.links > :nth-child(1) {
	width:40%;
}
article.links > :nth-child(2) {
	width:40%;
}
article.links > :nth-child(2) img{
	max-width:90%;
	height:auto;
}
/* ------- Formular auf Kontaktseite ------- */
form { width:40em; margin:4em 0 0 0;}
form li { list-style:none; margin:0.5em auto; }
form label { vertical-align:top; }
input { width:20em; }
input[name="code"] { width:6em; }
input[type="submit"] { width:12em; }
textarea { width:30em; height:10em; }

/* ------- fuer Systemmeldungen ------- */
.red {color:red; background-color:#FFC4C4; border: 1px solid red; padding:4px; border-radius:4px; }
.yellow {color:#bb8a02; background-color:#FEE99E; border: 1px solid #bb8a02; padding:4px; border-radius:4px; }
.green {color:#007700; background-color:#BDF2D9; border: 1px solid #007700; padding:4px; border-radius:4px; }