/* =======================================================
   BANZAI-DOJO
   DISZIPLIN-SEITEN / DISCIPLINE.CSS
   Karate • Kickboxen • Jiu-Jitsu • ATK-SV • Frauen-SV
======================================================= */


/* ===== FARBEN & DESIGN SYSTEM ===== */
:root{
--red:#d6001c;
--dark:#070707;
--card:#101010;
--text:#f5f5f5;
--muted:#b8b8b8;
}


/* ===== BASIS ===== */
body{
line-height:1.7;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}


/* =======================================================
   HERO-BEREICH BASIS
======================================================= */

.discipline-hero{
min-height:85vh;
display:flex;
align-items:center;
padding:60px 20px;

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}


/* =======================================================
   HERO-HINTERGRÜNDE JE DISZIPLIN
======================================================= */

.karate-hero{
background-image:
linear-gradient(to right, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.72) 100%),
url('karate.jpg');
}

.jiu-jitsu-kinder-hero{
background-image:
linear-gradient(to right, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.72) 100%),
url('jiu-jitsu-kinder.png');
}

.kickboxen-hero{
background-image:
linear-gradient(to right, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.72) 100%),
url('kickboxen.jpg');
}

.atk-sv-hero{
background-image:
linear-gradient(to right, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.72) 100%),
url('atk-sv.jpg');
}

.frauen-sv-hero{
background-image:
linear-gradient(to right, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.72) 100%),
url('frauen-sv.jpg');
}


/* =======================================================
   HERO-INHALT
======================================================= */

.hero{
max-width:1200px;
margin:auto;
width:100%;
}

.hero-content{
max-width:650px;
}

.logo{
width:140px;
margin-bottom:30px;
}

.badge{
display:inline-block;
padding:10px 18px;
border-radius:999px;
background:rgba(214,0,28,0.12);
border:1px solid rgba(214,0,28,0.4);
margin-bottom:24px;
font-weight:600;
}

h1{
font-size:4rem;
line-height:1.05;
margin-bottom:24px;
font-weight:800;
}

h1 span{
color:var(--red);
}

.hero p{
font-size:1.1rem;
color:var(--muted);
margin-bottom:32px;
}


/* ===== CTA BUTTON ===== */
.cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:18px 34px;
background:var(--red);
color:#fff;
text-decoration:none;
border-radius:999px;
font-weight:700;
box-shadow:0 10px 30px rgba(214,0,28,0.35);
transition:0.3s;
}

.cta-btn:hover{
transform:translateY(-2px);
}


/* =======================================================
   ALLGEMEINE SEKTIONEN
======================================================= */

section{
max-width:1200px;
margin:auto;
padding:90px 20px;
}

.section-title{
font-size:2.4rem;
margin-bottom:40px;
text-align:center;
}


/* =======================================================
   INFO-KARTEN
======================================================= */

.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.card{
background:var(--card);
border:1px solid #1d1d1d;
border-radius:22px;
padding:35px;
transition:0.3s;
}

.card:hover{
transform:translateY(-6px);
border-color:rgba(214,0,28,0.35);
}

.card h3{
font-size:1.4rem;
margin-bottom:18px;
}

.card p,
.card li{
color:var(--muted);
}

.card ul{
padding-left:18px;
display:grid;
gap:12px;
}


/* =======================================================
   ABSCHLUSS CTA / HIGHLIGHT
======================================================= */

.highlight{
background:linear-gradient(180deg,#121212,#090909);
border:1px solid rgba(214,0,28,0.3);
border-radius:26px;
padding:60px;
text-align:center;
}

.highlight h2{
font-size:2.5rem;
margin-bottom:20px;
}

.highlight p{
max-width:750px;
margin:auto;
color:var(--muted);
margin-bottom:35px;
}


/* =======================================================
   RESPONSIVE DESIGN
======================================================= */

@media(max-width:900px){

.discipline-hero{
min-height:auto;
padding:110px 20px 80px;
}

.grid{
grid-template-columns:1fr;
}

h1{
font-size:2rem;
line-height:1.15;
}

.highlight{
padding:40px 25px;
}

}