@charset "utf-8";

a:active,a:focus
{
    outline:none
}

html
{
    overflow-y:scroll
}

img
{
    border:none;
    max-width:100%;
    height:auto
}
 
i,em
{
    font-size:90%
}
 
.clear
{
    clear:both
}
 
h1,h2,h3,h4,h5
{
    text-align:left;
    hyphens:none;
    -webkit-hyphens:none;
    -moz-hyphens:none;
    -ms-hyphens:none;
}

.black
{
    color:#000;
}
  
body
{
    font-size:1em;
    overflow-x:hidden;
    width:100%;
    color:#333;
    text-align:left;
    font-family:'Open Sans','sans-serif'
}
   
.container
{
    max-width:990px;
    margin:0 auto;
    background-color:#fff
}
   
header
{
    float:left;
    width:100%;
    background:url(images/background.jpg) center right no-repeat;
    background-size:cover;
    height:160px
}
   
header h1
{
    margin:6.4em 0 0;
    padding:.1em 0 .2em .5em;
    color:#fff;
    background-color:#0099CC;
    text-align:center;
    font-size:150%;
    text-shadow:2px 2px 2px rgba(0,0,0,0.5);
    -webkit-text-shadow:2px 2px 2px rgba(0,0,0,0.9);
    -moz-text-shadow:2px 2px 2px rgba(0,0,0,0.9);
    box-shadow:0 -3px 5px 0 rgba(51,51,51,0.4);
    -webkit-box-shadow:0 -3px 5px 0 rgba(51,51,51,0.4);
    -moz-box-shadow:0 -3px 5px 0 rgba(51,51,51,0.4)
}
    
.logowrapper
{
    width:100%;
    float:left
}

.logo
{
    width:300px;
    float:left;
    height:60px;
    margin:.3em 0 0 .5em;
    background:url(images/aurea-logo.png) left center no-repeat;
    background-size:contain;
    padding:.3em;
    background-color:rgba(255,255,255,0.7);
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px
}

header span
{
    float:left;
    font-weight:700;
    font-size:110%;
    margin:.3em;
    padding:.5em;
    color:#0099CC;
    background-color:rgba(255,255,255,0.8);
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px
}

a
{
    color:#0099CC;
    text-decoration:none
}

a:hover
{
    text-decoration:underline
}

.linkblue
{
    color:#09F;
    text-decoration:underline
}

.beitrags_button
{
    width:75%;
    text-align:center;
    margin:5em auto 2.5em;
    clear:left;
    hyphens:none;
    -webkit-hyphens:none;
    -moz-hyphens:none;
    -ms-hyphens:none
}

.beitrags_button a
{
    font-weight:700;
    color:#fff;
    display:block;
    padding:1em;
    text-transform:uppercase;
    background:#0099CC;
    border:2px solid #333;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:2px 2px 2px 0 rgba(51,51,51,0.5);
    -webkit-box-shadow:2px 2px 2px 0 rgba(51,51,51,0.5);
    -moz-box-shadow:2px 2px 2px 0 rgba(51,51,51,0.5)
}

.beitrags_button a:hover
{
    text-decoration:none
}

.beitragslink
{
    text-align:center;
    width:100%
}

.beitragslink a
{
    color:#09F;
    font-weight:700
}

#beitragsrechner
{
    width:100%;
    text-align:center;
    margin:0 auto 2em
}

#bdate
{
    margin:2em 0;
    padding:.1em .5em;
    font-weight:700;
    color:#000;
    background:rgba(150,150,150,0.15);
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}

#tag
{
    margin-left:.5em
}

#tag,#monat
{
    width:2em;
    text-align:center;
    margin-top:1em
}

#jahr
{
    width:4em;
    text-align:center;
    margin-top:1em
}

#submit
{
    color:#fff;
    padding:.5em;
    margin:1em;
    background:#0099CC;
    border:1px solid #333;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px
}

.angebote
{
    width:100%;
    display:block;
    margin:2em 0;
    text-align:left
}

.angebote ul
{
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
    border:1px solid #ccc;
    /*background:rgba(115,150,0,0.2);*/
    background: rgba(92, 218, 239, 0.1);
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-shadow:2px 2px 5px 0 rgba(102,102,102,0.35);
    -webkit-box-shadow:0 0 9px 5px rgba(102,102,102,0.63);
    -moz-box-shadow:0 0 9px 5px rgba(102,102,102,0.63);
    hyphens:none;
    -webkit-hyphens:none;
    -moz-hyphens:none;
    -ms-hyphens:none
}

.angebote ul li
{
    border-top:1px solid rgba(51,51,51,0.2);
    padding:1em .5em
}

.angebote ul li:first-child
{
    border-top:none
}

.aname
{
    background:#0099CC;
    color:#fff;
    font-weight:700;
    font-size:120%
}

.beitrag
{
    font-weight:700;
    color:#000;
    font-size:110%
}

.onlabsch a
{
    background:#0099CC;
    color:#fff;
    font-weight:700;
    padding:1.5em;
    line-height:5em;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px
}

.tarifdetails a
{
    color:#09F;
    font-size:90%
}

.angebote span
{
    font-size:70%;
    vertical-align:super;
    font-weight:400
}

.green:first-line
{
    color:#0099CC;
    font-weight:700
}

section
{
    width:100%;
    float:left;
    text-align:justify;
    padding:0 1.5em;
    margin:0;
    hyphens:auto;
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    -ms-hyphens:auto;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}

section h1,h2
{
    font-size:150%;
    color:#069;
    text-align:center;
    margin:.4em .5em .3em;
    padding:0
}

section h2
{
    margin-top:1em
}

section h3
{
    color:#0099CC
}

#gesregel
{
    width:100%;
    float:left;
    margin:8em 0 0
}

footer
{
    width:100%;
    float:left;
    font-size:95%;
    text-align:center;
    padding:1em 1.5em;
    background:rgba(150,150,150,0.15);
    margin:2em auto 0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}

footer a
{
    display:block;
    padding:.5em .4em
}

.stern
{
    font-size:80%;
    font-style:italic
}

#contactDiv
{
    width:100%;
    float:left;
    text-align:left
}

#contactform
{
    margin:0;
    padding:.1em 1em;
    font-weight:700;
    color:#000;
    background:rgba(150,150,150,0.15);
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}

.hcontact
{
    background:#0099CC;
    padding:.8em .5em;
    margin:2em -1em 1em;
    text-align:left
}

label
{
    display:block;
    text-align:left
}

label span
{
    color:red;
    font-size:small
}

small
{
    font-weight:400;
    font-style:italic
}

#ANREDE,#NAME,#GEBURTSTAG_TAG,#GEBURTSTAG_MONAT,#GEBURTSTAG_JAHR,#STAAT,#BERUFSTATUS,#KKASSE,#BEGIN_TAG,#BEGIN_MONAT,#BEGIN_JAHR,#ZAHN_VN,#LEBENSP,#KINDER,#NAMELP,#LP_TAG,#LP_MONAT,#LP_JAHR,#ZAHN_LP,#NAMEK1,#K1_TAG,#K1_MONAT,#K1_JAHR,#ZAHN_K1,#NAMEK2,#K2_TAG,#K2_MONAT,#K2_JAHR,#ZAHN_K2,#STRASSE,#ORT,#TELEFON,#MAIL,#NACHRICHT,#ANT_MAIL,#ANT_TEL
{
    background:#fff!important;
    text-align:left;
    margin-top:.2em
}

#NAME,#STAAT,#KKASSE,#NAMELP,#NAMEK1,#NAMEK2,#NAMEK3,#STRASSE,#ORT,#TELEFON,#MAIL,#NACHRICHT
{
    width:95%;
    padding-left:.5em
}

.tarif4,.tarif3,.tarif2
{
    margin-left:.3em;
    margin-right:.7em
}

.tarif1
{
    margin-left:.3em
}

.contactbutton
{
    display:block;
    text-align:center
}

.contactbutton a
{
    background:#0099CC;
    color:#fff;
    font-weight:700;
    padding:1.5em 2em;
    line-height:5em;
    hyphens:none;
    -webkit-hyphens:none;
    -moz-hyphens:none;
    -ms-hyphens:none;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px
}

@media screen and (min-width : 320px)
{
    img
    {
        display:block;
        margin:0 auto
    }
    
    footer a
    {
        display:inline-block;
        border-right:1px solid #ccc
    }

    #videoAxa
    {
        width:100%;
        border: 1px solid black;
    }
}

@media screen and (min-width : 479px)
{
    .contactbutton
    {
        display:inline-block;
        text-align:center;
        margin:1em 0
    }
    
    .contactbutton a
    {
        padding:1.5em
    }
    
    #NAME,#STAAT,#KKASSE,#NAMELP,#NAMEK1,#NAMEK2,#NAMEK3,#STRASSE,#ORT,#TELEFON,#MAIL,#NACHRICHT
    {
        width:21.5em
    }
}

@media screen and (min-width : 505px)
{
    .cbutton span:first-child
    {
        margin-right:1em
    }
}

@media screen and (min-width : 545px)
{
    header h1
    {
        text-align:left
    }
    
    .beitrags_button
    {
        width:20em
    }
}

@media screen and (min-width : 600px)
{
    header
    {
        background:url(images/background.jpg) center right no-repeat;
        height:200px
    }
    
    header h1
    {
        margin:7.8em 0 0;
        padding:.2em 0 .3em .5em;
        text-align:left
    }
    
    header span
    {
        margin:0 0 0 1em;
        padding:.8em;
        clear:left
    }
    
    .logo
    {
        float:left;
        display:block;
        width:380px;
        height:76px;
        background:url(images/aurea-logo.png) center left no-repeat;
        margin:.5em 0 .5em .5em;
        padding:.2em;
        background-color:rgba(255,255,255,0.8);
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px
    }
    
    .beitrags_button
    {
        clear:both;
        margin:5em auto 2.5em
    }
    
    section h1,h2
    {
        text-align:left;
        margin:1em 0;
        text-shadow:1px 1px 1px rgba(55,150,152,0.4)
    }
    
    img
    {
        display:inline-block;
        float:left;
        margin:0 1em 0 0;
        padding-bottom:.3em
    }
    
    .beitragslink
    {
        clear:left;
        margin:1em 0 2em;
        text-align:right
    }
    
    .green2
    {
        color:#0099CC;
        font-weight:700;
        height: 157px;
    }
}

@media screen and (min-width : 693px)
{
    #videoAxa
    {
        width: 640px;
        border: 1px solid black;
    }
}

@media screen and (min-width : 808px)
{
    .angebote
    {
        width:45%;
        margin:1em .5em;
        vertical-align:top;
        display:inline-block
    }
    
    .angebote:last-child
    {
        margin:1em 0 1em .5em
    }
}

@media screen and (min-width : 873px)
{

    .angebote
    {
        width:45%;
        margin:1em .5em;
        vertical-align:top;
        display:inline-block
    }

    #bdate br
    {
        display:none
    }
    
    label
    {
        display:inline-block
    }
    
    label.txt
    {
        width:13em
    }
    
    .tarif1,.tarif2,.tarif3,.tarif4
    {
        vertical-align:middle
    }
    
    #BEGIN_TAG,#ZAHN_VN,#LEBENSP,#KINDER,#ZAHN_LP,#ZAHN_K1,#ZAHN_K2
    {
        margin-left:.5em
    }
    
    #NACHRICHT
    {
        width:34.8em
    }
}

@media screen and (min-width : 1109px)
{
    body
    {
        background:#D3D3D3
    }
    
    header
    {
        border:.6em solid #fff;
        border-bottom:none;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box
    }
    
    .container
    {
        max-width:1200px;
        margin:0 auto;
        background-color:#fff
    }
    
    header span a[href^="tel"]
    {
        pointer-events:none;
        cursor:default
    }
    
    .container
    {
        margin:20px auto 8em;
        border:1px solid #ccc;
        box-shadow:0 0 5px #666;
        -moz-box-shadow:0 0 5px #666;
        -webkit-box-shadow:0 0 5px #666
    }
    
    .beitrags_button a:hover
    {
        opacity:.95;
        border:2px solid #fff
    }
    
    #submit:hover
    {
        opacity:.95;
        border:1px solid #fff
    }
    
    .onlabsch a:hover
    {
        /*background:rgba(115,150,0,0.8)*/
        background: rgba(0, 153, 204, 0.8)
    }

    .angebote
    {
        width:30%;
        /*display:block;*/
        margin:1em 1.2em 1em 0;
        text-align:left
    }

    .angebote span
    {
        font-size:70%;
        vertical-align:super;
        font-weight:400
    }

    .aname
    {
        background:#0099CC;
        color:#fff;
        font-weight:700;
        font-size:110%
    }
    
    .green2
    {
        color:#0099CC;
        font-weight:700;
        height: 120px;
    }
    
    .angebote:last-child
    {
        margin:1em 1.2em 1em 0
    }
}

@media screen and (min-width : 1150px)
{
    #beitragsrechner
    {
        width:100%;
        text-align:center;
        margin:43px auto 2em
    }
}