@import url(fonts.css) all;

/* 
Constsnze Deten
kostenlose Unterstuetzung DAV, Sektion Leipzig
*/

/* Farbsprektrum von DAV übernommen */
:root {
	/* Farbgebung DAV-Zentrale */
	--color-text-highlight-dav: #3b696d;
	--color-fill: #3b696d;

	/* Farbgebung Magazin */
	--color-text-highlight: #52ae32;
	--color-fill: #52ae32;

	/* Farbegebung Jugendbereich */
	--color-text-highlight: #356a19;
	--color-fill: #57ab27;

	/* standardmäßig - alle */
	--color-text-inverted: #fff;
	--color-footer: #6c8087;
	--color-footer-partner: #84929b;
	--swiper-theme-color: #007aff;
	/* standardmäßig - außer Museum */
	--color-primary: #52ae32;
	--color-primary-light: #ddefd6;
	--color-primary-darken: #609e66;
	--color-secondary: #9abd3d;
	--color-body: #51565d;
	--color-text-base: #51565d;

	/* Farbgebung Museum */
	--color-primary: #00546e;
	--color-primary-light: #bde2f5;
	--color-primary-darken: #00485d;
	--color-secondary: #00556e;
	--color-body: #333;
	--color-text-base: #6c8087;
	--color-text-highlight: #00546e;
	--color-fill: #00546e;
}

body {
    /* zum Testen der Schriftart alle Alternativen unterdrueckt (Helvetica, Arial, sans-serif) */
	font-family: 'Fira Sans'; 
	font-weight: normal;
	font-size: 100%;
	color: #51565d;
	position: relative;
	overflow: hidden;
}

/* ########### allgemeine Elemente ################### */
h1, h2, h3 {
	color: #52ae32;
	font-size: 1.6em;
	font-weight: 500;
	line-height: 1.2;
	align-self: center;
	margin: 1em 0 .5em 0;
}
h4 {
	color: #1c1c1c;
	font-size: 1.4em;
	line-height: normal;
	margin: 1em 0 .5em 0;
}
title, h5 {
	color: #1c1c1c;
	font-size: 1.2em;
	line-height: normal;
	_display: block;
}
p {
	line-height: 1.3em;
	position: relative;
	margin: .5em 0;
}
.small {
	font-size: 90%;
}
.strong {
	font-weight: bold;
}
/* Standard-Link */
a {
	color: #52ae32;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	color: #356a19;
}
@media (hover:hover) {
	a:hover {
		color: #356a19;
	}
}

/* Link im Inhaltsteil der Seiten */
.entry-pages p > a, .link {
	font-weight: 500;
	margin-right: .2em;
	cursor: pointer;
}
/* Bilder schließen mit Rand ab -> abstellen */
figure a, figure a img {
	border-bottom: none!important;
	pointer-events: none;
}

/* weiterlesen-Link */
.more-link {
	font-weight: bold;
	width: 6em;
	display: block;
	border-bottom: 1px solid #52ae32;
	font-size: .9em;
	padding-bottom: .2em;
	margin: .5em 0 2em 80%;
	cursor: pointer;
}

/* ##################### Seiten-Struktur - Einstieg ################## */
/*  Struktur alle Seiten 
	body -> #wrap -> #head-bff-logo/ #head-img/ #main-pages/ .pflichtmenu ->
*/

/*  Struktur nur Start-/Blog-Seite: 
	#main-pages -> #news-pages -> .entry-pages
	
/*  Struktur Unter-/statische Seiten:
    #main-pages -> .static-pages/ .nav-mobile -> .nav-desktop/ .entry-pages
*/

/* ###################### Wrap für gesamte Seite ############# */
/* umfasst Header, Nav, Mainpage, Footer */
#wrap {
	width: 100%;
	box-sizing: border-box;
	height: 100vh;
	/* hellgrüner Hintergrund */
	_background: #ddefd6;
	margin: auto;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
}
/* mittig ausgerichteter BFF-Logo-Container für Bild-Wort-Marke */
#head-bff-logo {
	position: absolute;
	top: 2%;
	z-index: 10;
	left: 50%;
	transform: translate(-40%,5%);
}
/* Logo als Bild */
#head-bff-logo img {
	width: 100%;
}
/* groszes Panorama-Bild im Hintergrund */
#head-img {
	width: 100%;
	margin: 0 auto;
	background: #ddefd6;
}

/* ############## main-pages - Formatierung betrifft Start- und statische Seiten !!! ##### */
/* #main-pages - betrifft alle Seiten */
#main-pages {
	box-sizing: border-box;
	display: block;
	justify-content: center;
	justify-items: center;
	align-content: center;
	align-items: center;
	margin: 2em 1em 11em 1em;
}
/* Wrapper für entry-pages auf Startseite */
#news-pages {
	box-sizing: border-box;
	width: 100%;
	margin: auto;
}
/* Abschnitt entry-pages für die Hauptinhalte gibt es in allen Seiten !!! */
#news-pages .entry-pages {
	box-sizing: border-box;
	width: 100%;
}

/* ################# Startseite mit Wrapper und Nav-Kacheln ############## */
.nav-trenner {
	width: 100%;
	line-height: 1em;
	margin: 2em auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
/* Pictos Kamera & Kletterer */
.nav-line-icon img {
	max-height: 2.5em;
}
/* Seile */
.line {
	width: 20%;
	height: .3em;
	background: url("../img/seil.png") repeat-x center center;
	margin: 0 .5em;
}
/* Nav-Head zwischen Pictos und Seilen - in Kapitälchen */
.nav-head {
	text-align: center;
}
.nav-head h1 {
	font-weight: 700;
	font-variant: small-caps;
	text-transform: capitalize;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

/* ############# Kachel-Navigation index.php ########### */
/* Aufmacher im Abschnitt Aktuelles */
#top-news {
	width: 100%;
}
.top-news-img {
	width: 100%;
	padding: 0;
	margin: 0;
}
/* Kachel-Nav mit 4 Teasern */
.hp-nav {
	width: 100%;
	/* als Grid -> ab screen 900 nur 2 Container/Row */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	column-gap: 1em;
	margin: 1em 0;
	cursor: pointer;
}
/* Kachel-Bild */
.hp-nav .kachel-item figure a img {
	pointer-events: all;
	filter: grayscale(100%);
	transition: .3s;
}
/* Kachel wird farbig beim Hovern */
.hp-nav .kachel-item figure a img:hover {
	pointer-events: all;
    filter: grayscale(0%);
    box-shadow: 3px 3px 7px #444;
}
@media (hover:hover) {
	.hp-nav .kachel-item figure a img:hover {
		pointer-events: all;
		filter: grayscale(0%);
		box-shadow: 3px 3px 7px #444;
	}
}


/* ##################### statische Seiten mit Navigation ################### */
/* ########## Head, Navigationsleiste mit Untermenues, Content ################ */

/*  mobile Navi
	body -> #wrap -> #head-bff-logo/ #head-img
	/ .nav-mobile 
	-> .menu-pages .mobile -> #menu-button .hamburger -> #menuliste .menu-out2 (zugeklappte Nav)/ .menu-in (aufgeklappte Nav)
	-> .startmenu2 -> ul #menu-hauptmenue .menu -> li .menu-item .menu-item-type-custom .menu-item-object-custom 
	
	mit Unter-Menue:
	/ .menu-item .menu-item-type-post_type .menu-item-object-page .menu-item-has-children
	-> ul .sub-menu -> li .menu-item .menu-item-type-custom .menu-item-object-custom (ohne weitere Children)
	mit weiteren Children (Sub-Sub-Menue):
	/ .menu-item .menu-item-type-post_type .menu-item-object-page .menu-item-has-children
	-> ul .sub-menu -> li .menu-item .menu-item-type-post_type .menu-item-object-page

	-> #main-pages -> .static-pages
	Desktop-Navi:
	/ .nav-desktop 
	-> .menu-pages .desktop 
	-> .startmenu -> ul #menu-hauptmenue-1 .menu -> li .menu-item .menu-item-type-custom .menu-item-object-custom
	mit Unter-Menue:
	(s. oben)
	mit weiteren Children (Sub-Sub-Menue):
	(s. oben)
*/

/* 	ursprüngliche Z-Indizes:
	alles: 1,
	.menu-pages: 2, (400) -> 400
	.startmenu > ul: 3, (397) -> 450
	.startmenu ul li:hover > ul: 4, (399) -> 500
	#menuliste .menu-in: 5, (6000) -> 6660
	#menu-button: 6, (6001) -> 6666
*/

/* Inhaltswrap der statischen Seiten mit 2em Abstand zum Titelbild */
.static-pages {
	display: flex;
	flex-direction: row;
	margin: 2em auto 0;
}
/* ########### Mobile-Menue ################
/* nicht sichtbar */
.nav-mobile, .menu-pages-mobile-bg {
	display: none;
}

/* ######## Suche über Seiten-navi #########*/
.search {
	line-height: 3em;
	margin: 0 auto;
}

/* ########### Desktop-Menue ################
/* in Desktop-Version 2-Spalten, links Navigation */ 
.static-pages .nav-desktop {
	width: 20%;
	display: flex;
	flex-direction: column;
}
/*  */
.menu-pages.desktop {
	width: 100%;
	font-weight: 500;
	font-size: 1.1em;
	padding: .5em;
	line-height: 1.3em;
	background: #ddefd6;
	box-sizing: border-box;
}
/* 1. UL in der Kaskade */
#menu-hauptmenue-1 {
	width: 100%;
	display: flex;
	flex-direction: column;
}
#menu-hauptmenue-1 li, #menu-hauptmenue-2 li {
	display: block;
	box-sizing: border-box;
}
/* Abstand zwischen Navi-Punkten */
#menu-hauptmenue-1 li, #menu-hauptmenue-2 li, .sub-menu li {
	padding-left: 1em;
}
#menu-hauptmenue-1 li:last-of-type, #menu-hauptmenue-2 li:last-of-type {
	padding: .5em 0 0 1em;
}
/* Abgrenzung zwischen den Menue-Punkten */
.menu-item, .sub-menu li:first-of-type {
	border-top: #52ae32 1px dotted;
	line-height: 2.2em;
}
.menu-item:first-of-type {
	border-top: none;
}
.menu-item:last-of-type {
	border-bottom: none;
}
/* aktueller Link bleibt dunkelgrün */
.menu-pages .current_page_item > a {
	color: #356a19!important;
	font-weight: bold;
	text-decoration: underline;
}
/* Sub-Menues einblenden beim Hovern */
#menu-hauptmenue-1 li:hover > ul {
	box-sizing: border-box;
}
@media (hover:hover) {
	#menu-hauptmenue-1 li:hover > ul {
		box-sizing: border-box;
	}
}
/* Sub-Menues erstmal ausgeblendet -> funktioniert nur für Desktop-Menue */
.startmenu > .sub-menu, .startmenu > .sub-menu > .sub-menu {
	_display: none;
	font-size: .9em;
	padding-left: 1em;
}
.startmenu .sub-menu li:last-of-type {
	padding-bottom: 0;
	padding-bottom: 0;
	margin: 0;
}

/* ########## Spaltentrenner zwischen Navi links und Inhalt rechts ########## */
#trenner-nav-page {
	margin: 0;
}
#trenner-nav-page hr {
	width: 1px;
	height: 100%!important;
	min-height: 50em;
	color: #52ae32;
	border-color: #52ae32;
	border-style: dotted;
	background-color: #52ae32;
	margin: 0 1em;
}

/* ################ Beiträge, die in Seiten integriert werden ########### */
/* Inhalts-Spalte rechts */
.static-pages .entry-pages {
	width: 78%;
}

/* ############### Beitragsseite (dynamische News-Unterseite) ############ */
/* Blogbeiträge nicht mit Aufzählungszeichen versehen */
/* Achtung: Blog-Beiträge kommen als Liste -> bei Bedarf List-Style-Type (disc) an and. Stelle def. */
.wp-block-latest-posts__list, .entry-pages li {
	list-style: none!important;
	line-height: 1.5em;
	padding: .5em 0;
	margin: 0;
}
/* Link-Element als Titel der Blog-Beiträge auf Standard-Titel anpassen */
.wp-block-latest-posts__post-title {
    border-bottom: none;
    text-decoration: none;
	color: #1c1c1c;
	font-size: 1.2em;
	font-weight: 800;
	line-height: normal;
	pointer-events:none;
}
/* Hover-Effekt abstellen */
.wp-block-latest-posts__post-title:hover {
	color: #1c1c1c;
}
@media (hover:hover) {
	.wp-block-latest-posts__post-title:hover {
		color: #1c1c1c;
	}
}

/* Trenner */
.wp-block-separator, .wp-block-latest-posts__post-full-content.wp-block-separator, 
.entry-pages .wp-block-separator, .static-pages .entry-pages hr {
	width: 30%!important;
	height: 1px!important;
	line-height: .1em;
	color: #52ae32;
	border: #52ae32 dotted 1px;
	background-color: #52ae32; 
	margin: 2em auto;
}

/* Bilder im Block 
- Achtung: bei 50% bleiben in Bildergalerien in 2 Spalten je Bild anteilig 25% von Gesamtseite !!! */
.wp-block-file, .wp-block-image {
	width: 100%;
	display: flex;
	flex-wrap: wrap!important;
	justify-items: center;
	align-items: center;
	/* für horizontalen Gap in den Bilder-Colums */
	padding: .5em 0;
}
/* Mehrspalten-Einsatz für Bildergalerien */
.wp-block-columns {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap!important;
	align-items: center!important;
}
/* nur vertikaler Gap zwischen den Columns */
.wp-block-columns, .wp-block-column {
	gap: 1em!important;
}
.wp-block-column {
	width: 100%;
	box-sizing: border-box;
	justify-content: center!important;
	align-items: center!important;
}

/* Wo wird das verwendet? */
.download_headline {
	width: 100%;
	display: block;
	border-bottom: 1px dotted #52ae32;
}

/* ########### Blöcke - Tabellen ############### */
.wp-block-table {
	width: 100%;
}
.wp-block-table:last-of-type {
	padding-bottom:2em;
}
.wp-block-table td {
	padding: .5em;
	border: 1px solid #52ae32;
}
/* ausfloaten */
.site::after {
	content: "";
	display: table;
	clear: both;
}

/* ############## Audios einbinden ################ */
.home .wp-block-audio audio {
    width: 100%;
    min-width: 100px;
	max-width: 400px;
}

/* ################### Photo-Gallerie einbinden ################ */
ul .wp-block-gallery {
	padding-right: 1em;
}
.blocks-gallery-item {
	line-height: normal!important;
	list-style-type: none!important;
	padding-left: 0!important;
	margin-left: 0!important;
}

/* Korrektur Simple Lightbox */
#slb_viewer_wrap .slb_theme_slb_default .slb_group_status {
	font-family: 'Fira Sans', Helvetica, Arial, sans-serif!important;
	font-weight: normal!important;
	font-size: 100%!important;
	font-style: normal!important;
	margin-top: 1em;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_group_status {
	color: #1c1c1c!important;
}

/* ########################## Footer-Menü ################### */
/* pflichtmenu-Tablet muss ausgeblendet werden -> prüfen!!! */
.pflichtmenu-tablet {
	display: none;
}
.pflichtmenu {
    background: url("../img/footer_bg.png") no-repeat bottom left;
	background-size: contain;
	width: 50%;
	height: 6em;
	position: fixed;
	bottom: 0;
	padding: 0;
}
.untermenu {
	position: absolute;
	left: 5em;
	font-size: .7em;
	bottom: .5em;
	padding: 0;
    margin-bottom: .1em;
}
.untermenu li {
	display: inline-block;
	margin-right: .5em;
}
.untermenu li::after {
	content: "  | ";
	font-weight: 600;
	_color:#356a19;
	color: #000;
}
.untermenu li:last-of-type::after {
	content: none;
}
.untermenu a {
	color: #000;
	font-weight: 500;
	_font-size: .7em;
}

/* ################### Formulare ################### */ 
select {
	font-size: 1em;
	width:80%;
	margin-top: .5em;
	/*height: 8em;*/
	font-family: "Poppins";
}
option {
	padding: .5em;
}
label {
	width: 50%;
}
form p {
	margin: 1em 0;
}
input {
	width: 70%;
	box-sizing: border-box;
	border: 1px solid #52ae32;
	padding: .5em;
	font-size: 1em;
	font-family: "Poppins", sans-serif!important;
}
.submit {
	width: 40%!important;
}

/* Formidable Forms */
.frm_forms.frm_style_formidable-style.with_frm_style {
	margin-top: 1em;
	border-top: 1px dotted #1c1c1c;
	padding-top: 1em;
	font-family: 'Poppins', Helvetica, Arial, sans-serif!important;
	font-weight: normal;
	font-size: 100%;
	color: #1c1c1c;
}
.frm_primary_label, .with_frm_style .frm_form_fields > fieldset, .with_frm_style .frm_primary_label, textarea, .frm_button_submit {
	font-family: 'Poppins', Helvetica, Arial, sans-serif!important;
	font-weight: normal;
	font-size: 100%;
	color: #1c1c1c;
}

/* ################### Screen-Anpassungen - responsive design ############ */

/* ################### Formatänderung für Screen bis 1280px */
/* Hochkant-Bildschirme */
@media screen 
	and (max-width:1280px)
	and (orientation: portrait) {
	/* ################## Margin oben und unten prüfen! ################### */

	/* Kachel-Nav mit 2 Teasern */
	.hp-nav {
		width: 100%;
		/* als Grid -> ab screen 900 nur 2 Container/Row */
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		column-gap: 1em;
		margin: 1em 0;
	}
	/* Desktop-Navigationsleiste mit Untermenues */
	.nav-desktop, .desktop {
		display: none;
	}
	
}
/* Querformat-Bildschirme */
@media screen 
	and (max-width:1280px) 
	and (orientation: landscape) {

	/* ################## Margin oben und unten prüfen! ################### */
}

/* für Quer- und Hochformat */
@media screen 
	and (max-width:1280px) {

	/* Navigationsleiste mit Untermenues */
	.nav-mobile, .mobile {
		display: block;
		width: 100%;
		box-sizing: border-box;
		line-height: 2em;
		height: 2.8em;
		background: #ddefd6;
		position: fixed;
		top: 0;
		z-index: 20;
	}
	.menu-pages.mobile {
		width: 100%;
	}
	.menu-pages-mobile-bg {
		display: block;
		height: 3.2em;
		background: #ddefd6;
	}
	/* Mobile-Menue */
	#menuliste {
		width: 100%;
		box-sizing: border-box;
		display: inline-block;
		background: #ddefd6;
		position: fixed;
		top: 0;
		z-index: 6660;
		padding: 0 1em 1em 1em;
		font-size: 1.1em;
		line-height: 1.4em;
	}

	/* Logo auf Panorama-Bild nach unten schieben */
	#head-bff-logo {
		transform: translate(-40%,35%);
	}

	/* Hamburger-Menue und aufgeklappte Navi*/
	#menu-button {
		cursor: pointer;
		position: fixed;
		top: .5em;
		right: 2em;
		z-index: 6666;
		height: 2em;
		width: 1.8em;
	}
	.kreuz {
		background: url("../img/kreuz.png") no-repeat center center;
		background-size: 105%;
	}
	.hamburger {
		background: url("../img/hamburger.png") no-repeat center center;
		background-size: 100%;
	}

	/* Abgrenzungslinien im aufgeklappten Menue sollen nur 50-75% der Breite einnehmen */
	#menu-hauptmenue {
		margin: .5em 0 0 0;
		width: 50%;
	}
	#menu-hauptmenue, .sub-menu {
		display: flex;
		flex-direction: column;
	}

	/* falsche Struktur -> Ändert sich da was? */
	#menuliste ul ul {
		font-weight: normal;
	}
	#menuliste ul ul li {
		display: inline-block;
	}
	#menuliste ul ul li:last-of-type:after {
		content: none;
	}
	.menu-out {
		right: -50em;
		top: 0;
		opacity: 0;
	}
	.menu-out2 {
		right: -50em;
		top: 0;
		-webkit-transition: right .1s ease-in, opacity .1s; 
		transition: right .1s ease-in, opacity .1s;
		opacity: 0;
	}
	/* aufgeklapptes Mobile-Menue */
	.menu-in {
		-webkit-transition: right .1s ease-in, opacity .1s; 
		transition: right .1s ease-in, opacity .1s;
		opacity: 1;
		top:0;
		right: 0;
	}
	#menu-hauptmenue .menu-item:last-of-type {
		border-bottom: 0;
	}
	.startmenu2 .sub-menu li {
		margin-left: 1em;
		font-size: .9em;
	}
	.untermenu a {
		font-size: 1em;
	}

	/* ########## ToDo: für Toggling ausblenden ############ */
	.sub-menu {
		_display: none;
	}

	img {
		width: 100%;
	}

	#wrap {
		width: 100%;
		padding: 0;
	}
	#main-pages {
		box-sizing: border-box;
	}
	#news-pages {
		width: 100%;
		flex: none;
		box-sizing: border-box;
	}
	.entry-pages {
		font-size: .9em;
	}

	/* Kachel-Bild */
	.kachel-item, .kachel-item figure, .kachel-item h4, .kachel-item h1, .kachel-item p {
		width: 100%;
		justify-content: center;
		align-items: center;
		align-content: center;
		text-align: center;
		margin: auto;
	}
	.kachel-item {
		margin-bottom: 2em;
	}

	.static-pages {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		margin: 2em auto 0 auto;
	}

	/* Desktop-Navigationsleiste mit Untermenues */
	.static-pages .nav-desktop, .desktop, .static-pages hr {
		display: none;
	}
	
	.static-pages .entry-pages {
		width: 100%;
		box-sizing: border-box;
		padding: 0 .5em;
	}
	/* ########## horizontaler Trenner muss auch für abweichende Screens def. werden ########## */	
	.wp-block-separator, .entry-pages hr {
		width: 30%!important;
		height: 1px!important;
		color: #52ae32;
		border-color: #52ae32;
		border-style: dotted;
		border: 0.1em;
		background-color: #52ae32; 
		margin: 1em auto;
	}

	h4 {
		_margin: .2em 0;
	}

	.pflichtmenu {
		width: 100%;
		box-sizing: border-box;
	}
}

/* ################ Formatänderung für Screen bis 1024px ################### */
@media screen and (max-width:1024px) {

	/* Abgrenzungslinien im aufgeklappten Menue sollen nur 50-75% der Breite einnehmen */
	#menu-hauptmenue {
		width: 75%;
	}

	/* Logo auf Panorama-Bild nach unten schieben */
	#head-bff-logo {
		transform: translate(-40%,50%);
	}	

	/* Abstand zwischen Header und Page-Content + Page-Content und Footer */
	#main-pages {
		_margin: 9em 0 5em 0;
	}
    .menu-pages {
        font-size: .9em;
    }
	h1, h2, h3 {
		font-size: 1.4em;
	} 
    h4 {
        font-size: 1.2em;
    }
	h5 {
		font-size: 1.1em;;
	}
	.wp-block-image .alignleft {
		float: none!important;
		width: 100%!important;
		margin-right: 0;
	}
	.wp-block-image .alignleft img {
		width: 100%!important
	}
}

/* ########################## Formatänderung für Screen bis 900px ##################### */
@media screen and (max-width: 900px) {
	/* Kachel-Nav mit 2 Teasern */
	.hp-nav {
		width: 100%;
		/* als Grid -> bis screen 900 nur 1 Container/Row */
		display: flex;
		flex-direction: column;
		margin: 1em 0;
	}

	.wp-block-columns {
		align-items: center!important;
	}

	/* Sponsoren-Logos reduzieren von 4 auf 2 pro line */
	.spons-gallery {
		display: grid!important;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		column-gap: 2em;
	}

}

	/* Seiteninhalt */
	h4 {
		margin: .2em 0;
	}

	.pflichtmenu {
		width: 100%;
		box-sizing: border-box;
	}

/* ####################### Formatänderung für Screen bis 768px ############################# */
@media screen and (max-width: 768px) {

	/* Logo auf Panorama-Bild weiter nach unten schieben */
	#head-bff-logo {
		transform: translate(-40%,75%);
	}

	/* alte Formatierung? */
	.more-link {
		font-size: .9em;
	}
}

/* ##################### Formatänderung für Screen bis 450px ############################## */
@media screen and (max-width: 450px) {
	/* main-pages auf Startseite hat anderes Padding */
	.home #main-pages {
		padding: 0;
	}
	#main-pages {
		_padding: .5em .5em 5em 1em;
	}

	#menu-button {
		top: .8em;
		right: 1em;
		height: 1.2em;
		width: 1.2em;
	}
	.more-link {
		margin: .5em 0 2em 70%;
	}
}