/*
 * Basis-Style für Smartphones Querformat
 * Größen sind orientiert am iPhone 6 Plus
 */

 
/********************************************************************************/ 
/* Smartphone Landscape															*/
/********************************************************************************/ 
@media (max-width: 768px) {

/* Der Rahmen-Banner wird an die Höhe des Logos angepasst, da keine Kopfbilder angezeigt werden */
#rahmen_banner {
	height: 54px;
}

/* Ausblenden der Kopfbilder */
#kopfbilder_container {
	display: none;
}

/* Der Nav-Toggle wird eingeblendet */
/* Der Suche-Toggle wird eingeblendet */
#nav_toggle,
#search_toggle {
	display: inline-block;
	position: absolute;
}

#search_toggle {
	left: 50px;
}

#rahmen_banner .block_center {
	height: 100%;
}

.logo-header {
	height: 100%;
	max-height: 54px;
}

/* Main-Navi wird standardmäßig ausgeblendet und mittels JS eingeblendet*/
#navi_main {
	top: 54px;
	width: 100%;
	height: auto;
	position: absolute;
	display: none;
	background-color: #ffffff;
}

#navi_main_1,
#navi_main_2 {
	width: 50%;
	height: auto;
}

.main_navi ul {
	padding-top: 0;
	padding-bottom: 0;
}

/* Anpassen der Links an das neue Layout */
.main_navi ul li a, 
.main_navi ul li span.active {
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

/* Die Suche wird über die ganze Breite eingeblendet und Standardmäßig ausgeblendet */
#suche {
	position: absolute;
	left: 0;
	top: 54px;
	z-index: 2000;
	background-color: white;
	border-bottom: 1px solid #babebe;
	display: none;
	width: 100%;
}
#suche .mod_search {
	width: 80%;
	max-width: none;
	padding: 0 10%;
	right: none;
}

/* Das Submenü wird nach oben gelect und als Select-Liste verwendet */
#navi_links_container {
	display: block;
	width: 100%;
}

/* Der Subnavi-Toggle wird eingeblendet */
#navi_links_toggle {
	display: block;
}

/* Die Subnavi wird ausgeblendet und über den Toggle ein- und ausgeblendet */
#navi_links {
	display: none;
	position: absolute;
	z-index: 1000;
	background-color: white;
	width: 89.6%;
	padding: 0 5% 10px 5%;
	overflow: hidden;
	border: 1px solid #babebe;
}
#navi_links ul.level_1 {
	max-height: 200px;
	/* erzeugt Scroll-Balken auf Touch-Geräten */
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
	margin-top: 10px;
}
/* Einblenden der zweiten Navigationsebene in der Standard-Ansicht */
#navi_links li:not(.active):not(.trail) ul.level_2 {
	display: block;
}
#navi_links ul.level_1 li.last {
	border-bottom: 0px solid;
}	
	
	
/* Bilder prozentual mit insg. 30% Breite darstellen */
.newslister_startseite .image_container,
.newslister_aktuell .image_container,
.newslister-startseite-begruessung-artikel .image_container {
    float:left;
    width: 28%;
    margin-right: 2%;
    padding-left: 0;
    padding-right: 0;
    margin-top:5px;
    display: inline-block;
}
.newslister_startseite .image_container img,
.newslister_aktuell .image_container img,
.mod_newslist .newslister_startseite.erste-meldung-gross.first .image_container,
.newslister-startseite-begruessung-artikel .image_container {
	max-width: 100%;
}



/* Bei den Newslister-Bannern bleiben die Bilder eingeblendet */
.newslister_startseite .newslister_banner_image {
	display: block;
}
.newslister_startseite .newslister_banner_image img{
	max-width: 100%;
}
.newslister_startseite .newslister_banner_text {
	float: right;
	width: 70%;
	padding-left: 0;
	padding-right: 0;
}

/* Der Touch-Button des Newslister wird eingeblendet */
.newslister_startseite a.more_touch {
	/*display: inline-block; auf Kundenwunsch bleibt der reguläre Button erhalten */
}

/* Der normale "mehr"-Button des Newslister wird ausgeblendet */
.newslister_startseite a.more {
	/*display: none; auf Kundenwunsch bleibt der reguläre Button erhalten */
}

/* Bei den Newslister-Bannern bleibt der normale "mehr"-Button eingeblendet */
.newslister_startseite .newslister_banner_text a.more {
	display: inline-block;
}

/* Der Newslister wird über die ganze Breite mit einem kleinen Abstand angezeigt */ 
/* Der Link zu den weiteren Meldungen wird gleich formatiert */
/* Brotkrumenpfad wird genauso ausgerichtet */ 
/* Content Block Links (Content-Bereich der meisten Seiten) wird genauso ausgerichtet */
.newslister_startseite ,
.newslister_aktuelles_weitere_meldungen,
.newslister_aktuelles,
#navi_pfad,
#content_block_links {
	padding-left: 3%;
	padding-right: 3%;
	width: 94%
}

/* Der Content der Seite wird über die ganze Breite gezogen */
#main_content {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Breadcrumb wird ausgeblendet */
#brotkrumen {
	display: none;
}
.clear {
	display: none;
}

#facebook {
    positon: absolute;
    left: 99px;
    margin: 7px 0 7px 7px;
    padding: 0;
}

/* Anpassung der Höhe des Youtube-Iframes */
.ce_youtube .youtube-iframe {
    height: 50vw;
}
	
	
}



/********************************************************************************/ 
/* Smartphone Portrait															*/
/********************************************************************************/
@media (max-width: 414px) {

/* Die Abstände in der unteren Navigation werden verringert, damit alle Elemente nebeneinander passen */
#navi_unten a, 
#navi_unten span.active {
	margin-right: 15px;
}

/* Das Haupt-Menü wird auf eine Spalte verringert */
#navi_main_1,
#navi_main_2 {
	display: block;
	width: 100%;
	height: auto;
}

/* Verkleinern der Schrift im Submenue */
.ce_subnavi_toggle_headline {
	font-size: 16px;
}

/* Texte neben Inline-Bildern beginnen erst unterhalb der Bilder */
.image_container.float_left,
.image_container.float_right {
	float: none;
}
.image_container.float_right img {
	padding-left: 0;
}	

/* Select-Felder im Terminlister-Filter werden untereinander angezeigt */
.termin_select {
	width: 100%;
	margin-bottom: 10px;
}
.termin_select.right {
	float: none;
}

/* Buttons der Filterliste im Terminlister werden breiter dargestellt */
.termin_button {
	width: 46%;
}
.termin_button#submit {
	margin-left: 0;
	float: left;
}

/* Ausblenden des Bildes  im Menü in Seite */
.ce_inpage-menu .image_container {
	display: none;
}

/* Anpassen der Breite des Bildes auf 100% */
.newslister_startseite .image_container,
.newslister_aktuell .image_container,
.newslister-startseite-begruessung-artikel .image_container {
    display: block;
    width: 100%;
}
div.mod_newslist .image_container:not(.newslister_banner_image) img,
div.mod_newsarchive .image_container:not(.newslister_banner_image) img {
    width: 100%;
}

.newslister_startseite .news_text_container,
.newslister_startseite .news_text_container_aktuelles {
    width: 100%;
}

/* Quicklinks unter Navigation volle Breite */
.quicklinks_kurz_block {
	width: 100%;
}

}