/* Basics */
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0d0f12;--fg:#e9edf2;--muted:#aab3bf;--accent:#b53028;--accent-2:#1f5eff;--glass:rgba(255,255,255,.14);--glass-border:rgba(255,255,255,.28);--shadow:0 10px 30px rgba(0,0,0,.35);--radius:14px;--speed:.35s}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:radial-gradient(1200px 700px at 20% -10%,#1a1f27,transparent 60%),radial-gradient(1000px 600px at 110% 20%,#181d24,transparent 55%),var(--bg);color:var(--fg);line-height:1.6}
img{display:block;max-width:100%;height:auto}
.container{width:92%;max-width:1200px;margin-inline:auto}

/* Header / Nav */
.site-header{position:relative;z-index:1100}
.header-inner{padding-block:14px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand-logo{height:92px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.logo2{height:240px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.navbar{position:relative}
.menu-toggle{display:none;width:46px;height:42px;border:0;background:transparent;align-items:center;justify-content:center;cursor:pointer;z-index:1200}
.menu-toggle .bar{display:block;width:24px;height:2px;background:var(--fg);margin:3px 0;transition:transform var(--speed)}
.nav-menu{list-style:none;display:flex;gap:12px;align-items:center}
.nav-link{padding:.6rem .9rem;border-radius:999px;position:relative;isolation:isolate;color:var(--fg);text-decoration:none;font-weight:600;letter-spacing:.2px;transition:color .2s,background .2s,transform .2s}
.nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0;transform:scaleX(.6);transform-origin:left;transition:opacity var(--speed),transform var(--speed);border-radius:2px;z-index:-1}
.nav-link:hover{transform:translateY(-1px)}
.nav-link:hover::after{opacity:1;transform:scaleX(1)}
.nav-cta{background:linear-gradient(135deg,var(--accent),#f3584d);box-shadow:0 6px 18px rgba(181,48,40,.35)}
.nav-cta:hover{filter:saturate(1.1)}

/* Hero */
.hero{position:relative;min-height:62vh;border-radius:calc(var(--radius) + 6px);overflow:hidden;margin-inline:var(--radius)}
.hero-img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/7}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))}
.hero-text{position:absolute;inset:auto 0 8% 0;display:flex;flex-direction:column;gap:14px;max-width:820px;margin-inline:auto;padding:18px 22px;text-align:center}
.hero-text h1{font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.15}
.hero-text p{color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem)}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:6px}
.motto{font-size:clamp(1rem,3.8vw,1.2rem);color:var(--fg);opacity:.95;margin-bottom:6px}

/* Buttons */
.btn{appearance:none;border:0;border-radius:999px;padding:.8rem 1.1rem;background:linear-gradient(135deg,var(--accent),#f3584d);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(181,48,40,.35);transition:transform var(--speed),filter var(--speed)}
.btn:hover{transform:translateY(-1px);filter:saturate(1.1)}
.btn-outline{background:transparent;border:1px solid var(--glass-border);color:var(--fg);box-shadow:none;backdrop-filter:blur(6px)}
.btn-light{background:#fff;color:#111;box-shadow:0 10px 24px rgba(255,255,255,.15)}
.btn-large{font-size:1.08rem;padding:13px 24px;border-radius:14px;font-weight:600}

/* Sections / Cards */
.section{padding-block:clamp(40px,6vw,80px)}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr}
.gap-xl{gap:clamp(20px,4vw,48px)}
.align-start{align-items:start}
.about-text h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:10px}
.about-text p{opacity:.9;margin:10px 0}
.about-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.link-pill{display:inline-block;padding:.55rem .9rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);text-decoration:none;color:var(--fg);backdrop-filter:blur(8px);transition:transform var(--speed),background var(--speed)}
.link-pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.12)}
.link-pill.alt{background:rgba(181,48,40,.15);border-color:rgba(181,48,40,.4)}
.about-cards{display:grid;grid-template-columns:1fr;gap:16px}
.card{border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--glass-border);backdrop-filter:blur(10px);overflow:hidden;transition:transform var(--speed),box-shadow var(--speed)}
.card img{width:100%;height:210px;object-fit:cover}
.card-body{padding:16px}
.card h3{margin-bottom:6px}
.card p{color:var(--muted)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* CTA */
.cta-strip{padding:36px 0}
.cta-inner{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--glass-border);backdrop-filter:blur(10px);border-radius:var(--radius);padding:24px;display:flex;align-items:center;gap:18px;justify-content:space-between}

/* Footer */
.site-footer{padding:28px 0;color:#c7ced8}
.site-footer a{color:#e9edf2}
.site-footer a:hover{text-decoration:underline}

/* Cookie Banner */
.cookie-banner{display:none;position:fixed;inset:auto 12px 12px 12px;z-index:900;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.78));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#fff;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.cookie-banner a{color:#fff;text-decoration:underline}
.btn-accept{padding:.6rem .9rem;border-radius:999px;background:#19a851}
.btn-accept:hover{filter:saturate(1.1)}

/* Animations */
.elevate{box-shadow:var(--shadow)}
.fade-in{animation:fadeUp .7s ease both}
.fade-on-scroll{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.fade-on-scroll.in-view{opacity:1;transform:none} /* <- Sichtbar machen */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Ticker */
.ticker-banner{background:#b40000;overflow:hidden;white-space:nowrap;position:relative;height:36px;display:flex;align-items:center;border-bottom:2px solid rgba(255,255,255,.2);z-index:1000}
.ticker-banner .ticker-text{display:inline-block;padding-left:100%;animation:ticker 20s linear infinite;font-weight:700;color:#fff;font-size:1rem;letter-spacing:.3px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (max-width:380px){.ticker-banner{height:32px}.ticker-banner .ticker-text{font-size:.92rem;animation-duration:22s}}

/* Bewerbungs-Sektion */
.apply-section{margin:72px 0 84px}
.apply-section .container{max-width:1100px}
.apply-section .section-title{text-align:center;margin-bottom:36px;font-size:clamp(1.5rem,3vw,2rem)}
.apply-section .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:980px){.apply-section .grid-2{grid-template-columns:1fr;gap:22px}}
.apply-section .card{padding:26px 22px;border-radius:18px;display:flex;flex-direction:column;gap:14px}
.benefits-list,.jobs-list{list-style:none;margin:10px 0 0;padding:0}
.benefits-list li,.jobs-list li{margin-bottom:10px;font-size:1.06rem;line-height:1.45;display:flex;align-items:center;gap:8px}
.apply-center{text-align:center;margin-top:14px}

/* Forms */
.form{display:block}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row .form-group{flex:1 1 260px;min-width:220px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form-group label{color:var(--muted);font-weight:600;font-size:.95rem}
.form-group input,.form-group textarea,.form-group select{background:rgba(255,255,255,.06);color:var(--fg);border:1px solid var(--glass-border);border-radius:10px;padding:.75rem .9rem;outline:none;transition:border-color var(--speed),box-shadow var(--speed),background var(--speed);backdrop-filter:blur(8px)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#c9d1db88}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 4px rgba(255,255,255,.06);background:rgba(255,255,255,.1)}
.g-recaptcha{transform-origin:left top;margin:6px 0 12px}
@media (max-width:640px){.form-row{flex-direction:column}}

/* Mobile Nav Off-Canvas */
@media (max-width:820px){
  .menu-toggle{display:flex}
  .nav-menu{position:fixed;top:0;right:0;height:100dvh;width:min(78%,340px);background:linear-gradient(180deg,rgba(17,20,26,.98),rgba(17,20,26,.95));border-left:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);padding:16px 14px;display:flex;flex-direction:column;gap:10px;transform:translateX(100%);transition:transform .3s ease;z-index:1400}
  body.nav-open .nav-menu{transform:translateX(0)}
  .nav-link{display:block;padding:.9rem 1rem;font-size:1.05rem}
  .mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1300}
  body.nav-open .mobile-backdrop{opacity:1;pointer-events:auto}
}
@media (min-width:821px){
  .nav-menu{position:static;transform:none!important;display:flex;gap:12px;height:auto;width:auto;background:transparent;border:0;padding:0}
  .menu-toggle{display:none}
  body{overflow:auto!important}
}

/* Responsive tweaks */
@media (max-width:980px){.grid-2{grid-template-columns:1fr}.hero{margin-inline:0;border-radius:0}.cta-inner{flex-direction:column;align-items:stretch;text-align:center}}

/* ===== MOBILE NAV CLICK FIX (ans Ende der CSS einfügen) ===== */

/* Backdrop liegt UNTER dem Menü und fängt Klicks nur im offenen Zustand */
.mobile-backdrop{
  z-index: 9990;            /* unter dem Menü */
  pointer-events: none;     /* standardmäßig keine Klicks abfangen */
}
body.nav-open .mobile-backdrop{
  pointer-events: auto;     /* nur bei offenem Menü zum Schließen klickbar */
}

/* Menü und Toggle konsequent über allem */
@media (max-width: 820px){
  .nav-menu{
    z-index: 10010 !important;   /* über dem Backdrop */
  }
  .menu-toggle{
    z-index: 10020;              /* Button bleibt bedienbar */
  }
}

/* Sicherheit: Menü-Links sind garantiert klickbar */
.nav-menu, .nav-menu *{
  pointer-events: auto !important;
}

/* Lesbarkeit (falls es nur „zu dunkel“ war) */
.nav-menu .nav-link{
  color: #fff !important;
}
