/*
Theme Name: PvH-Schule
Theme URI: https://example.com
Description: 
Author: molecoadmin
Author URI: https://example.com
Template: agency-base-1.0.0
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pvh-schule
*/

/* 
 * Child Theme Styles
 * 
 * Überschreibe hier Styles des Parent Themes.
 * Nutze CSS-Variablen aus dem Parent Theme für konsistentes Design.
 */

/* Beispiel: Primärfarbe überschreiben */
:root {
    --white: #ffffff;
}

/* Eigene Styles hier hinzufügen */

body{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    background-color: #F7F7F7;
}

h1{
    font-size: 250%;
    font-weight: 800;
    line-height: 1.1;
    margin-top:.5rem;
}
h2{
    font-size: 250%;
    font-weight: 800;
    line-height: 1.1;
    margin:0 0 25px;
}
h3{
    font-size: 150%;
    font-weight: 800;
}

p{
    font-size:100%;
    line-height:1.8;
    font-weight:400;
}
img.aligncenter{
    margin:0 auto;
}

.headline span{
    display:block;
    color:var(--brand-secondary-color);
}

.topline,
.subline{
    font-size:100%;
    font-weight:800;
    text-transform:uppercase;
    color:var(--brand-accent-color);
    margin:0 0 15px 0;
}

.container{
    max-width: 1520px;
}

.btn{
    font-size:105%;
    font-weight:700;
    padding:15px 50px 18px;
    border-radius:35px;
    position:relative;
}
.btn.secondary{
    background-color: var(--brand-accent-color);
    color: var(--white);
}
.btn.secondary:hover{
    background-color: var(--brand-accent-color-light);
    color: var(--white);
}
.btn.arrow{
    margin-right: 50px;
    color:var(--brand-accent-color);
}
.btn.arrow:before{
    content:'';
    display:block;
    width:25px;
    height:15px;
    position:absolute;
    left:0;
    top:17.5;
    background:url('assets/img/arrow-right-slider.svg');
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
    transition: all 0.3s ease-in-out;
}
.btn.arrow:hover{
    color:var(--brand-accent-color-light);
}
.btn.arrow:hover:before{
    left:5px;
    transition: all 0.3s ease-in-out;
}

.wrapper{
    margin-top:155px;
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 1480px) {

    .wrapper{margin-top: 110px;}
  
}

@media (max-width: 1199px) {

    h1{font-size: 200%;}
    h2{font-size: 200%;margin:0 0 15px;}
    h3{font-size: 125%;}
    p{font-size:90%;}
    .btn{font-size: 100%;padding: 13px 50px 16px;}
    .btn.arrow{margin-right: 15px;padding-left: 40px;}
    a{font-size: 90%;}
    .text-content ul li, 
    .text-content ol li{font-size: 90%;}

}

@media (max-width: 991px) {

}

@media (max-width: 767px) {

    h1{font-size: 150%;}
    h2{font-size: 150%;margin:0 0 10px;}
    h3{font-size: 110%;}
    p{font-size:85%;}
    .topline, .subline{font-size: 95%;}
    .btn{font-size: 95%;padding:6px 20px 8px;width: max-content;}
    .btn.arrow::before{width: 21px;}
    a{font-size: 85%;}
    .text-content ul li, 
    .text-content ol li{font-size: 85%;}
    
    .wrapper{margin-top: 75px;}

}

@media (max-width: 600px) {

    .container{
        padding: 0 15px;
    }

    .swiper-pagination .swiper-pagination-bullet{
        width:20px!important;
    }
    .swiper-pagination .swiper-pagination-bullet-active{
        width:40px!important;
    }

}

@media (max-width: 400px) {

}