/* =======================================================
   BANZAI-DOJO
   SEMINARE 2026 / SEMINARE.CSS
======================================================= */


/* ===== FARBEN & DESIGN SYSTEM ===== */
:root{
--red:#d6001c;
--red-light:#ff2a2a;
--dark:#070707;
--card:#111;
--text:#f5f5f5;
--muted:#b8b8b8;
--radius:20px;
}


/* ===== BASIS ===== */
body{
margin:0;
font-family:'Poppins',sans-serif;
background:var(--dark);
color:var(--text);
}

a{
color:inherit;
text-decoration:none;
}


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

.hero{
display:flex;
align-items:center;
justify-content:center;
text-align:center;

min-height:75vh;
padding:100px 20px 40px;

background:
linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.70)),
url('seminare-hero.jpg');

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

.hero h1{
font-size:clamp(2.8rem, 6vw, 5rem);
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
color:#ffffff;

text-shadow:
0 4px 20px rgba(0,0,0,0.85),
0 2px 8px rgba(0,0,0,0.95);

margin-bottom:20px;
}

.hero p{
font-size:clamp(1.1rem, 2vw, 1.5rem);
font-weight:500;
color:#ffffff;
opacity:0.95;

text-shadow:
0 3px 12px rgba(0,0,0,0.9);

letter-spacing:0.5px;
}


/* =======================================================
   FILTER
======================================================= */

.filter{
text-align:center;
margin:30px 0;
}

.filter button{
margin:5px;
padding:10px 16px;
border:none;
border-radius:20px;
background:#222;
color:#fff;
cursor:pointer;
transition:0.3s;
}

.filter button:hover{
background:#333;
}

.filter button.active{
background:var(--red);
}


/* =======================================================
   SEMINAR KARTEN LAYOUT
======================================================= */

.cards{
max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:25px;
padding:20px;
}


/* =======================================================
   EINZELNE SEMINAR CARD
======================================================= */

.card{
background:var(--card);
border-radius:var(--radius);
padding:25px;

border:1px solid #1d1d1d;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
border-color:#333;
}

.card h3{
color:var(--red);
margin-bottom:8px;
font-size:1.1rem;
}

.card p{
margin:6px 0;
font-size:0.85rem;
line-height:1.5;
}


/* =======================================================
   BADGES
======================================================= */

.badge{
display:inline-block;
background:#222;
padding:4px 10px;
border-radius:20px;
font-size:0.8rem;
margin-bottom:10px;
}

.limited{
background:var(--red);
}


/* =======================================================
   BUTTONS
======================================================= */

.buttons{
margin-top:15px;

display:flex;
gap:10px;
flex-wrap:wrap;
}

.btn{
display:inline-block;

padding:10px 14px;
border-radius:20px;

font-size:0.8rem;
font-weight:600;

transition:0.3s;
}

.btn-mail{
background:#222;
color:#fff;
}

.btn-link{
background:linear-gradient(
135deg,
var(--red),
var(--red-light)
);
color:#fff;
}


/* =======================================================
   ZURÜCK BUTTON
======================================================= */

.back{
text-align:center;
margin:60px 0;
}

.back a{
display:inline-block;

padding:14px 30px;
border-radius:30px;

background:var(--red);
color:#fff;

font-weight:600;
}


/* =======================================================
   FOOTER
======================================================= */

footer{
text-align:center;
padding:40px;

color:#777;

border-top:1px solid #1a1a1a;
margin-top:60px;
}


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

@media(max-width:900px){

.hero{
padding:90px 20px 30px;
}

.hero h1{
font-size:2.4rem;
}

}


@media(max-width:600px){

.hero{
padding:80px 15px 20px;
}

.hero h1{
font-size:1.7rem;
line-height:1.15;
}

.hero p{
font-size:0.9rem;
line-height:1.4;
}

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

}