/**
    Standardformate

    Farben:
        Blau:   #003676

    Fonts:
        Überschriften: OpenSans Extrabold
        Fließtext:     OpenSans Regular

----------------------------------------------------------------------------- */
@font-face {
    font-family: 'Armata';
    font-style: normal;
    font-weight: 400;
    font-display:swap;
    src: url('../fonts/armata-v12-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/armata-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/armata-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/armata-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/armata-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/armata-v12-latin-regular.svg#Armata') format('svg'); /* Legacy iOS */
}

body{
    font-family : "Armata", sans-serif;
    font-size   : 1em;
    font-size   : .95em;
    font-weight : 400;
    font-weight : normal;

    color             : #444;
    background-color  : #fff;

    -webkit-font-smoothing:antialiased;
}

/**
    Basis-Elemente
----------------------------------------------------------------------------- */

/**  Überschriften  **/
h1,h2,h3,h4,.h4{
    color         : #003676;
    margin-bottom : 1em;
    line-height   : 1.15em;
}
h1{
    font-size   : 2.1em;
}
h2{
    font-size   : 1.7em;
}
/**
    Startseite Teaser: Auf machen Browser passt die Überschrift nicht
    in zwei Zeilen und bricht in eine dritte um. Das drückt die Boxen nach
    unten und überdeckt das Zitat.
----------------------------------------------------------------------------- */
.teaser h2{
    letter-spacing: -0.5px
}

h3{
    margin-bottom : .9em;
    font-size     : 1.45em;
    line-height   : 1.20em;
}
h4,.h4{
    font-weight : 600;
}

/* Anpassungen für Datenschutzerklärung */
.datenschutz h2 {
	margin-top: 1.5em;
	font-size: 1.45em;
	background : transparent url(/files/theme/img/linie__hg.png) repeat-x 0 0;
	padding-top: 1.5em;
}
.datenschutz h3 {
	margin-top: 1.2em;
	margin-bottom: .5em;
	font-size: 1.2em;
}


/**  Absätze  **/
p{
    line-height  : 1.35em;
    margin-bottom: 1.15em;
}
/**  Fett  **/
strong{
    font-weight: 700;
}

/**  Links  **/
a { color: #003676 }
#content a {
    text-decoration:none;
    background: url(/files/theme/img/link__hg.png) no-repeat left center;
    padding-left: 15px;
}
#content a.nolink {
	text-decoration:underline;
    background: none;
    padding-left: 0;
}
#content li a {
    text-decoration:none;
    background: none;
    padding: 0;
}

#content a:hover {
	text-decoration:underline;}

/**
    Zitate

    @see templates/dma_eg_zitat

    <div class="zitat">
        <blockquote>
            <p><?php echo nl2br_html5($this->data['text']['value']); ?></p>
        </blockquote>
        <p class="author">
            (<?php echo $this->data['autor']['value']; ?>)
        </p>
    </div>
----------------------------------------------------------------------------- */
blockquote p{
    color         : #003676;
    font-family   : Georgia, serif;
    font-style    : italic;
    font-size     : 2.2em;
    text-align    : center;
    margin-bottom : .2em;
}
blockquote p:before { content: '“';}
blockquote p:after{ content: '“';}

/** Autor **/
.author{
    font-size  : .8em;
    text-align : center;
    color      : #999;
}

/**  Listen  **/

#content ul  {
    margin-left  : 0.3em;
}
#content li {
    margin-bottom  : 0.8em;
	line-height:	1.35em;
    padding-left   : 20px;
    background     : url(/files/theme/img/icon-liste.png) no-repeat 0px 6px;
	}



table 		{font-size: 0.85em; width: 100%;}
table td,
table th 	{padding: 0.8em 0.5em; border: 1px solid #F3F1E8;}
table th 	{background:#003476; color:#F3F1E8; text-align:left;}
table p	{margin:0;}
table .odd {background:#EAE6D6;}
table .zentriert {text-align:center;}

table.mb0 td {padding:0.2em 0em; border: 0px; font-size:1.15em; }

/**  Links oder span als Schaltfläche  **/
.btn{}
.btn-blau {
    display    : inline-block;
    background : #003676;
    color      : #fff;
    padding    : 10px 15px;
    border-radius: 6px;
	text-decoration:none;
}
.btn-blau:hover{}
.btn-blau a {color:#fff; text-decoration:none;}

button.btn-blau{
	border	   : 0;
	padding    : 10px 15px;
	cursor	   :pointer;
}

.widget.widget-submit{
	text-align:right;
}

/*  Link für Telefon, wird erst eingeblendet wenn Telefon.  */
.btn-call{
    text-decoration : none;
    background   : url(/files/theme/img/icon-telefon__klein-gruen.png) left center no-repeat;
    display      : inline-block;
    padding-top  : 10px;
    padding-bottom  : 10px;
    padding-left : 26px;
}

/**  Bilder  **/
img{
    display : block;
    margin  : 0;
    padding : 0;
}

/**  In ce_text  bzw. image_container **/
.image_container.float_above{
    margin-bottom: 10px;
}
#content .image_container a {background:none; margin:0px; padding:0px;}
.float_left{
    margin-right: 15px;
}
.float_right{
    margin-left: 15px;
}


/**
    Trenner-Elemente für floatings zu unterbrechen

    <hr class="trenner">           Nur Trennen
    <hr class="trenner linie">     Mit Linie unten
    <hr class="trenner linie mb">  Mit Linie unten und Abstand unten
----------------------------------------------------------------------------- */
.trenner {
    margin     : 0;
    padding    : 0;
    clear      : both;
    height     : 0;
    border     : 0;
    visibility : hidden;
}
.trenner.linie {
    visibility : visible;
    background : transparent url(/files/theme/img/linie__hg.png) repeat-x 0 10px;
    height     : 45px;

/*
    outline: 1px solid blue;
*/
}
.trenner.linie.nomargin {
    visibility : visible;
    height     : 10px;
    background : transparent url(/files/theme/img/linie__hg.png) repeat-x 0 0px;
}
.linie{
    background : transparent url(/files/theme/img/linie__hg.png) repeat-x bottom left;
}
.linie-unten{
    background    : transparent url(/files/theme/img/linie__hg.png) repeat-x bottom left;
    padding-bottom : 20px;
    margin-bottom : 40px;
}

hr {
    border:none;
	background    : transparent url(/files/theme/img/linie__hg.png) repeat-x bottom left;
    padding-bottom : 15px;
    margin-bottom : 30px;
	clear:both;
}

/* Treffer in Suchergebnis  */
.highlight{ display:inline-block; background: yellow; }


/**  Verborgen Elemente, welche für Text-Leser doch angezeigt werden sollen  **/
.hidden,
.invisible{
    position: absolute;
    left    : -2500px;
}
.hide{
    visibility:hidden;
}

.isDesktop .hide-on-desktop{ display:none; }
.isMobile .hide-on-mobile{ display:none; }

/**
    Einleitungstext in der Kopfzeile
    Grundeinstellunge für Position etc siehe layout.css
----------------------------------------------------------------------------- */
.einleitung h2{ font-weight: 600; font-size: .8em; margin-bottom: .3em; margin-top: 15px; }
.einleitung p{ font-size: .8em; margin-bottom:0; }


/**
    Box weisser Grund
----------------------------------------------------------------------------- */
/** .clear ist standardmäßig inline-block formatiert **/
.box-weis.clear{
    display: block;
}
.box-weis{
    border-radius    : 5px;
    padding          : 25px;
    padding-bottom   : 20px;
    box-shadow       : #aaa 0 0 4px 0;
    background-image : url(/files/theme/img/box-weis__hg.png);
}
.box-weis.active,
.box-weis:hover{
    background-image : url(/files/theme/img/box-weis__hg-active.png);
}

/**
    Download
----------------------------------------------------------------------------- */

.ce_download {
    padding : 30px 0;
    margin : 30px 0;
	}
.ce_download img {
	float	:	left;
	padding-right: 15px;
	}


/**
    Galerie
----------------------------------------------------------------------------- */
#content .ce_gallery{
    padding-bottom:10px;
}
#content .ce_gallery ul{ clear:both; margin-left:0px; }
#content .ce_gallery li{
    display       : inline-block;
    margin        : 0;
    padding       : 0;
    margin-right  : 12px;
    margin-bottom : 20px;
    background    : none;
}
#content .ce_gallery a,
.ce_gallery img {
    margin:0;
    padding:0;
    background:none;
}
#content .ce_gallery .col_last{
    margin-right : 0;
}


/**
    Leiste mit Menü und Icons

    <div id="navbar">
        <div id="hauptnavigation-container">
            <div class="hauptnavigation-inner">
                <nav id="hauptnavigation">
                    <ul>
                        <li></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="navbar-inner">
            <div id="search-container">
                <div class="mod_search block">
                    <form action="suche.html" method="get">
                        <div class="formbody">
                            <label for="ctrl_keywords_14" class="invisible">Suchbegriffe</label>
                            <input name="keywords" id="ctrl_keywords_14" class="text" value="comitas" type="search">
                            <input id="ctrl_submit_14" class="submit" value="Suchen" type="submit">
                        </div>
                    </form>
                </div>
            </div>
            <p class="navigation" >
                <span class="btn-blau navigation-toggler" data-type="toggler" data-element="hauptnavigation-container">Menü</span>
            </p>
            <p class="copyright">
                <span data-type="btn-call" data-no="+4985155455">0851 55455</span>
                <br>
                <a href="mailto:info@comitas-pflegedienst.de">info@comitas-pflegedienst.de</a>
            </p>
            <p class="icons">
                <span class="icon search">[nbsp]</span>
                <span class="icon map">[nbsp]</span>
                <span class="icon up" id="btn-up" data-type="up">[nbsp]</span>
            </p>
        </div>
    </div>
----------------------------------------------------------------------------- */
#navbar p {
    float         : left;
    margin-bottom : 0;
}

#navbar .copyright,
#navbar .navigation{
    padding-top: 3px;
}
/** Schalter für die Navigation **/
#navbar .navigation-toggler {
    cursor         : pointer;
    text-transform : uppercase;
    padding-left   : 45px;

    background-image  : url(/files/theme/img/icon-mobil-navigation.png);
    background-repeat : no-repeat;
    background-position : 8px 50%;
}
#navbar .navigation-toggler.active {
    background-image    : url(/files/theme/img/icon-mobil-navigation__aktiv.png);
    background-position : 12px 50%;
}
#navbar .copyright{
    color        : #003676;
    border-left  : 2px solid #003676;
    margin-left  : 20px;
    padding-left : 18px;
}
/** Sonderregelung für telefon und mail **/
#navbar .icon-call{
    display:block;
    margin-bottom:0;
}

#navbar .icons {
    float : right;
}
#navbar .icon {
    display     : inline-block;
    height      : 0;
    overflow    : hidden;

    width            : 51px;
    padding-top      : 50px;

    margin-left : 15px;
    cursor      : pointer;

    background-position : center center;
    background-repeat   : no-repeat;
}
#navbar .icon.search {
    background-image : url(/files/theme/img/navbar-icon-suche.png);
}
#navbar .icon.search:hover {
    background-image : url(/files/theme/img/navbar-icon-suche_hover.png);
}
#navbar .icon.map {
    background-image : url(/files/theme/img/navbar-icon-maps.png);
}
#navbar .icon.map:hover {
    background-image : url(/files/theme/img/navbar-icon-maps_hover.png);
}
#navbar .icon.up {
     background-image : url(/files/theme/img/icon-nach-oben.png);
}
#navbar .icon.up:hover {
    background-image : url(/files/theme/img/icon-nach-oben.png);
}

/** Suchfeld **/
#search-container{
    overflow : hidden;
    height   : 0;
    width    : 100%;
}
#search-container form{
    padding    : 30px 0 15px 0;
	height 	   : 50px;
}
#search-container .fieldset{
    width  : 940px;
    margin : auto;
}
#search-container input{
    float       : left;
    width       : 80%;
    margin-left : 0;
    border      : 1px solid #ccc;
    margin-top  : 0;
    padding     : 6px;
    box-sizing  : border-box;
	height:36px;
}
#search-container button{
    float  : right;
    width  : 20%;
    height : 36px;
    border : 0;
    color  : #000;
    box-sizing : border-box;
    cursor     : pointer;
}

span.mandatory{
	color:#000 !Important;
}

/**
    Navigation allgemein
----------------------------------------------------------------------------- */
nav {
    margin-bottom : 1.25em;
}
nav strong,
nav a{
    display         : block;
    color           : inherit;
    text-decoration : none;
    padding         : 12px 25px;
    line-height     : 1.2em;
    font-weight: normal;
}
nav a:hover,
nav strong,
nav a.trail{
    color           : #003676;
    background: url(/files/theme/img/link__hg.png) 8px 17px no-repeat;
}
nav li{
    padding-top : 2px;
    background: url(/files/theme/img/hg-linie.png) left top repeat-x;
}

/**
    Navigation Breadcrumb
----------------------------------------------------------------------------- */
.mod_breadcrumb li {
    padding-right   : 5px;
    padding-top     : 7px;
    float           : left;
    font-size       : .75em;
    text-transform  : uppercase;
	letter-spacing: .01em;
}
.mod_breadcrumb a{
    text-decoration : none;
}
.mod_breadcrumb a:after {
    content: '»';
	padding: 0 3px 0 6px;
}



/**
    Hauptnavigation
    Container der die Navigation enthält.
----------------------------------------------------------------------------- */
#hauptnavigation-container{
    width      : 100%;
    background : url(/files/theme/img/hauptnavigation-container__hg.png);
    height     : 0;
    position   : relative;
    overflow   : hidden;
/*
    position: absolute;
    top  :0;
    z-index: 50;
    outline     : 1px solid blue;
*/
}

.hauptnavigation-inner{
    position : relative;
    width    : 940px;
    margin   : auto;

    overflow : hidden;
}

#hauptnavigation{
   /*
    position : absolute;
    bottom:0;
    */
    position : relative;
    width    : 2500px;
    margin   : auto;
}

/**
    Hauptnavigation Liste
----------------------------------------------------------------------------- */
#hauptnavigation li{
    background    : none;
    border-top    : 1px solid #fff;
    border-bottom : 1px solid #ddd;
/*

    outline: 1px solid green;
*/
}
#hauptnavigation li:first-child{
    border-top: none;
}
#hauptnavigation li:last-child{
    border-bottom: none;
}
#hauptnavigation strong,
#hauptnavigation a{
    display : block;
    color   : #111;
    padding : 12px 30px;
}
#hauptnavigation a.back{
    padding : 8px 30px;
    background-color: #003676;
    color: #fff;
}
.isPhone #hauptnavigation strong,
.isPhone #hauptnavigation a{
    font-size : .9em;
    padding   : 8px 10px;
}
#hauptnavigation span.active,
#hauptnavigation a.trail,
#hauptnavigation a:hover{
    color      : #003676;
    background : none;
}
#hauptnavigation span.active.submenu:hover,
#hauptnavigation span.trail:hover,
#hauptnavigation a.trail.submenu,
#hauptnavigation a.submenu,
#hauptnavigation a.submenu:hover{
    cursor     : pointer;
    background : url(/files/theme/img/link__hg.png) 95% 17px no-repeat;
}
#hauptnavigation li.submenu:hover a.submenu,
#hauptnavigation li.submenu:hover span.submenu {
    background: url(/files/theme/img/link__hg.png) 95% 17px no-repeat;
}
#hauptnavigation li.submenu:hover .level_2 a.submenu,
#hauptnavigation li.submenu:hover .level_2 span.submenu {
    background: none;
}
#hauptnavigation li.submenu:hover .level_2 li.submenu  a.trail,
#hauptnavigation li.submenu:hover .level_2 li.submenu  a.submenu,
#hauptnavigation li.submenu:hover .level_2 li.submenu:hover a.submenu,
#hauptnavigation li.submenu:hover .level_2 li.submenu:hover span.submenu {
    background: url(/files/theme/img/link__hg.png) 95% 17px no-repeat;
}



#hauptnavigation ul{
    position : absolute;
    bottom   : 0;
    width    : 940px;
}
#hauptnavigation .level_2,
#hauptnavigation .level_3{}
#hauptnavigation .level_3{}

/**
    Subnavigation in linker Spalte
----------------------------------------------------------------------------- */
#subnavigation  ul ul{
    padding-left : 20px;
}



/**
    Abstände nach unten

    Die Formatierung muß unten stehen, damit sie vorhergehende überschreibt.
    z.B. hr.trenner hat margin:0 hr.trenner.mb soll aber aber Abstand haben
----------------------------------------------------------------------------- */
.mb{
    margin-bottom: 25px; /* 1.15em line-height aus Absatz?  */
}
.mb15{
    margin-bottom: 15px;
}
.mb20{
    margin-bottom: 20px;
}
.mb25{
    margin-bottom: 25px;
}
.mb40{
    margin-bottom: 25px;
}
.nmb{ margin-bottom:0; }


.com_ap img{
	float:left;
	margin-right:1rem;
	margin-bottom:1rem;
	max-width:100%;
	height:auto;
}

/**
    Formular . Datennutzung . Formatierung der Checkbox

----------------------------------------------------------------------------- */

.datennutzung {
    border:0px none;
	padding-bottom: 0px;
	margin-top:20px;
}

fieldset.datennutzung span {
}

fieldset.datennutzung input.checkbox {
	border: 1px solid #d0cfca;
	float:left;
	width: auto;
}
fieldset.datennutzung label {
		width: auto;
		font-size: 0.9em;
		padding-top: 2px;
		padding-left: 5px;

    }


.explanation {

}
.explanation p {
    font-size: 0.8em;
    line-height: 1.25em;
    color: #333;
	font-style: italic;
	padding-bottom: 1.5em;
	width: 480px;
}

@media (max-width: 970px) {

	.explanation p {
		width: 100%;
	}

}

@media (max-width: 365px) {
	.com_ap .image_container.float_left{
		margin-right:0;
	}
}