:root{ --brand:#f4c430; --brand-dark:#e0af12; --ink:#0f172a; }
html,body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b1220; color:#e5e7eb; }
.banner-header{ position:relative; width:100%; height:400px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom-left-radius:32px; border-bottom-right-radius:32px; box-shadow:0 8px 32px rgba(0,0,0,.12);} 
.banner-bg{ position:absolute; inset:0; width:100%; height:100%; background:url('../../medien/Heliohneschrift.jpg') center center/cover no-repeat; z-index:1; filter:brightness(.92) saturate(1.1);} 
.banner-overlay{ position:absolute; inset:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(20,30,60,.32) 0%, rgba(20,30,60,.68) 100%); z-index:2; } 
.banner-content{ position:relative; z-index:3; padding:48px 32px 32px 32px; color:#fff; max-width:900px; margin:0 auto; text-align:center; text-shadow:0 2px 16px rgba(0,0,0,.32);} 
.banner-title{ font-size:3em; font-weight:900; margin-bottom:16px; letter-spacing:1px; } 
.banner-sub{ font-size:1.25em; opacity:.98; margin-bottom:0; } 
.breadcrumb{ font-size:1em; color:#e4eef7; margin-bottom:18px; letter-spacing:1px; font-weight:500; display:none; }
@media (max-width:700px){ .banner-header{ height:200px; border-bottom-left-radius:16px; border-bottom-right-radius:16px; } .banner-title{ font-size:1.5em; } .banner-content{ padding:20px 10px 10px 10px; }}
/* UI helpers */
.card-hover{ transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.chip{ background: rgba(15,23,42,.6); border:1px solid rgba(255,255,255,.08); transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.chip:hover{ transform: translateY(-1px); }
.link-underline{ position:relative; }
.link-underline::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.link-underline:hover::after{ transform:scaleX(1); }
.btn-cta{ transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease; box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn-cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(244,196,48,.15); }
.btn-cta .icon{ transition: transform .2s ease; }
.btn-cta:hover .icon{ transform: translateX(3px); }
.brand-badge{ transition: transform .2s ease; }
.brand-badge:hover{ transform: rotate(-6deg) scale(1.03); }
.hero-mask{ background: linear-gradient(180deg, rgba(11,18,32,.45) 0%, rgba(11,18,32,.85) 70%), linear-gradient(90deg, rgba(244,196,48,.25) 0%, rgba(244,196,48,.05) 100%); }

/* News cards polish */
.news-card{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; border-radius: 16px; }
.news-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.35); border-color: rgba(255,255,255,.16); }
.news-card .thumb{ height: 180px; }
.news-card .badge{ display:none; }
.btn-cta.glow{ box-shadow: 0 8px 22px rgba(244,196,48,.18); }

/* Animations */
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes fadeInUp { from { opacity:0; transform: translateY(10px) } to { opacity:1; transform:none } }
@keyframes heroPan { 0% { transform: scale(1.08) } 100% { transform: scale(1) } }

/* Section enter animation */
.section-anim { animation: fadeIn .35s ease-out both; }

/* Card reveal */
.reveal { opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal.show { opacity:1; transform:none; }

/* Gentle banner zoom on load */
.banner-bg { transform-origin:center; animation: heroPan 12s ease-out both; }
/* Parallax-like effect */
.banner-bg{ background-attachment: fixed; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.banner-bg { animation: none !important; }
}

/* Modern media card unterhalb des Banners */
.media-card{ position:relative; width:100%; overflow:hidden; border-radius:20px; border:1px solid rgba(255,255,255,.06); box-shadow:0 16px 40px rgba(0,0,0,.28); background:linear-gradient(180deg, rgba(15,23,42,.8) 0%, rgba(15,23,42,1) 100%); }
.media-card img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02) brightness(.98); transform:scale(1.02); transition: transform .6s ease, filter .6s ease; }
.media-overlay{ position:absolute; inset:0; background:radial-gradient(120% 120% at 80% 10%, rgba(244,196,48,.25) 0%, rgba(244,196,48,0) 40%), linear-gradient(180deg, rgba(2,6,23,.05) 0%, rgba(2,6,23,.75) 65%, rgba(2,6,23,.95) 100%); mix-blend-mode: normal; pointer-events:none; }
.media-badge{ position:absolute; top:14px; left:14px; z-index:2; background:var(--brand); color:#111827; font-weight:700; font-size:.8rem; padding:.3rem .6rem; border-radius:.5rem; box-shadow:0 6px 20px rgba(244,196,48,.35); }
.media-caption{ position:absolute; left:0; right:0; bottom:0; padding:18px 18px 16px; z-index:2; color:#e5e7eb; }
.media-caption .title{ font-size:1.1rem; font-weight:800; letter-spacing:.3px; }
.media-caption .sub{ font-size:.9rem; opacity:.9; margin-top:2px; }
.media-card:hover img{ transform:scale(1.06); filter:saturate(1.12) contrast(1.04) brightness(1); }

/* Helicopter animation in Bewerben banner */
#heli{ position:absolute; top:20%; right:-240px; z-index:3; opacity:0; pointer-events:none; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
#heli.fly{ animation: heliEnterRTL .6s ease-out forwards, heliCruiseRTL 7s linear .6s forwards; }
#heli .rotating, #heli #rotor-main, #heli #rotor-tail{ transform-origin:center; }
#heli.spin #rotor-main{ animation: rotorSpin .08s linear infinite; }
#heli.spin #rotor-tail{ animation: rotorSpin .06s linear infinite; }

@keyframes rotorSpin{ to{ transform: rotate(360deg); } }
@keyframes heliEnterRTL{ 0%{ opacity:0; transform: translateX(0) translateY(-8px) scale(.98); } 100%{ opacity:1; transform: translateX(-40px) translateY(0) scale(1); } }
@keyframes heliCruiseRTL{
	0%{ transform: translateX(-40px) translateY(0); }
	30%{ transform: translateX(-40vw) translateY(-6px); }
	60%{ transform: translateX(-70vw) translateY(4px); }
	100%{ transform: translateX(-105vw) translateY(0); }
}

@media (prefers-reduced-motion: reduce){
	#heli{ transition:none !important; animation:none !important; }
		#heli.fly{ animation:none !important; opacity:1; right:10px; }
	#heli.spin #rotor-main, #heli.spin #rotor-tail{ animation:none !important; }
}