/*
Theme Name: mischa
Theme URI: https://www.intermedia-werbeagentur.de
Author: Intermedia Peters GmbH | Werbeagentur
Author URI: https://www.intermedia-werbeagentur.de
Description: WordPress-Theme mit lokalem Bootstrap 5.3.7 und Font Awesome 6.7.2
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mischa
*/

html { background-color: #eaeced;}
body {max-width: 1900px; margin: 0 auto; background-color: #fff;}
#menutoggle {display: none;}
#headrow {background-color: #c01825; color: #fff; padding: 12px 0px;}
#headrow p {margin: 0px !important; padding: 0px !important; }
#headrow a {color: #fff; text-decoration: none;transition: color 0.3s ease, text-decoration 0.3s;}
#headrow a:hover,#headrow a:focus {color: #ffd5d8;text-decoration: underline;}
.img-logo {transition: all 0.5s ease;}
.img-logo:hover {opacity: 0.8}
.head-contact {display: flex; justify-content: flex-end; padding: 0px; margin: 0px; list-style: none; gap:32px;}
.pr-3 {margin-right: 12px;}
.head-contact li:first-child::before {font-family: "Font Awesome 6 Free";content: "\f095";font-weight: 900;margin-right: 8px;}
.head-contact li:last-child::before {font-family: "Font Awesome 6 Free";content: "\f0e0";font-weight: 900;margin-right: 8px;}
header {background-color: #fff; padding: 24px 0px;}
#main-menu {margin: 0px; padding: 0px; list-style: none; display: flex; justify-content: flex-end; font-size: 18px; height: 80px; align-items: center; gap:16px;}
#main-menu li a {display: block; padding: 12px 32px; background-color: #fff; color: #353535; border-radius: 8px; text-decoration: none; transition: all .5s ease; font-weight: bold; }
#main-menu li a:hover, #main-menu li a:focus, #main-menu li.current-menu-item a {color: #fff;background-color: #c01825;}
footer {background-image: url("assets/img/footer.png"); background-position: center center; background-size: cover; background-repeat: no-repeat; color: #fff; padding: 32px 0px;}
footer a {color: #fff; text-decoration: none;transition: color 0.3s ease, text-decoration 0.3s;}
footer a:hover, footer a:focus {text-decoration: underline; color: #eaeaea;}
#foot-menu { margin: 0px; padding: 0px; list-style: none; display: flex; justify-content: flex-end;}
#foot-menu li:after {content: '|'; padding: 0px 8px;}
#foot-menu li:last-child:after {content: none; padding: 0px 0px;}
section.header {width: 100%; height: 520px; display: flex; justify-content: center; align-items: flex-start; background-image: url("assets/img/start-head-bg.jpg"); background-position: top center; background-repeat: no-repeat;}
section.header h1, section.header h2 {color: #fff; background-color: #353535; font-size: 30px; font-weight: 700; margin: 0px; padding: 8px 16px; display: inline-block;}
section.header h1 {margin-bottom: 8px;animation: slideFadeInLeft 1s ease-out 0.3s forwards;}
section.header h2 {margin-bottom: 24px;animation: slideFadeInLeft 1s ease-out 0.6s forwards;}
section.header p { font-size: 18px; color: #353535; line-height: 36px; animation: fadeInUp 1.2s ease-out 1s forwards;}
.header h1, .header h2, .header p {opacity: 0;transform: translateY(30px);animation-fill-mode: forwards;}
@keyframes slideFadeInLeft {from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInUp {from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.main{padding:64px 0}
.page-head{opacity: 0;display:flex;align-items:center;justify-content:center;position:relative;margin:0;font-size:30px;font-weight:700;color:#333;font-family:sans-serif;text-transform:uppercase;letter-spacing:.5px; animation: fadeInUp 1.2s ease-out 1.6s forwards;}
.page-head span{padding:0 30px;position:relative;z-index:1;background:#fff}
.page-head::before,.page-head::after{content:"";flex:1;height:1px;background-color:#c01825;margin:0 10px}
.box {opacity: 0;border-radius: 6px; background-color: #eaeced; height: 100%;animation: fadeInUp 1.2s ease-out 2s forwards;}
.box p {padding: 24px; font-size: 18px;line-height: 36px;}
.box h3 {text-transform: uppercase; margin: 0px; font-weight: 700; font-size: 20px; padding: 24px 0px; text-align: center; min-height: 96px;}
.box-img {width: 100%; height: 194px; overflow: hidden; }
.box-img img {transition: all .7s ease;}
.fif {opacity: 0;animation: fadeInUp 1.2s ease-out .75s forwards;}
.fis {opacity: 0;animation: fadeInUp 1.2s ease-out 2s forwards;}
.box-img:hover img {transform: scale(1.15); opacity: .9}
.red-section {background-image: url("assets/img/red-section.jpg");background-position: top center; background-repeat: no-repeat; background-size: cover; color: #fff; padding: 64px 0px;font-size: 18px;line-height: 36px;}
.red-section h2 {color: #fff; font-weight: 700;font-size: 30px;}
ul.checklist {margin: 0px; padding: 0px; list-style: none;font-size: 18px;line-height: 36px;}
ul.checklist li {padding-left: 40px; position: relative;}
ul.checklist li:before {content: url("assets/img/m-li.png"); position: relative; margin-left: -40px; margin-right: 20px;}
.white-bg {font-size: 18px;line-height: 36px; padding: 64px 0px;}
.white-bg h2, .white-bg h1 {font-size: 30px; font-weight: 700; color: #c01825;}
.row.align-end {display: flex;align-items: flex-end;}
.btn-primary {background-color: #c01825; border-color: #c01825; padding: 16px 32px; transition: all .75s ease; font-size: 18px;}
.btn-primary:hover, .btn-primary:focus { background-color: #8c0000; border-color: #8c0000;}
.text-primary {color: #c01825 !important;}
main a {color: #c01825; transition: all .75s ease;}
main a:hover, main a:focus {color: #8c0000; text-decoration: underline}
.wpcf7-form-control{width:100%;padding:.75rem 1rem;font-size:1rem;font-family:inherit;border:1px solid #ced4da;border-radius:.375rem;background-color:#fff;transition:border-color .3s ease,box-shadow .3s ease;box-sizing:border-box}
.wpcf7-form-control:focus{outline:none;border-color:#c01825;}
.wpcf7-form-control.wpcf7-textarea{min-height:150px;resize:vertical}
.wpcf7-not-valid{border-color:#dc3545;background-color:#fff0f0}
.wpcf7-response-output{margin-top:1rem;font-size:.95rem;padding:1rem;border:1px solid transparent;border-radius:.375rem}
.wpcf7-validation-errors{color:#dc3545;border-color:#dc3545;background-color:#f8d7da}
.wpcf7-mail-sent-ok{color:#198754;border-color:#198754;background-color:#d1e7dd}
.wpcf7-submit{background-color:#c01825;color:#fff;padding:.75rem 1.25rem;font-size:1rem;border:none;border-radius:.375rem;cursor:pointer;transition:background-color .3s ease}
.wpcf7-submit:hover{background-color:#8c0000}

@media (max-width: 1399px) { 
    /* col-lg */
    #main-menu { gap:8px;}
    #main-menu li a { padding: 12px 24px;}
    section.header h1, section.header h2 { font-size: 24px;}
    .box h3 { font-size: 18px; min-height: 90px;}
}
@media (max-width: 1199px) { 
    /* col-lg */
    #headrow {font-size: 14px;}
    #main-menu { font-size: 16px;}
    section.header h1, section.header h2 {font-size: 20px}
    section.header p {font-size: 16px; line-height: 30px; }

}
@media (max-width: 991px) { 
    /* col-md */
    #headrow .container .row .col-12:first-child {display: none;}
    #headrow .container .row .col-12:last-child {width: 100%;}
    #main-menu { font-size: 14px; gap:0px; height: 42px;}
    #main-menu li a {padding: 8px 16px;}
    main .col-md-4 {width: 100%;}
    .box {margin-bottom: 16px;}
    .box-img img {transition: all .7s ease; width: 100%; height: auto;}
}
@media (max-width: 767px) { 
    /* col-sm */
    #main-menu { justify-content: space-between; font-size: 16px;}
    .header .my-auto {background-color: rgba(255,255,255,0.8); padding: 24px}
    #main-menu {height: auto; padding-top: 16px;}
    footer {text-align: center;}
    #foot-menu {justify-content: center;}
}
@media (max-width: 575px) { 
    /* col */
    #menutoggle {display: block; padding: 8px 16px; background-color: #fff; border: 1px solid #c01825; color: #c01825; margin-top: 16px; cursor: pointer; transition: all .75s ease; border-radius: 8px;}
    #menutoggle.active {background-color: #c01825; color: #fff;}
    #main-menu {display: none;; padding: 16px;}
    #main-menu li, #main-menu li a {display: block; width: 100%;}
    footer .img-logo {max-width: 75%;}

}
@media (max-width: 460px) {
    .page-head {font-size: 20px;}
    .page-head span { padding: 0px;}
    .red-section h2 { font-size: 20px;}
    .white-bg h2, .white-bg h1 { font-size: 20px;}
    #foot-menu {display: block;}
    #foot-menu li, foot-menu li a {display: block; width: 100%;}
    #foot-menu li:after {content: none; padding: 0px;}
    .head-contact li:first-child {display: none;}
    

}
@media (max-width: 350px) { 

}