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

body	{ margin:0; }

/* Breite begrenzen: verhindert das extreme Strecken der (noch niedrig
   aufgeloesten) Grafiken auf Tablets und verbessert die Zeilenlaenge */
.page	{ width:auto;
	  max-width:560px;
	  margin:0 auto;
	  box-sizing:border-box;
	  padding:0 8px; }

/* wrapper columns become transparent so the panels order as flex items.
   NOTE: the .col rule must come first - it and .col-side/.col-nav have the
   same specificity, and .col-side/.col-nav also carry class "col", so the
   later display:contents wins. Do not move .col below this rule. */
.col	{ display:flex;
	  flex-direction:column; }

.col-side,
.col-nav	{ display:contents; }

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

.col-main	{ width:auto;
		  order:2;
		  margin-bottom:12px; }
.panel-inhalt	{ order:1; }

/* die gelbe Spalte zerfaellt in zwei Kaesten (Battle / Fakten), damit
   das Forum dazwischen einsortiert werden kann */
.panel-yellow	{ display:contents; }
.cap-top,
.cap-bottom,
.divider,
.panel-cap	{ display:none; }

/* gelbe Kaesten: schwarzer Rahmen, runde Ecken und Fuellung als CSS
   statt der auf 100% gestreckten gelb1/2/3-Grafik */
.panel-yellow .panel-body	{ background:none; }

.panel-yellow .panel-battle,
.panel-yellow .panel-wissen {
	background-color:#ffd400;
	background-image:linear-gradient(#e00000,#e00000);
	background-repeat:no-repeat;
	background-position:top;
	background-size:100% 33px;
	border:3px solid #000;
	border-radius:10px;
	overflow:hidden;
	padding:12px 10px 16px;
	margin-bottom:12px; }

/* rote Titelzeile der gelben Kaesten (nur im mobilen Layout);
   die Farbe kommt aus dem Kastenhintergrund, hier nur der Text */
.panel-yellow .panel-head	{ display:flex;
				  align-items:center;
				  justify-content:center;
				  flex:0 0 33px;
				  height:33px;
				  background:none;
				  margin:-12px -10px 12px; }

/* "Wusstest du schon"-Grafik entfaellt, der Titel steht in der Kopfzeile */
.panel-wissen .wissen-titel	{ display:none; }

.panel-battle	{ order:3; }
.panel-forum	{ order:4; }
.panel-wissen	{ order:5; }

/* blaue Kaesten ebenso: Rahmen + Radius + Fuellung als CSS;
   die Kopfzeile wird als Kastenhintergrund gemalt, damit zwischen
   Rahmen und Inhalt keine helle Naht entsteht */
.panel-blue	{ display:flex;
		  flex-direction:column;
		  box-sizing:border-box;
		  width:auto;
		  border:3px solid #000;
		  border-radius:10px;
		  overflow:hidden;
		  background-color:#bdd6ce;
		  background-image:linear-gradient(#0d0d8c,#0d0d8c);
		  background-repeat:no-repeat;
		  background-position:top;
		  background-size:100% 33px;
		  margin-bottom:12px; }
.panel-blue .panel-body	{ background:none; }
.panel-head	{ display:flex;
		  align-items:center;
		  justify-content:center;
		  flex:0 0 33px;
		  height:33px;
		  background:none; }
.facebook	{ order:6; }

div.update	{ flex:1 1 auto;
		  text-align:left; }

.masthead img	{ width:100%; max-width:100%; }
img		{ height:auto; max-width:100%; }

/* Gruss-Leiste: rote Leiste, Bild mittig und unverzerrt */
.gruss	{ display:flex;
	  align-items:center;
	  justify-content:center;
	  height:40px;
	  box-sizing:border-box;
	  background:#e00000;
	  border:3px solid #000;
	  border-radius:10px;
	  padding:0 8px; }
.gruss img	{ display:block;
		  max-height:32px; }
.gruss img.gruss-bar	{ display:none; }

/* Facebook-Leiste: hellblau, Text mit Icon rechts */
.facebook	{ display:flex;
		  align-items:center;
		  justify-content:center;
		  height:40px;
		  box-sizing:border-box;
		  background:#b3c2e3;
		  border:3px solid #000;
		  border-radius:10px;
		  padding:0 8px; }
.facebook a	{ display:flex;
		  align-items:center;
		  justify-content:center;
		  color:#173a74;
		  font-weight:bold;
		  font-size:11pt;
		  text-decoration:none; }
.facebook .fb-mobile	{ display:flex;
			  align-items:center;
			  justify-content:center; }
.facebook img	{ display:block;
		  max-height:22px;
		  margin-left:6px; }
.facebook img.fb-bar	{ display:none; }

.panel-yellow .panel-battle	{ text-align:center; }

.panel-wissen table,
.panel-forum table	{ width:100% !important; }
.panel-forum	{ flex:1 1 auto; }
.panel-forum .panel-body	{ flex:1 1 auto;
				  padding:8px 8px 0 8px; }

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

a.inhalt,
a.rechts	{ padding:2px 0; }

/* Inhalt: kompaktes 3x2-Raster statt 8 gestapelter Zeilen; Infos und
   Service entfallen auf dem Handy, die <br> entfallen, die Trennlinien
   entstehen aus dem Grid-Gap. */
.panel-inhalt .panel-body.nav-links	{ padding:0;
				  display:grid;
				  grid-template-columns:1fr 1fr 1fr;
				  gap:1px;
				  background:rgba(13,13,140,.28); }
.panel-inhalt br,
.panel-inhalt a.inhalt.mob-hide	{ display:none; }

.panel-inhalt a.inhalt	{ display:flex;
			  align-items:center;
			  justify-content:center;
			  min-height:46px;
			  padding:0 6px;
			  font-size:10pt;
			  line-height:1.15;
			  text-align:center;
			  background:#bdd6ce;
			  -webkit-tap-highlight-color:rgba(0,0,0,.12); }
.panel-inhalt a.inhalt:active	{ background:rgba(13,13,140,.14);
				  color:#aa0000; }