/* =======================================================
   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;
}

/* ===== RESET ===== */
*,
*::before,
*::after{
box-sizing:border-box;
}

/* ===== 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;
}

.back,
.whatsapp-btn{
text-align:center;
margin-left:auto;
margin-right:auto;
}

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



/* =======================================================
   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;
}

}

* {
  box-sizing: border-box;
}

.anmeldeformular,
.seminar-formular,
form {
  max-width: 100%;
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* =======================================================
   SEMINAR ANMELDUNG
======================================================= */

.seminar-form-section{
max-width:980px;
margin:auto;
padding:120px 20px 90px;
}

.seminar-form{
background:linear-gradient(180deg,#151515,#0b0b0b);
border:1px solid rgba(214,0,28,0.45);
border-radius:28px;
padding:50px;
display:grid;
gap:18px;
box-shadow:0 20px 50px rgba(0,0,0,0.45);
}

.seminar-form input,
.seminar-form select,
.seminar-form textarea{
background:#181818;
border:1px solid #333;
color:#fff;
padding:18px 20px;
border-radius:16px;
font-size:1rem;
font-family:inherit;
}

.seminar-form input::placeholder,
.seminar-form textarea::placeholder{
color:#aaa;
}

.seminar-form select{
color:#ddd;
}

.privacy-check{
font-size:0.95rem;
color:#d0d0d0;
line-height:1.6;
}

.privacy-check a{
color:#d6001c;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

.privacy-check a:hover{
color:#ff3048;
text-decoration:underline;
}
.seminar-form button{
margin-top:8px;
background:#d6001c;
color:#fff;
border:none;
padding:20px;
border-radius:999px;
font-size:1rem;
font-weight:800;
cursor:pointer;
}

.field-label{
display:block;
margin:8px 0 -6px 8px;
font-size:0.9rem;
font-weight:500;
color:#c8c8c8;
}

.required{
color:#d6001c;
font-weight:700;
margin-left:4px;
}

.form-info{
color:#b8b8b8;
font-size:0.9rem;
margin-bottom:25px;
}

.seminar-form input[type="date"]{
width:100%;
box-sizing:border-box;
-webkit-apperance:none;
appearance:none;}