.hero {
position: relative;
min-height: 68vh;
display: grid;
place-items: center;
overflow: hidden;
padding: 3rem 1.5rem;
text-align: center;
color: white;
background: #233b2d;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: rgb(20 42 29 / 55%);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
margin: 0 auto;
width: 100%;
}
.hero-content h1,{
margin-bottom: 0.75rem;
text-align: center;
}
.hero-content p {
margin-bottom: 1.25rem;
text-align: center;
}
.sound-btn {
margin-top: 0;
padding: 0.65rem 1.4rem;
font-size: 0.95rem;
color: white;
background: rgba(35, 59, 45, 0.75);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 999px;
cursor: pointer;
backdrop-filter: blur(4px);
transition: background 0.2s ease, transform 0.2s ease;
}
.sound-btn:hover {
background: rgba(35, 59, 45, 0.95);
transform: scale(1.03);
}
/* --- HERO BEREICH KOMPLETT --- */
.hero {
position: relative !important;
min-height: 68vh !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
padding: 3rem 1.5rem !important;
box-sizing: border-box !important;
background: #233b2d !important;
}
.hero-video {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
min-width: 100% !important;
min-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: cover !important;
z-index: 0 !important;
}
.hero::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: rgba(20, 42, 29, 0.55) !important;
z-index: 1 !important;
pointer-events: none !important;
}
.hero-content {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
max-width: 900px !important;
margin: 0 auto !important;
}
.hero-content h1,
.hero-content p {
text-align: center !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
color: white !important;
}
.sound-btn {
display: inline-block !important;
position: relative !important;
z-index: 3 !important;
margin-top: 1.5rem !important;
padding: 0.7rem 1.5rem !important;
font-size: 1rem !important;
color: white !important;
background: rgba(35, 59, 45, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: 999px !important;
cursor: pointer !important;
}