/* Style-Sheet Startseite - Desktop (>=821px).
   Wird nur ueber <link media="screen and (min-width: 821px)"> in index.php
   geladen. Muss fuer sich genuegen: alle Struktur-Regeln der Startseite
   stehen hier, die mobile Fassung ist dann nicht geladen.
   Breakpoint der Startseite: 821px (Desktop) / 820px (Mobil). */

body	{ margin:10px; }


/* Seite */

.page	{ width:800px; margin:0 auto; }

.masthead { text-align:center; }

.columns { display:flex;
	   align-items:stretch; }

.col	{ display:flex;
	  flex-direction:column; }

.col-side { width:260px; }
.col-main { width:300px; }
.col-nav  { width:240px; }


/* Update Feld (Mitte) */

div.update	{ flex:1 1 auto;
	  text-align:justify; }
img.update	{ display: block; }


/* Linkes Feld (gelb) */

.panel-yellow {
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	width:260px;
	box-sizing:border-box; }

.panel-yellow .panel-body {
	background:url(images/menu/gelb2.gif) repeat-y center / 100% auto;
	padding-left:10px; }
.panel-wissen	{ flex:1 1 auto; }

/* Gelbe Abschluss- und Trennstreifen als eigene Elemente, damit die
   transparenten Rundungen den Seitenhintergrund zeigen (wie in der alten
   Tabellenfassung) und keine gelbe Flaeche durchscheint. */

.cap-top	{ flex:0 0 12px; height:12px;
		  background:url(images/menu/gelb1.gif) no-repeat center / 100% 12px; }
.cap-bottom	{ flex:0 0 18px; height:18px;
		  background:url(images/menu/gelb3.gif) no-repeat center / 100% 18px; }

.divider	{ flex:0 0 20px; height:20px;
		  background:url(images/menu/gelb4.gif) no-repeat center / 100% 20px; }

/* Titelzeile der gelben Kaesten: nur im mobilen Layout sichtbar */
.panel-yellow .panel-head	{ display:none; }


/* Rechtes Feld (blau) */

.panel-blue {
	display:flex;
	flex-direction:column;
	width:240px;
	box-sizing:border-box; }

.panel-head {
	flex:0 0 33px;
	height:33px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:url(images/menu/blau1.gif) no-repeat center / 100% 33px; }

.panel-blue .panel-body {
	background:url(images/menu/blau2.gif) repeat-y center / 100% auto;
	padding-left:10px; }

.panel-cap {
	flex:0 0 18px;
	height:18px;
	background:url(images/menu/blau3.gif) no-repeat center / 100% 18px; }

.panel-forum	{ flex:1 1 auto; }
.panel-forum .panel-body {
	flex:1 1 auto;
	padding:8px 8pt 0 8pt; }


/* Inhalt */

.panel-body.nav-links	{ padding:5px 50px; }


/* Gruss- und Facebook-Leiste: Desktop nutzt die alten Grafiken (GIF,
   Balken inklusive) in Originalgroesse; die mobilen Assets sind aus. */

.gruss img	{ width:300px; height:32px; }
.gruss img.gruss-mobile	{ display:none; }

.facebook img	{ width:240px; height:32px; }
.facebook .fb-mobile	{ display:none; }


/* Leiste am Ende */

.fussleiste	{ display:flex;
		  align-items:center;
		  justify-content:center;
		  box-sizing:border-box;
		  border:1px solid #dddddd;
		  margin-top:10px; }
.fuss-item	{ flex:1 1 16%;
		  font-size:8pt;
		  padding:6px 4px;
		  text-align:center; }
.fuss-sep	{ flex:0 0 auto; }