
#hero h1 {
    color: var(--darker-blue);
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 4rem);
    line-height: 1em;
    margin-bottom: 4%;
}
#hero .btn-primary {
    display: block;
    margin: 0 auto 3em auto;
    padding: 0.8em 2em;
}
#hero img {
    width: 100%;
}

.frame-type-header {
    width: 50%;
    display: block;
    margin: 0 auto;
}

/*------------------------------------------------- */
/* SUBPAGE
/*------------------------------------------------- */
.subpage #hero { padding-top: 2em; }
.subpage #hero img { width: 100%; margin: 0; }
.subpage #hero p, .subpage #hero h1  { 
    width: 80%;
    margin: 0 auto 1em auto;
 }
.subpage #hero .breadcrumb { margin-bottom: 5em; color: var(--darker-blue); }
.subpage .breadcrumb-item.active { color: var(--dark-blue); }

#intro header p { margin: 0;}
#intro h2 {  font-size: clamp(1.25rem,3vw,2.5rem); margin-bottom: 1em;}
#intro p, #intro h2, #intro h4, #intro .h3 { text-align: left; width: initial; }
#intro p {color: var(--mid-gray);}
#stark .frame-type-shortcut { text-align: center;}
.subpage #services img { display: block; margin: 0 auto; border-radius: 20px;}
.subpage #services .e-elementColumns1 { display: flex; align-items: center;}
.subpage #services .frame-type-textmedia header { width: 80%; margin-bottom: 1em;}
.subpage #services .btn { margin-top: 2em;}
.subpage #stark {background-color: var(--blue-light);}

.subpage #stark .textmedia-images img { width: initial; margin: 0 auto; }

.image-over-text {
    box-shadow: 0px 3px 7px 2px rgba(0,0,0,0.1);
    border-radius: 20px 20px 0 0 ;
}

.image-over-text p { 
    width: initial;
    text-align: left;
}
.image-over-text img { border-radius: 20px 20px 0 0 ;}
.image-over-text-caption h4 { color: var(--darker-blue);}
.image-over-text-caption { padding: 1.5em; min-height: 300px; background: var(--white);}
#stark .bodytext {min-height: 100px;}
#stark .bodytext p {
    width: initial;
    text-align: left;
    margin-top: 1em;
}
#stark .frame-type-custom_textmedia img {
    width: 30% !important;
}
#stark .image-over-text .textmedia-images img {
    width: initial !important;
}

.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-block;
    text-align: center;
    margin-bottom: 5em;
}
.tabs li{
    display: inline-block;
    margin:0;
    padding: 7px 38px;
    cursor: pointer;
    font-size:1.2em;
    line-height:2em;
    color: var(--darker-blue);
    border: 1px solid var(--gray);
    border-radius: 8px; 
}
.tabs li:hover { background: var(--darker-blue); color: var(--white); }
.tabs li.current{ background: var(--dark-blue); color: var(--white); }
.tab-content{ display: none; line-height:1.4; }
.tab-content.current { display: inherit; padding: 0; }
#animation-228 .frame-type-custom_textmedia, 
#animation-228 .frame-type-textmedia ,
#animation-233 .frame-type-custom_textmedia,
#animation-233 .frame-type-textmedia { 
    width: 70%; 
    text-align: left; 
    margin: 0 auto 5% auto;
}
.tab-content p, .tab-content header { width: initial; text-align: left;}
.tab-content h3 { color: var(--darker-blue);}
.tab-content img { margin-bottom: .5em;}
.textmedia-images {
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

#tab .tabs .frame-type-custom_textmedia img {
    width: 15%;
}

.subpage .swiper-wrapper p { text-align: left;}
.subpage-standard #content h1 { 
    text-align: center;
    color: var(--darker-blue);
    margin-bottom: 1em;
    text-transform: none;
}

.subpage p {
    width: initial;
}

/* DEMO Version */
.subpage-standard .frame-type-textmedia.frame-layout-1.frame-primary-color {
    background: var(--dark-blue);
    padding: 5%;
    border-radius: 20px;
    max-width: 350px;
    margin: 0 auto;
}
.subpage-standard .frame-type-textmedia.frame-layout-1.frame-primary-color h2,
.subpage-standard .frame-type-textmedia.frame-layout-1.frame-primary-color p,
.subpage-standard .frame-type-textmedia.frame-layout-1.frame-primary-color a  {
    color: var(--white);
    text-decoration: none;
}
.subpage-standard .frame-type-textmedia.frame-layout-1.frame-primary-color .btn-primary {
    padding: .8em 2em;
    display: block;
    margin-top: 2em;
}
.subpage-standard .frame-type-textmedia.frame-layout-1.frame-primary-color a:hover .btn-primary {
    background: var(--white);
    color: var(--dark-blue);
}

.subpage-standard #c726 p {
    max-width: 55%;
    text-align: center;
    margin: 0 auto;
}


/* IMPRESSUM + DATENSCHUTZ */
.subpage-standard .section-footer p,
.subpage-standard .section-footer h1,
.subpage-standard .section-footer h2,
.subpage-standard .section-footer h3,
.subpage-standard .section-footer h4 {
    width: initial;
    text-align: left;
}

@media(max-width: 592px) {
   #kontakt-button { display: none;}
}

@media(max-width: 767px) {
    .subpage #services .frame-type-textmedia p { margin-bottom: 1.5em; width: 100%;}
    .subpage #services img { margin: 2em auto; }
    #stark .frame-type-shortcut { text-align: center;}
    .subpage #stark .text-center { width: initial; margin-top: 1em; }
    .tabs { margin-bottom: 3em; }
    .tabs li { padding: 5px 18px; font-size: 1.1em; }
    .subpage-standard #content h1 { font-size: 1.4em; }
}

@media(max-width: 768px) {
    #hero header, #hero img { width: 100%;}
    #hero p { width: 80%;}
    #hero h1 { margin-bottom: 0%; }

    .subpage { overflow: hidden;}
    .subpage #hero .breadcrumb { margin-bottom: 2em;}
    .subpage #intro img { margin-bottom: 2em;}
    .textmedia-images { flex-wrap: wrap; }
    .subpage-standard p { width: initial;}
    .subpage-standard #content .basic-colored {width: 100%;}
}

@media(min-width: 768px) and (max-width: 1023px) {
    #hero header, #hero img { width: 100%;}
    #hero p { width: 80%;}
    #hero h1 { margin-bottom: 0%; }
}
@media(min-width: 1024px) and (max-width: 1128px){
    .tabs { margin-bottom: 3em; }
}
@media(min-width: 2000px) {
    .subpage .swiper-wrapper { margin-left: 20%; }
}
