/* liebe-ab-50.ch, Stil nach dem alten Seniorenportal-Muster (Bogen auf Creme, Menue links) */
/* Schrift bewusst gross: 16px Grundschrift, Heinz liest ohne Brille */

html { background: #FFEECA; }
body {
	margin: 0;
	padding: 14px 0 0;
	background: #FFEECA;
	color: #111;
	font: normal 16px/1.55 Verdana, Geneva, Arial, sans-serif;
}
a:link, a:visited { color: Navy; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; }
a:hover { color: #3333CC; text-decoration: none; }
a:active { color: #CC0000; }
img { max-width: 100%; height: auto; border: 0; }

/* orange Leiste ganz oben, klebt beim Scrollen */
#orangeleiste {
	position: sticky; top: 0; z-index: 9;
	background: #F39A1E;
	border-bottom: 2px solid #c97a0c;
	margin: -14px 0 14px;
	padding: 5px 40px 5px 12px;
	font: 15px Arial, Helvetica, sans-serif;
	text-align: center;
}
#orangeleiste a { color: #000; text-decoration: none; display: block; font-family: Arial, Helvetica, sans-serif; }
#orangeleiste a b { text-decoration: underline; }
#orangeleiste em { font-style: normal; color: #3a2400; }
#leiste-zu {
	position: absolute; right: 9px; top: 5px;
	background: none; border: 1px solid #8a5a10; color: #3a2400;
	font: bold 13px Arial, sans-serif; cursor: pointer; padding: 0 6px;
}

#bogen {
	width: 95%;
	max-width: 1380px;
	margin: 0 auto;
	background: #FEFEFE;
	border-radius: 17px;
	padding: 17px 0 5px;
}

/* Kopf: Name links, Dienstzeile in der Mitte, darunter die Reiter */
#kopf { position: relative; margin: 0 17px; min-height: 92px; border-bottom: 3px solid #F39A1E; }
#marke {
	position: absolute; left: 2px; top: 3px;
	font: bold 31px Tahoma, Verdana, sans-serif !important;
	letter-spacing: 3px;
	color: #24546a !important;
	text-decoration: none !important;
	line-height: 1.1;
}
#marke b { color: #F39A1E; font-size: 37px; }
#marke span { font-size: 18px; letter-spacing: 1px; color: #6b6b6b; }
#dienstzeile {
	margin-left: 300px;
	font: bold 15px Arial, Helvetica, sans-serif;
	padding-top: 2px;
}
#dienstzeile a { font-weight: bold; }
.spartipp { display: inline-block; border: 1px solid #2c2cb0; padding: 0 5px; margin-top: 3px; font-weight: normal; font-size: 15px; }
.spartipp b { color: #d40000; }
#reiter { list-style: none; margin: 11px 0 0 300px; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
#reiter li { background: #2F7484; border: 1px solid #1d4e5a; border-bottom: 0; }
#reiter li a, #reiter li { color: #fff; font: bold 15px Arial, Helvetica, sans-serif; text-decoration: none; padding: 5px 11px 4px; display: block; }
#reiter li a { padding: 0; }
#reiter li a:hover { text-decoration: underline; }
#reiter li.dran { background: #F39A1E; border-color: #c97a0c; }
#reiter li.dran a { color: #000; }

/* Raster: Menue links, Inhalt rechts. Absichtlich eine Tabelle wie beim Vorbild */
#raster { width: 100%; border-collapse: collapse; margin-top: 9px; }
#links { width: 190px; vertical-align: top; padding: 0 0 20px 17px; }
#mitte { vertical-align: top; padding: 2px 32px 20px 25px; }

.kasten { background: #FFEECA; margin: 0 0 20px; padding: 0 0 5px; font-size: 15px; }
.kastentitel {
	background: #fff; margin: 0; padding: 3px 0 5px 14px;
	font: bold 13px Arial, Helvetica, sans-serif; color: #606438;
	border-bottom: 4px solid #FFEECA;
}
.kasten ul { list-style: none; margin: 0; padding: 4px 4px 0 7px; }
.kasten li { padding: 2px 0 3px 15px; position: relative; line-height: 1.3; }
.kasten li:before { content: ""; position: absolute; left: 1px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #3d8a9a; }
.kasten li a { font-weight: bold; font-size: 15px; }
.kasten li.dran a { color: #000; text-decoration: none; }
.kasten p { margin: 6px 9px; }
.testsieger .knopf { font-size: 15px; padding: 4px 7px; }
.kasten .mail a { font-size: 13px; font-weight: normal; }

/* Inhalt */
#mitte h1 {
	font: bold 25px/1.3 Verdana, Geneva, sans-serif;
	background: #CBDCDC;
	margin: 0 0 18px;
	padding: 4px 9px 5px 18px;
}
#mitte h2 {
	font: bold 20px/1.3 Verdana, Geneva, sans-serif;
	background: #FFEECA;
	margin: 35px 0 11px;
	padding: 3px 7px 3px 5px;
	max-width: 46em;
}
#mitte h3 { font: bold 17px Verdana, Geneva, sans-serif; margin: 25px 0 5px; }
#mitte p, #mitte li, #mitte td, #mitte th { max-width: 46em; }
#mitte p { margin: 0 0 14px; }
#mitte ul, #mitte ol { padding-left: 25px; margin: 0 0 18px; }
#mitte li { margin-bottom: 5px; }
.einstieg { font-size: 17px; }
.markus { float: left; margin: 3px 14px 5px 0; border: 1px solid #999; }

table.liste { border-collapse: collapse; width: 100%; max-width: 46em; margin: 0 0 20px; font-size: 16px; }
table.liste th { text-align: left; font: bold 15px Arial, Helvetica, sans-serif; padding: 3px 9px 3px 3px; border-bottom: 2px solid #F39A1E; }
table.liste td { padding: 5px 9px 5px 3px; border-bottom: 1px solid #e3d6b5; vertical-align: top; }
table.liste tr:nth-child(even) td { background: #fdf8ec; }
.tabellenrand { overflow-x: auto; }

/* einziger richtiger Kasten pro Seite: der Steckbrief */
.steckbrief { background: #FFEECA; padding: 9px 14px 11px; margin: 0 0 25px; max-width: 44em; }
.steckbrief table { border-collapse: collapse; margin: 5px 0 11px; }
.steckbrief td { padding: 2px 18px 2px 0; vertical-align: top; }
.steckbrief td:first-child { font-weight: bold; white-space: nowrap; }
.note { font: bold 22px Verdana, sans-serif; color: #24546a; }

.knopf, a.knopf:link, a.knopf:visited {
	display: inline-block;
	background: #F39A1E; color: #000;
	border: 1px solid #b06c08;
	font: bold 16px Arial, Helvetica, sans-serif;
	padding: 6px 13px 5px;
	text-decoration: none;
	margin: 3px 0;
}
a.knopf:hover { background: #ffb347; color: #000; }
.weiter { margin: 18px 0 25px; }

.fragen details { margin: 0 0 9px; max-width: 46em; }
.fragen summary { font-weight: bold; cursor: pointer; padding: 2px 0; }
.fragen details p { margin: 5px 0 9px 18px; }

.zitat { font-style: italic; margin: 20px 0 20px 25px; max-width: 40em; }
.neuliste { list-style: square; }
.neuliste li { margin-bottom: 9px; }
.anriss { font-size: 16px; color: #444; }
.hinweis { font-size: 16px; color: #555; border-top: 1px solid #ddd; padding-top: 7px; }
figure { margin: 18px 0 20px; max-width: 46em; }
figcaption { font-size: 15px; color: #555; }
.clear { clear: both; }
/* .ecke { background: url(ecke-unten.gif) no-repeat; } alte Ecken, braucht es nicht mehr */

#fuss {
	width: 95%; max-width: 1380px; margin: 14px auto 0;
	background: #FEFEFE; border-radius: 17px;
	text-align: center; padding: 11px 9px 9px; box-sizing: border-box;
	font: bold 14px Arial, Helvetica, sans-serif;
}
#fuss a { font-weight: bold; }
.kleingedrucktes { font-size: 12px; font-weight: bold; color: #333; margin: 9px 0 3px; }
#gebaut { text-align: center; font-size: 12px; color: #6b5a36; margin: 14px 0 32px; }

/* TODO: Druckansicht fuer Heinz (ohne Menue) */

@media (max-width: 760px) {
	body { padding-top: 0; }
	#orangeleiste { margin: 0 0 9px; padding: 4px 30px 4px 6px; font-size: 14px; }
	#orangeleiste em { display: none; }
	#bogen, #fuss { width: auto; margin-left: 5px; margin-right: 5px; border-radius: 9px; }
	#kopf { margin: 0 9px; min-height: 0; }
	#marke { position: static; display: block; font-size: 26px !important; }
	#dienstzeile { margin: 5px 0 0; font-size: 14px; }
	#reiter { margin: 9px 0 0; }
	#reiter li a, #reiter li { font-size: 14px; padding: 4px 7px 3px; }
	#reiter li a { padding: 0; }
	#raster, #raster > tbody, #raster > tbody > tr, #raster > tbody > tr > td { display: block; width: auto; }
	#raster > tbody > tr { display: flex; flex-direction: column-reverse; }
	#links { padding: 9px; }
	#mitte { padding: 5px 11px 9px; min-width: 0; }
	#mitte h1 { font-size: 22px; padding-left: 9px; }
	#mitte h2 { font-size: 19px; }
	.markus { width: 90px; height: auto; }
	table.liste td, table.liste th { padding: 4px 5px 4px 2px; hyphens: auto; -webkit-hyphens: auto; }
}