div.shariff { 
    margin-top:1rem;
}

div, #suchelement {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

div.col { 
    padding:0.3rem;
}

input { border-radius:0px; }

#breadcrumbs, div.druckversion { display:none; }

body { padding:0px;margin:0px;background-color:#BCCAC8;font-family:Verdana,Arial,Helvetica,sans-serif;color:#000000; }
/* Menue ...inspiriert durch:
   http://blog.teamtreehouse.com/create-an-absolute-basic-mobile-css-responsive-navigation-menu
*/
.clear {clear:both;}

.vmclear { clear:left; }

#suchformularmobil, #loginformular { 
    display: none;
}

#main {margin-top:0px;padding-top:0px; }

div.ueberschrift_stvkv {margin-top:5px;color: #44625D;font-size: 24px;}

#suchpopup { width:160px;position:absolute;right:5px;top:5px; }

#artikel { clear: right; }

#navigationartikel {display:none; } 

ul.navigation {list-style-image: url(/layoutgrafik/listenminus.gif);margin-left:20px;margin-top:10px;padding:0; }

#kacheln {     
    display:-webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow:row wrap;
}

#kacheln > div.kachel { 
    background-color:white;
    margin:auto;
    margin-bottom:0.4em;
    min-width:250px;
    width:80%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}


ul.topsubnavigation li { font-size:smaller; } 

nav a, nav h1 {
    color:white;
    font-weight:bold;
}

nav ul {
/*    border-bottom: 1px black solid; */
}

#content { background-color:white;padding-bottom:0.5rem;margin-bottom:0.5rem; }


/* eigentlich könnte diese padding-Regel dank "box-sizing: border-box;" direkt für "content" gelten und man würde ein <div> sparen - 
   aber der IE11 macht das bei flexbox nicht mit :( */
#content > * { padding-left:1rem;padding-right:1rem; }

li.active { 
/*    background-color:#009136; /* Farbe aus 'Gerechtigkeit1.jpg' / Logo */
    display:list-item;
    padding-bottom:0px;
}

div.active {
    background-color:#009136;  /* Farbe aus 'Gerechtigkeit1.jpg' / Logo */
}

nav ul {
    margin-top:0px;margin-bottom:0px;
    padding-top:0px;padding-bottom:0px;
}

#contentService > div.flexbox > div.col {
    text-align:center;
}

#contentService > div.flexbox > div.col > div {
    text-align:left;
}

/* Layout
   ========================================================================== */
/*VBE stuff*/
.aktuelles_datum { font-size: 12px;}
.datum_ueberschrift { float:right; display:inline; font-size: 12px;}
div.datum { font-size: smaller; float:right;color: #A4A4A4; text-align:right; padding:0.5em;}

table.listentabelle {border-collapse:collapse;margin-top: 50px;border-collapse: collapse;width: 100%;}
td.listentabelle {border-bottom: 1px solid #DDDDDD;padding: 10px;font-size: 14px;vertical-align:top;}
td.listenTabellenHeader {border-top: 1px solid;padding-top: 15px;padding-left: 10px;padding-bottom: 20px;color: #63666F;font-size: 25px;vertical-align:top;}

.teaser_artikel {margin-top:3rem;margin-bottom:2rem;color: #44625D;font-size: 120%;line-height: 150%;}

.ueberschrift_einleitung, .ueberschrift_artikel, div.teaser_presse { 
    color: #44625D;
    font-weight: normal;
}

.ueberschrift_einleitung, .ueberschrift_artikel { 
    padding-top:5px;
    margin-top:0px;
    font-size: 140%;
}

.content_artikel {}
.teaser_artikel { font-weight:bold;}

div.content_tiny, #contentService > div.flexbox > div.col > div.content_tiny {
    text-align:right;
    color: #959595;
    font-size: 9px;
}

div.laufband {
    background-color: #E7ECEB;
    padding-top: 0.5%;
    margin-bottom: 0.8em;
}

header {
    width:100%;
    background-color:white;
    text-align:left;
    vertical-align:bottom;
}

#subnavigation { clear:right; font-family: Arial,sans-serif;font-size:small;text-align:right;margin-bottom:0.5em; }
#subnavigation a { color: #63666F;text-decoration: none; }

#headerelements { text-align:right; }

header object {
    width: calc(100% - 80px);
    max-width: 400px;
    margin-right:2em;
}

.pressemitteilungen {
    height:22em;
}

.aktuellethemen {
    height:23.8em;
}

.headerbox {
    background-color: white;
}

#logo {
    width: 30%;
    min-width:180px;
    max-width:311px;
    padding:1rem;
}

div.teaser_presse { margin-top:1rem;margin-bottom:1rem;line-height: 150%; }


/*Flexbox - damit die Kacheln in der Hoehe gleich bleiben*/
div.flexbox {
    padding: 0;
    margin: 0;
    list-style: none;
}

nav {
    clear:both; 
    background-color: rgb(122, 193, 66);
    width:100%;
}

 /*video wrapper fuer das eingebettete VBE youtube video - Thierry Koblentz*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
    overflow: hidden;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.elastic-videowrapper { 
    width: 500px;
    max-width: 100%;
} 

div.flexbox > div.col {
    background-color:white;
    margin-bottom:0.5em;
    margin-top:0.5em;
}

/* Kalender */
.calender {width:14.15rem;font-size:90%;border:1px solid black;margin:auto;padding-top:0.3em;background-color:#FFFFFF;margin-top:2em;}
#calendar {min-width:14.5rem; } /* Für WebKit-Problem, abhängig von Kalender-Breite */
div.calender {padding-top:0.3rem; }
.calender div.after,.calender div.before{color:silver;background:#FFF;} 
.day {float:left;width:2rem;height:1.6rem;line-height:1.4rem;text-align:center;background:#CCCCCC;} 
.day.headline {font-weight:bold;background:#FFFFFF;color:black;font-weight:bold;} 
.day.current {font-weight:bold;background:#FF0000;color:white;}
.day.event {font-weight:normal;color:white;} 
.pagination {width:100%;height: 20px;text-align:center;line-height:10px;font-weight: bold;color:black;background:#FFFFFF;} 
.pagination a.last {float:left;color:black;margin-left:0.5em;}
.pagination a.next {float:right;color:black;margin-right:0.5em;}
.pagination span {text-align:center;margin-top: 1%;font-size:120%} 
.clear {clear:both;}
div.spacer { clear:both; height:20px; }
a.calendar:link, a.calendar:visited, a.calendar:hover {font-family: Arial,sans-serif;color: #D2232B;text-decoration: underline;}
a.calendar_current:link, a.calendar_current:visited, a.calendar_current:hover {font-family: Arial,sans-serif;color: black;text-decoration: underline;}

/* Links
   ========================================================================== */

a {
    color: #1C9048;
    text-decoration: none;
}

a:hover { text-decoration: underline; }


/* Elements
   ========================================================================== */

hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 2rem auto;
    width: 3rem;
}


#fuss > div.fuss_container_tabelle { 
    color: #FFF;
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
}

/*  flex:  flex-grow + flex-shrink + flex-basis  */
div.fuss_spalte { 
    flex:1 1 23%;
    -webkit-flex:1 1 13rem; /* Für Safari auf iOS 8/2015 */
    max-width:18rem;
    min-width: 14rem;
    line-height:200%;
}

div.fuss_spalte h3 { margin-bottom:0px; margin-top:1em; font-weight:bold; }
div.fuss_spalte a:link, div.fuss_spalte a:visited { color: #FFFFFF; text-decoration: none; display:block;}
div.fuss_spalte a:hover {text-decoration: underline;}

div.fuss_spalte > * { padding-left:1em; }

#fuss, #abbinder { width:100%; }

#abbinder { background-color:#FFF;}
#abbinder a:link, #abbinder a:visited {font-family: Arial,sans-serif;font-size: 15px;color: #000;text-decoration: none;font-weight: bold;}
#abbinder a:hover {text-decoration: underline;}

#abbinder div.c { font-size: 10px; padding-top:0.3em; }
#abbinder div.links { font-size: 12px; font-weight: bold;text-align:right;float:right; }
#abbinder > div.fuss_container_tabelle { margin-top: 0.1em; }

#fuss {
    clear:both;
    background-color: #68827E;
    padding-bottom:1em;
}

hr.small { margin: 1.5rem auto; }

img.resize {
    display: block;
    height: auto;
    margin: 0 auto 0 auto;
    width: 100%;
}

img.header {
    display: block;
    height: auto;
    margin: 0 auto 1.5rem auto;
    max-width: 100%;
}

.rwd {
    margin: 0 auto 1.5rem auto;
    max-width: 440px;
}

pre.band {
    font-family: Arial,sans-serif;font-size: 16px;font-weight: bold; color: #63666F;
    text-align:center;
    overflow: hidden;
    margin:0px;
}

div.elastic-video-wrapper { white-space: normal; margin-right:0px; }

/* frühere MEDIA QUERY - Menü verstecken, Menü-Schaltfläche anzeigen, keine Flexboxen - was nur für kleine Auflösung gebraucht wird. */

.messagepop {
    background-color:white;
    border:1px solid grey;
    cursor:default;
    display:none;
    position:fixed;
    top: 50px;
    right: 10px;
    text-align:left;
    width:90%;
    max-width: 17em;
    z-index:50;
    padding: 25px 25px 20px;
}
.messagepop p, .messagepop.div {
    border-bottom: 1px solid #EFEFEF;
    margin: 8px 0;
    padding-bottom: 8px;
}

label { 
    display: inline-block;   
}
input.suchformular {
    font-size: 1.2em;
    margin-bottom: 0.8em;
    padding: 0.3em;
    width: 10em;
    height: 1.1em;
    border: 1px solid grey;
}

.suchknopf {
    -webkit-appearance: none;
    color:white;
    font:Arial,Helvetica,sans-serif;
    font-size:1.2em;
    background-color: #7AC142;
    height: 1.8em;
    border: 1px solid grey;
}

#menu-icon, #menu-suche, #menu-facebook, #menu-login {
    width:  35px;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    border-radius: 0.4em;
    background-clip: padding-box;
    margin-right:0.6em;
    margin-top:0.2em;
    float:right;
    border:1px solid grey;
}

#menu-icon {
    background-image:url(../layoutgrafik/menu-icon.png);
    margin: 2px;
}

#menu-suche {
    background-image: url(../layoutgrafik/search-icon.png);
    margin-top:0.5em;
}
#menu-facebook {
    background-image: url(../layoutgrafik/facebook-icon.png);
    margin-top:0.5em;
}

#menu-login {
    /*        background-color: #bdcbc9; */
    background-color: black;
    background-image: url(../layoutgrafik/login-icon.png);
    margin-top:0.5em;
}

nav h1 {
    font-size: 100%;
    margin:0px;
    padding-left:1em;
    padding-top:0.5em;
    display:block;
}

nav ul.top { 
    display:none;
    position: absolute;
    background-color: rgb(122, 193, 66);
    border: 2px solid #A8A8A8;
    right: 20px;
    width: 50%;
    border-radius: 4px 0 4px 4px;
}

nav li {
    text-align: left;
    width: 100%;
    padding: 0px 0;
    margin: 0;
}

nav a {
    display:block;
}

nav a:hover {
    background-color:white;
    color: rgb(122, 193, 66);
    text-decoration: none;
}

nav ul {
    padding-left:0rem;
    padding-right:0rem;
    list-style: outside none none;
}

nav:hover > ul.top, nav:active > ul.top {
    display: block;
    padding-left:0.3rem;
    padding-right:0.1rem;
    -webkit-user-select: none; -webkit-touch-callout: none;
/* Danke: http://www.coffeebreak-blog.de/kinderleichter-ios-hover-fix/ */
}

/* Die Anfangs-Reihenfolge zu vertauschen (bei Winz-Auflösung, damit Inhalt auf Startseite zuerst kommt) */

#anfang {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
    
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-bottom:5px;
}

#anfang > div.flex4 {
    -webkit-order: 2;
    order: 2;
    flex-basis:100%;
}

#anfang > div.flex2 {
    -webkit-order: 1;
    order: 1;
    flex-basis:100%;
}

/* Ende des früheren max-width media-query */

/* Layout
   ========================================================================== */

/* Ab 40 (oder 36) em werden die Boxen in flexbox-Zeilen nebeneinander dargestellt */

@media (min-width:36rem) {

    #anfang > div.flex4 {
        -webkit-order: 1;
        order: 1;
    }

    #anfang > div.flex2 {
        -webkit-order: 2;
        order: 2;
    }

    #main { padding-top: 0.5rem; }

    #content { min-width:24rem; }

    nav:hover > ul.top {
        padding-left:0rem;
        padding-right:0rem;
    }

    hr { margin: 2.5rem auto; }

    #kacheln > div.kachel { margin-left:0.4em;width:auto; }

    /* Aufhebung der Styles der Mini-Mobil-Version / #suchpopup aus der Mini-Mobil-Version ausblenden */

    nav h1, #suchpopup, #menu-icon {
        display:none;
    }

    nav a {
        display:inline;
    }

    nav ul.top {
        list-style: none;
        display: inline;
        position: static;
        width: auto;
        border-width:0px;
    }

    nav li {
        width: auto;
        padding: 0 0;
    }

    /* ...Ende der Aufhebung */

    div.laufband {
        padding-right: 1%;
    }

    pre.band {
        padding-left:1%;
        padding-right:1%;
    }

    div.flexbox, #main {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;  
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
    }

    #anfang > div.flexbox {
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    div.flexbox > div.col {
        -webkit-flex-grow: 1;
	-webkit-flex-shrink: 1;
        flex-grow: 1;
	flex-shrink: 1;
        margin-left:1%;
    }

    #contentService > div.flex4 > div.col, #calender, div.kachel_termine {
/*        flex-basis:13rem; */
        -webkit-flex-basis:220px;
        flex-basis:220px;
    }

    div.flex3 > div.col {
        -webkit-flex-basis:31%;
        flex-basis:31%;
    }

    div.flex2 > div.col {
        -webkit-flex-basis:48%;
        flex-basis:48%;
    }

    div.cnormal { 
        -webkit-flex-grow: 1;
        -webkit-flex-shrink: 1;
        flex-grow: 1;
        flex-shrink: 1;
        -webkit-flex-basis: 40rem;
        flex-basis: calc(100% - 257px);
    }

    #seitenleiste { 
        -webkit-flex-grow: 1;
        -webkit-flex-shrink: 1;
        flex-grow: 1;
        flex-shrink: 1;
        -webkit-flex-basis:12rem;
        flex-basis:252px;
    }

    #anfang > div.flexbox > div.col:first-of-type {
        margin-left:0px;
    }

    /* Header
       ========================================================================== */

    .mobile {
        margin: 0 auto;
        max-width: 150px;
    }

    /* Section
       ========================================================================== */

    section {
        border-top: 0px solid white;
        padding: 0rem 0;
    }

    section:first-of-type { border-top: none; }


    nav  ul > li {
        display: inline-block;
        float: left;
        line-height:200%;
    }

    nav ul > li a {
        padding: 0.35rem 1rem;
    }

    nav > ul > li.active {
        padding-top:0px;
        margin-left:1rem;
    }


/*    Besser nicht alles verkleinern... oder zumindest den Kalender ausnehmen! 
html { font-size: 80%; } */

    a.ueberschrift_aktuell:link, a.ueberschrift_aktuell:visited {font-family: Arial,sans-serif;font-size: 80%;color: #D2232B;text-decoration: none;font-weight: bold;}
    a.ueberschrift_aktuell:hover {text-decoration: underline;}
    .content_aktuell {color: #000;font-family: Arial,sans-serif;font-size: 80%;}

    .ueberschrift_einleitung, .ueberschrift_artikel { 
        font-size: 180%;
    }

    .headerbox {
        background-color: white;
    }

    header object {
        margin:0.5em;
        width:400px;
    }
    
    /*Header Inhalte*/
    #suchformularmobil { width:179px;border:1px solid silver; }
    #suchelement  { width: 148px;height:27px; }
    #suchbutton  { float: right;width: 29px;height:27px; }
    .noBorder {padding:4px;font-family: Arial,sans-serif;color: #000000;font-size: 0.8em;height:1.2em;border: none;}
    .hiddensearch {display: none;}
    

    #facebooklink {
	width:  80px;
	height: 29px;
	background: url(../layoutgrafik/hintergrund_facebook_like.png) center;
        background-repeat:no-repeat;
        background-clip: padding-box;
    } 

/*
    #suchformularmobil {  float: right; margin-right:1em; margin-top:7em;background-color: pink;display:inline;}
    #loginformular {float: right;width: 191px;height:27px; border:1px solid silver; margin-top:7em; margin-right:0em;background-color: yellow;}
*/

    #suchformularmobil, #loginformular { display:inline; }
    #suchformularmobil, #loginformular, #facebooklink { float:right; }

    #loginformular { width: 191px;height:27px; border:1px solid silver; margin-right:0em;}

    #id_login1 {display: inline-block; width:69px; height:19px; border-right:1px solid silver;}
    #id_login2 {display: inline-block; width:69px; height:19px; border-right:1px solid silver;}
    #loginbutton {float:right; width: 29px;height:27px;}

    #headervornav { position:relative;min-height:190px; }

    #headerelements {float:right;position:absolute;right:0.5em;bottom:0px;width:100%;}
    #headerformular {width:calc(100% - 430px);float:right;padding-bottom:1em;}

    #headerformular > form, #headerform > a { margin-left: 1em; margin-bottom: 0.5em; }
}

/* Ab 74rem wird die Schrift etwas größer und die Boxen wachsen nicht mehr weiter */
@media (min-width: 74rem) {


  html { font-size: 100%; }
    a.ueberschrift_aktuell:link, a.ueberschrift_aktuell:visited {font-family: Arial,sans-serif;font-size: 90%;color: #D2232B;text-decoration: none;font-weight: bold;}
    a.ueberschrift_aktuell:hover {text-decoration: underline;}
    .content_aktuell {color: #000;font-family: Arial,sans-serif;font-size:90%;}
    
    body {
        background-image:url(../layoutgrafik/hintergrund.mobil.gif); background-repeat:no-repeat; background-position:top center;  background-attachment:scroll;
    }

    body > *, div.fuss_container_tabelle {
        margin: 0 auto;
        /* Maximale Breite des Containers bei großen Aufloesungen festlegen*/
        width: 75%;
        min-width: 73rem;
    }

    header object {
        margin:0.8em;
    }

    .hiddensearch, ul.subnavigation, ul.topsubnavigation {
        display: none;
    }
    .vmclear { clear:none; }

    #navigationartikel {
        display: block;
        background-color:white;
        min-height:50px;
        margin-bottom:0.5rem;;
        padding-bottom:10px;
        padding-top:15px;
        line-height:150%;
    }

    #navigationartikel a:link, #navigationartikel a:visited {
        color: #63666F;text-decoration: none;
    }
    #navigationartikel a:hover {
        text-decoration: underline;
    }

    #breadcrumbs { color: #44625D;font-size: small; display:block; margin-top:0.5em; }

    #breadcrumbs > a:link, #breadcrumbs > a:visited { color: #44625D; text-decoration: none; }

    .ueberschrift_einleitung, .ueberschrift_artikel { font-size: 300%; }
}

#realPersonDiv {text-align: center;margin-top:1rem;}
div.realperson-challenge { margin:0.5rem; }