/* ==================================================
   Ju-Jutsu SC Würzburg Heuchelhof
   Style 2.0
================================================== */

:root{
    --primary:#2356af;
    --primary-light:#3d74d8;
    --dark:#2f3c4d;
    --text:#444;
    --bg:#f5f7fb;
    --white:#fff;
    --radius:18px;
    --shadow:0 14px 35px rgba(0,0,0,.08);
    --max:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:Inter,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    padding-top:82px;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}

.container{
    width:min(var(--max),92%);
    margin:auto;
}

/* HEADER */

/* header{
    position:fixed;
    inset:0 0 auto 0;
    height:82px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    z-index:999;
} */


.site-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.header{
    height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo{
    display:flex;
    align-items:center;
    gap:18px;
}
.logo img{height:62px}
.logo h1{
    font-size:1.15rem;
    color:var(--dark);
    line-height:1.2;
}
.logo p{
    color:var(--primary);
    font-weight:600;
    font-size:.95rem;
}

nav ul{display:flex;gap:.5rem}
nav a{
    padding:.75rem 1rem;
    border-radius:10px;
    transition:.2s;
    font-weight:600;
}
nav a:hover,
nav a.active{
    background:var(--primary);
    color:#fff;
}

/* HERO */

#hero{
    min-height:680px;
    display:flex;
    align-items:center;
    position:relative;
    background:url(images/hero.webp) center center/cover no-repeat;
}
#hero .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(18,35,62,.86),rgba(18,35,62,.60),rgba(18,35,62,.20));
}
.hero-content{
    position:relative;
    z-index:2;
    max-width:620px;
    color:#fff;
}
.hero-tag{
    display:inline-block;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.12);
    padding:.45rem .9rem;
    border-radius:999px;
    margin-bottom:1.5rem;
}
#hero h2{
    font-size:4rem;
    line-height:1.05;
    margin-bottom:1.25rem;
}
#hero p{
    font-size:1.3rem;
    margin-bottom:2rem;
}
.button{
    display:inline-block;
    padding:1rem 2rem;
    border-radius:12px;
    font-weight:700;
}
.primary{background:var(--primary);color:#fff}
.secondary{
    border:2px solid #fff;
    color:#fff;
    margin-left:1rem;
}

/* GENERAL */

section{padding:6rem 0}

.section-header{
    max-width:850px;
    margin:0 auto 3.5rem;
    text-align:center;
}
.section-header h2{
    color:var(--dark);
    font-size:2.5rem;
    margin-bottom:1rem;
}
.section-header p{
    color:#666;
}

/* QUICKINFO */

#quickinfo{margin-top:-70px;position:relative;z-index:5}
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}
.card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:2rem;
    text-align:center;
}
.icon{font-size:2.2rem;margin-bottom:1rem}

/* HIGHLIGHTS */

.highlights{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:2rem;
}
.highlights article{
 background:#fff;
 padding:2rem;
 border-radius:var(--radius);
 box-shadow:var(--shadow);
}

/* TRAINER */

#trainer{background:#eef3f9}

.trainer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:2rem;
}
.trainer-card{
 background:#fff;
 border-radius:20px;
 overflow:hidden;
 box-shadow:var(--shadow);
 transition:.25s;
}
.trainer-card:hover{
 transform:translateY(-8px);
}
.trainer-card img{
 width:100%;
 height:330px;
 object-fit:cover;
 object-position:center top;
}
.trainer-body{
 padding:1.6rem;
}
.trainer-body h3{
 color:var(--dark);
 margin-bottom:.3rem;
}
.trainer-title{
 color:var(--primary);
 font-weight:700;
 display:block;
 margin-bottom:1rem;
}
.badges{
 display:flex;
 flex-wrap:wrap;
 gap:.6rem;
}
.badges span{
 background:#edf4ff;
 color:var(--primary);
 padding:.45rem .8rem;
 border-radius:999px;
 font-size:.88rem;
 font-weight:600;
}

/* FOOTER */

footer{
 background:var(--dark);
 color:#fff;
 text-align:center;
 padding:5rem 0;
}

/* MOBILE */

@media (max-width:900px){

body{padding-top:120px}

.header{
 flex-direction:column;
 justify-content:center;
 height:auto;
 padding:1rem 0;
}

.logo{
 flex-direction:column;
 text-align:center;
}

nav ul{
 flex-wrap:wrap;
 justify-content:center;
}

.cards,
.highlights,
.trainer-grid{
 grid-template-columns:1fr;
}

#hero{
 min-height:560px;
 background-position:70% center;
}

#hero h2{
 font-size:2.7rem;
}

.secondary{
 display:block;
 margin:1rem 0 0;
}

}