:root {
    --primary-9: #FFFFFF;
    --primary-8: #E1F5FE;
    --primary-7: #81D4FA;
    --primary-6: #29B6F6;
    --primary-5: #0077AA;
    --primary-4: #005599;
    --primary-3: #334488;
    --primary-2: #113377;
    --primary-1: #002211;
    --primary-0: #911;
    /*
    
    --primary-bright:#FFF;
    --primary-lightest:#DEF;
    --primary-light:#9CF;
    --primary: #069;
    --primary-4: #036;
    --primary-4est: #033;
    --primary-complement:#911; 
    
    #7a49a5
    #4974a5
    #8B00A1
    #A18B00
    #e2fcd6 #ccecee
    #ed1b24 
    
    #E1BEE7 #CE93D8 #AB47BC #9C27B0 #7B1FA2
    #B3E5FC #81D4FA #4FC3F7 #29B6F6 
                            #4FC3F7 #29B6F6
    #E1F5FE #B3E5FC #81D4FA #4DD0E1 #26C6DA #00BCD4 #4B9B6E #2E7D5C #1B5E3A 
    #A8D5BA #6BBF8A 
    #CFD8DC #B0BEC5 #90A4AE #78909C #607D8B
    #F5F5F5 #E0E0E0 #BDBDBD #9E9E9E #757575
    #FFFFFF #F0F0F0 #E0E0E0 #D0D0D0 #C0C0C0
    #D7CCC8 #BCAAA4 #A1887F #8D6E63 #795548
    #FFF9C4 #FFF59D #FFF176 #FFEE58 #FDD835
    #FFE0B2 #FFCC80 #FFB74D #FFA726 #FF9800
    #FFCDC2 #EF9A9A #E57373 #EF5350 #F44336
            #F48FB1 #F06292 #EC407A #D81B60
    #FCE4EC #F8BBD0 #F48FB1 #F06292 #EC407A
    
    
    */
}

html {
    scroll-behavior: smooth;
}

body, input, select, button, textarea {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
}

body {
    margin: 0;
    padding: 0 0 100px 0;
    background-color: #f4f4f4;
    color: var(--primary-2);
    scroll-behavior: smooth;
    line-height: 1.2;
}
header {
    background-color: var(--primary-5);
    background-image: url(/ui/header.png);
    color: white;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    padding: 100px 0 20px 0;
}
main {
    width: 80%;
    margin: auto;
    padding: 20px;
    text-align: center;
}

.layout-columns, .infobar{
    display: flex;
    justify-content: space-between;
    gap: 4vw;
}

.infobar{
    color: var(--primary-4) !important;
    vertical-align: middle;
}
.infobar > span, .infobar > div, .infobar > p, .infobar > a, .infobar > a:link{
    color: inherit;
    text-decoration: none !important;
    padding: 0 1ex;
    display: inline-block;
    vertical-align: middle;
}
footer .infobar{
    color: var(--primary-9) !important;
}
footer .infobar img{
    filter: brightness(0) invert(1);
    height: 24px !important;
    vertical-align: middle;
}
footer .infobar a:hover img{
    filter: none;
}
main > .infobar{
    padding: 15px;
}


section[id]::before,h3[id]::before {
    content: '';
    display: block;
    height:      120px;
    margin-top: -120px;
    visibility: hidden;
}
#kontakt, #praxis, #anfahrt, #impressum {
    background-color: #E0E0E0;
    padding: 20px;
    margin-top: 20px;
}
footer {
    background-color: var(--primary-5);
    color: white;
    text-align: center;
    padding: 5px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--primary-8);
    padding: 10px 0;
    text-align: center;
    z-index: 1000;
    border-bottom: 1px solid var(--primary-5);
}
nav a{
    color: var(--primary-5) !important;
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
}
h2 {
    display: block;
    font-size: 120%;
    font-weight: normal;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    font-stretch: expanded;
}
h3{
    display: block;
    font-size: 105%;
    margin: 0;
    padding: 1em 0 0 0;
}
section p{
    text-align: left;
    margin: 1em 0;
}
.center{
    text-align: center;
}

.buttonbar {
    padding-top:5px;
    margin-top: 5px;
}

.buttonbar button {
    padding: 5px 20px;
}

#cookie-consent{
    display: none;
}

#cookie-consent a{
color: var(--primary-9);
}

.cookie-consent #cookie-consent{
    display: inline-block;
    width: 25%;
    border: 1px solid var(--primary-4);
    position: absolute;
    bottom: 40px;
    right: 20px;
    background: var(--primary-5);
    color: var(--primary-9);
    padding: 15px;
    border-radius: 4px;
    box-shadow: 2px 4px rgba(0, 0, 0, .3);
}

#logo{
    width: 30%;
    max-width: 500px;
}

#location{
    height:300px;
    width: 300px;
    background-image: linear-gradient(var(--primary-6), var(--primary-5)), url('/anfahrt.png');
    background-size: 1100px;
    background-position: center; 
    border-radius: 50%;
    display: inline-block;
    background-blend-mode: color;
    margin: 1em auto;
}

li { list-style-type: none; padding-bottom: 1ex;}

#location::active{
    width: 600px;
    height: 300px;
}

em a:before{
    display: inline-block;
    content: "➤ ";
    color: var(--primary-5);
    font-style: normal;
}




#faq dl, #faq dt, #faq dd{
    padding: 0;
    margin: 0;
}
#faq dl {
    max-width: 800px;
    margin: 15px auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#faq dt {
    width: 100%;
    text-align: left;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#faq dd + #faq dt {
    border-top: 1px solid #ddd;
} 
#faq dd {
    display: none;
    padding: 15px;
    font-size: 16px;
    background: #f1f1f1;
    border-radius: 5px;
    text-align: left;
}
#faq dt:after {
    content: "\002B";
    font-size: 22px;
}
#faq dt.open:after {
    content: "\2212";
}
#faq dt.open + dd {
    display: block;
}





@media only screen and (max-width: 600px) {
    body {
        font-size: 1.2rem;
    }
}