@charset "utf-8";

@font-face {
    font-family: 'heading-serif';
    src: url('/font/notoserif-regular-webfont.eot');
    src: url('/font/notoserif-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font/notoserif-regular-webfont.woff') format('woff'),
    url('/font/notoserif-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sans';
    src: url('/font/opensans-regular-webfont.eot');
    src: url('/font/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font/opensans-regular-webfont.woff') format('woff'),
    url('/font/opensans-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sans';
    src: url('/font/opensans-bold-webfont.eot');
    src: url('/font/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font/opensans-bold-webfont.woff') format('woff'),
    url('/font/opensans-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@media all{
    /*reset-begin*/
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
        margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }
    body { line-height: 1; }
    ol, ul { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    a:focus {
        outline:1px dotted #ccc;
    }
    a:active{
        background-color:transparent;
    }
    abbr[title],span[lang][title]{
        cursor:help;
    }
    ins { text-decoration: none; }
    del { text-decoration: line-through; }
    table { border-collapse: collapse; border-spacing: 0; }
    b,strong{font-weight:bold;}
    /*reset-end*/
    html, body{
        font-family: 'sans', Arial, sans-serif;
        letter-spacing: 0.05em;
        font-size:0.95em;
        height:100%;
        margin:0;
    }
    body{
        overflow-y:scroll;
        background-color:#fff;
        color:#444;
        line-height:1.5;
        min-height:100%;
    }

    main p, main li{
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens:auto;
        hyphens: auto;
    }


    main ul, main ol{
        list-style-position:outside;
        margin-left:1em;
        padding-left:0;
        text-indent:0;
    }
    main p a, aside p a{
        display:inline-block;
    }
    main p a:before, main li a:before{
        content: '▸';
        display:inline-block;
        width:1.0em;
        text-decoration:none;
    }

    main ul{
        list-style-type: disc;
    }
    main ol{
        list-style-type:decimal;
    }
    main ol[type="a"] {
        list-style-type: lower-alpha;
    }
    #datenschutzerklaerung main ol,
    #datenschutzerklaerung main ul {
        margin-top: 1em;
    }
    main ul.nomark,
    ul#search-result-list{
        list-style-type:none;
        list-style-position:inside;
        margin-left:0;
        padding-left:0;
        text-indent:0;
    }
    #wrap-all{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        border-top:1em solid #fff;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin:0;
        position:relative;
        overflow:hidden;
        max-width:870px;
        min-width:280px;
        margin-left:auto;
        margin-right:auto;
    }
    footer{
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        font-size:0.75em;
        clear:both;
    }
    footer nav{
        text-align:right;
    }
    footer nav ul{
        display:inline-block;
    }
    footer nav li{
        display:inline-block;
    }

    #search-body label,
    #search-body input{
        display:block;
        width:100%;
    }

    h1,main .h1{
        font-family: 'heading-serif', Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
        font-weight:normal;
        font-size:1.6em;
        color:#009ee0;
        line-height:1.2;
    }

    header a{
        color:inherit;
    }
    header #main-navigation a{
        text-decoration:none;
        color:#777;
    }
    header #main-navigation a:focus,
    header #main-navigation a:hover,
    header #main-navigation li.active>a{
        color:#009ee0;
    }
    .nowrap{
        white-space: nowrap;
    }

    h2{
        font-family: 'heading-serif', Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
        font-size:1.25em;
        font-weight:normal;
        line-height:1.2;
    }

    h3{
        font-size:1em;
        line-height:1.2;
        margin-top: 2em;
        margin-bottom: 1em;
        font-weight: bold;
    }
    main h3 + p {
        margin-top: 1em;
    }

    #main-wrapper{
        position:relative;
    }
    main{
        padding-left:10px;
        padding-right:10px;
    }

    main a:link{
        color:#009ee0;
    }

    main a:visited{
        color:inherit;
    }

    #logo{
        color:#fbcf95;
        text-decoration: none;
        font-style: italic;
        font-size:2em;
        line-height:1;
        display:block;
        letter-spacing:0;
    }

    header nav{
        letter-spacing: 0;
        padding-top:0.5em;
        padding-bottom:0.5em;
        margin-top:1.5em;
        display:block;
        background-color:#fbcf95;
        color:#333;
    }
    header nav li{
        font-size:1.0em;
        line-height:1.5;
        color:inherit;
        display:block;
        text-align:center;
    }

    header nav a{
        padding-top:0.25em;
        padding-bottom:0.25em;
        text-decoration:none;
        display:block;
    }
    header nav a:focus,
    header nav a:hover,
    header nav li.active a{
        color:#009ee0;
    }
    main{
        font-size:0.9em;
        letter-spacing: 0.05em;
    }

    main strong{
        font-size:1.1em;
        line-height:1.363;
    }
    main{
        margin-bottom:6em;
    }

    #wrap-all>footer{
        height:3em;
        margin:0;
        font-size:0.8em;
        border-top:1px solid #666;
    }
    footer nav{
        margin-left:auto;
        margin-right:auto;
        max-width:870px;
        min-width:280px;
        padding-left:10px;
        padding-right:10px;
    }
    footer nav ul{
        margin:0.5em;
    }
    footer nav li{
        margin-left:2em;
    }
    footer nav a{
        color:#666;
        text-decoration:none;
    }



    .box>*{
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        border-bottom: 1px solid #eee;
        margin-top:0;
        padding-top:0.25em;
        padding-bottom:0.25em;
        display:block;
    }
    .box>*:first-child{
        border-top:1px solid #eee;
        margin-top:1em;
    }
    .box>*{
        background:transparent url(/img/internal-link.svg) no-repeat left 0.25em;
        background-size: 1.663em 1.663em;
        padding-left:2.013em;
        min-height:2.263em;
    }
    a.download{
        display:inline-block;
        background-position:left 0.20em;
        background-repeat:no-repeat;
        background-size: 1.114em 1.114em;
        padding-left:1.513em;
    }
    .box>a{
        background-image: url(/img/internal-link.svg);
        text-decoration:none;
    }

    .box>a[rel="external"]{
        background-image: url(/img/external-link.svg);
    }
    .box>a[href^="/download/"],
    .box>a[href^="/privat/download/"],
    .box>a.download,
    a.download{
        background-image: url(/img/download-link.svg);
    }
    main .box>a[href^="mailto:"]{
        background-image: url(/img/mail.svg);
    }
    main .box>a[href^="tel:"]{
        background-image: url(/img/phone.svg);
    }
    main .box>a[href^="tel:"].fax{
        background-image: url(/img/fax.svg);
    }
    main .box>time{
        background-image: url(/img/date.svg);
    }
    main{
        margin-top:3em;
    }
    main *+article,
    main *+div:not(.ulist),
    main *+h1,
    main *+h2,
    main *+*.space{
        margin-top:5em;
    }
    main .ulist {
        margin-top: 1.5em;
    }
    main .box+h1,
    main .box+h2,
    main .box-aside p+h2{
        margin-top:3em;
    }
    main #search-result-list{
        margin-top:3em;
    }
    main #search-result-list *+*{
        margin-top:1em;
    }
    main #search-result-list li{
        padding:1.5em;
        margin:0;
        border-bottom:1px solid #ccc;
    }


    main *+p,
    main *+.box{
        margin-top:2em;
    }

    main li+li{
        margin-top:1.0em;
    }
    main h1+*{
        margin-top:3em;
    }
    main h1+h2{
        margin-top:2em;
    }
    main h2+*{
        margin-top:2em;
    }

    .flyer{
        max-width:21em;
        text-align: center;
        margin-left:auto;
        margin-right:auto;
    }

    .decor-anchor:before{
        content:'';
        display:block;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size:cover;
        float:none;
        width:100%;
        padding-top:35%;
        margin-left:0;
        margin-bottom:2em;
    }
    .copyright{
        font-size:0.8em;
        color:#666;
        margin-top:5em;
        clear:both;
    }

}

@media screen and (min-width: 400px){
    footer{
        font-size:inherit;
    }

    main p{
        text-align: justify;
    }

    header nav{
        background-color:transparent;
        color:#777;
        margin-top:0.5em;
    }
    header nav li{
        display:inline-block;
    }
    header nav li a{
        padding-left:1em;
        padding-right:1em;
    }
    header nav li:first-child a{
        padding-left:10px;
    }
}
@media screen and (min-width: 500px){
    body {
        font-size:1.05em;
    }
    #logo{
        font-size:3.8em;
    }
    header nav{
        margin-top:1.0em;
    }
}
@media all{
    .decor-anchor.start:before{
        background-image:url(/images/familie-bg-2.jpg);
        background-position:top right;
    }
    .decor-anchor.traeger:before{
        background-image:url(/images/traeger-bg.jpg);
    }
    .decor-anchor.christoph:before{
        background-image:url(/images/christoph-wuestenhagen.jpg);
        background-size:contain;
    }
    .decor-anchor.heike:before{
        background-image:url(/images/heike.jpg);
        background-size:contain;
    }
    .decor-anchor.kran:before{
        content:none;
        background-image:url(/images/kran.jpg);
    }
    .decor-anchor.kontakt:before{
        content:none;
        background-image:url(/images/kontakt.jpg.v1);
    }
    .decor-anchor.garten-vierbeiner:before{
        background-image:url(/images/garten-vierbeiner-pano.jpg);
    }
    .decor-anchor.kultur:before{
        background-image:url(/images/kultur-die-qsinen.jpg);
        background-position:50% 35%;
    }
    main div.imageblock {
        max-width: 100%;
        margin-top: 2.25em;
    }
    main .imageblock img {
        display: block;
        width: 100%;
        aspect-ratio: 2.5;
        object-fit: cover;
        object-position: top center;
    }
    main .imageblock.contain img {
        object-fit:contain;
    }

    main .imageblock.s-hide {
        display: none;
    }
}
@media screen and (min-width: 600px){
    #ueber_uns article>*{
        margin-right:350px;
    }
    #ueber_uns .decor-anchor{
        margin-right:0;
    }
    .decor-anchor:before{
        background-repeat: no-repeat;
        background-position: 50% top;
        background-size:contain;
        clear:right;
        float:right;
        width:300px;
        margin-left:50px;
        margin-bottom:50px;
        padding-top:0;
    }

    .box-aside{
        float:right;
        width:300px;
        padding:25px;
        margin:25px;
        margin-right:0;
        border:1px solid #ddd;
        box-shadow:0 0 5px rgba(0,0,0,0.1);
    }
    .box-aside+*{
        margin-top:25px;
    }
    .decor-anchor.kran:before{
        content:'';
        height:400px;
    }
    .decor-anchor.kontakt:before{
        content:'';
        height:253px;
        border:1px solid #eee;
    }
    .box{
        overflow:auto;
    }

    .decor-anchor.christoph:before,
    .decor-anchor.heike:before{
        height:254px;
    }

    .decor-anchor.garten-vierbeiner:before{
        background-image:url(/images/garten-vierbeiner.jpg);
        height:469px;
    }

    .decor-anchor.garten-vierbeiner~.box{
        content:'';
        overflow:auto;
    }
    .decor-anchor.traeger:before{
        height:190px;
    }
    .decor-anchor.kultur:before{
        height:203px;
        background-position:50% 50%;
    }
    .decor-anchor.start:before{
        content:none;
        height:0;
        width:0;
        margin:0;
    }
    article.start{
        background: transparent url(/images/familie-bg-2.jpg) no-repeat right 5.25em;
        background-size:300px auto;
        padding-right:350px;
    }

    #ueber_uns{

    }

    main div.imageblock {
        max-width: 300px;
        float: right;
        clear: right;
        margin-left: 50px;
        margin-bottom: 25px;
        margin-top: 0;
    }
    main .imageblock img {
        display: block;
        aspect-ratio: initial;
        object-fit: initial;
        object-position: initial;
    }

    main .imageblock.s-hide {
        display: block;
    }
}

@media print{
    html,body{
        height:auto;
        width:auto;
        overflow:visible;
    }

    a[href^="http://"]:after,
    a[href^="https://"]:after,
    a[href^="/"]:not([href*="#"]):after{
        font-size:0.5em;
        content: " " attr(href);
        color:#666;
        font-style: italic;
        display:block;
    }
    a[href^="/"]:not([href*="#"]):after{
        content: ' http://www.familien-kind.de' attr(href);
    }
}