/* ============================================================
   SECURE INVEST AG — landing-style.css  v3.0
   ============================================================ */

:root {
  --bg:#0d0f14;
  --bg-alt:#060a10;
  --bg-card:#0e1420;
  --bg-card-hover:#121828;
  --border:rgba(255,255,255,0.06);
  --blue:#1e9cff;
  --blue-dim:rgba(30,156,255,0.1);
  --blue-glow:rgba(30,156,255,0.3);
  --gold:#c9a84c;
  --gold-light:#dbb96a;
  --text:#8e9ab0;
  --text-muted:#5a6478;
  --heading:#eef1f8;
  --white:#ffffff;
  --nav-h:70px;
  --radius:16px;
  --transition:0.3s cubic-bezier(0.4,0,0.2,1);
  --font-main:'Raleway',sans-serif;
  --font-body:'Roboto',sans-serif;
  --font-display:'Oswald',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background-color:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.7;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--blue);text-decoration:none;transition:color var(--transition)}
a:hover{color:#5cbfff}
h1,h2,h3,h4,h5{font-family:var(--font-main);color:var(--heading);font-weight:800;line-height:1.2}
img{max-width:100%;display:block}
ul{list-style:none}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 28px}

/* ============================================================
   HEADER
   ============================================================ */
#header{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  height:var(--nav-h);display:flex;align-items:center;
  background:transparent;
  transition:box-shadow var(--transition)
}
/* Blur auf ::before — verhindert dass backdrop-filter den Header zum
   Containing Block für position:fixed Kinder macht (iOS Safari Bug) */
#header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:transparent;
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  transition:background var(--transition),-webkit-backdrop-filter var(--transition),backdrop-filter var(--transition)
}
#header.scrolled::before{
  background:rgba(6,10,16,0.93);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)
}
#header.scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,0.05),0 4px 40px rgba(0,0,0,0.6)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo-img{height:38px;width:auto}

.navmenu ul{display:flex;align-items:center;gap:0}
.navmenu ul li{position:relative}
.navmenu ul li a{
  font-family:var(--font-main);
  font-size:11.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  padding:8px 16px;border-radius:6px;
  position:relative;
  transition:color var(--transition);
  display:flex;align-items:center;gap:5px
}
.navmenu ul li a::after{
  content:'';
  position:absolute;
  bottom:2px;left:16px;right:16px;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.35s ease
}
.navmenu ul li a:hover{color:var(--white)}
.navmenu ul li a:hover::after,
.navmenu ul li a.active::after{transform:scaleX(1)}
.navmenu ul li a.active{color:var(--white)}

.mobile-nav-toggle{
  display:none;background:none;border:none;
  color:var(--white);font-size:26px;cursor:pointer;padding:4px
}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;padding:var(--nav-h) 0 60px
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#08111e 0%,#0d0f14 55%,#0a0d18 100%)
}
.hero-bg::after{content:none}

/* Infinite Grid layers */
.hero-igrid-base,
.hero-igrid-reveal{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block
}
.hero-igrid-base{opacity:0.045}
.hero-igrid-reveal{
  opacity:0.38;
  -webkit-mask-image:radial-gradient(300px circle at -600px -600px,black,transparent);
  mask-image:radial-gradient(300px circle at -600px -600px,black,transparent)
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(30,156,255,0.11) 0%,transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 80%,rgba(201,168,76,0.06) 0%,transparent 60%);
  animation:hero-pulse 9s ease-in-out infinite
}
@keyframes hero-pulse{
  0%,100%{opacity:0.7}
  50%{opacity:1}
}

/* ── 3 Karten ── */
.hero-cards{
  position:relative;z-index:2;
  width:100%;max-width:1100px;
  padding:0 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px
}
.hero-card{
  display:flex;flex-direction:column;align-items:stretch;
  border-radius:22px;padding:36px 30px;
  cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;
  transition:transform 0.4s cubic-bezier(0.34,1.4,0.64,1),box-shadow 0.4s ease
}
.hero-card::after{
  content:'';position:absolute;inset:0;border-radius:22px;
  opacity:0;transition:opacity 0.4s ease;pointer-events:none
}
.hero-card:hover{transform:translateY(-12px) scale(1.015)}
.hero-card:hover::after{opacity:1}

/* Card 1 */
.hero-card:nth-child(1){
  background:linear-gradient(160deg,#0b1829 0%,#0d0f14 75%);
  border:1px solid rgba(30,156,255,0.22);
  box-shadow:0 4px 30px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.04)
}
.hero-card:nth-child(1)::before{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:radial-gradient(ellipse at 50% 0%,rgba(30,156,255,0.18) 0%,transparent 65%);
  opacity:0.6;transition:opacity 0.4s
}
.hero-card:nth-child(1):hover{
  border-color:rgba(30,156,255,0.55);
  box-shadow:0 24px 64px rgba(30,156,255,0.22),0 4px 30px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.06)
}
.hero-card:nth-child(1):hover::before{opacity:1}
.hero-card:nth-child(1)::after{
  background:radial-gradient(ellipse at 50% 100%,rgba(30,156,255,0.07) 0%,transparent 60%)
}

/* Card 2 */
.hero-card:nth-child(2){
  background:linear-gradient(160deg,#160f04 0%,#110d04 75%);
  border:1px solid rgba(201,168,76,0.28);
  box-shadow:0 4px 30px rgba(0,0,0,0.5),inset 0 1px 0 rgba(201,168,76,0.05)
}
.hero-card:nth-child(2)::before{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,0.17) 0%,transparent 65%);
  opacity:0.7;transition:opacity 0.4s
}
.hero-card:nth-child(2):hover{
  border-color:rgba(201,168,76,0.65);
  box-shadow:0 24px 64px rgba(201,168,76,0.2),0 4px 30px rgba(0,0,0,0.6),inset 0 1px 0 rgba(201,168,76,0.07)
}
.hero-card:nth-child(2):hover::before{opacity:1}
.hero-card:nth-child(2)::after{
  background:radial-gradient(ellipse at 50% 100%,rgba(201,168,76,0.06) 0%,transparent 60%)
}

/* Card 3 — Teal */
.hero-card:nth-child(3){
  background:linear-gradient(160deg,#041612 0%,#050d0b 75%);
  border:1px solid rgba(34,197,150,0.2);
  box-shadow:0 4px 30px rgba(0,0,0,0.5),inset 0 1px 0 rgba(34,197,150,0.04)
}
.hero-card:nth-child(3)::before{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:radial-gradient(ellipse at 50% 0%,rgba(34,197,150,0.15) 0%,transparent 65%);
  opacity:0.6;transition:opacity 0.4s
}
.hero-card:nth-child(3):hover{
  border-color:rgba(34,197,150,0.5);
  box-shadow:0 24px 64px rgba(34,197,150,0.16),0 4px 30px rgba(0,0,0,0.6)
}
.hero-card:nth-child(3):hover::before{opacity:1}
.hero-card:nth-child(3)::after{
  background:radial-gradient(ellipse at 50% 100%,rgba(34,197,150,0.06) 0%,transparent 60%)
}

/* Logo wrap */
.hero-card-logo-wrap{
  display:flex;align-items:center;justify-content:center;
  width:100%;position:relative;z-index:1;
  margin-bottom:20px;height:150px;min-height:unset;flex-direction:column
}
.hero-card-logo-wrap img{
  width:72%;max-height:76px;height:auto;object-fit:contain;
  transition:transform 0.4s ease,filter 0.4s ease;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.4))
}
.hero-card:hover .hero-card-logo-wrap img{
  transform:scale(1.06) translateY(-3px);
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.5))
}

/* Subtitle */
.hero-card-subtitle{
  font-family:var(--font-main);
  font-size:10px;font-weight:800;
  letter-spacing:4px;text-transform:uppercase;
  text-align:center;margin:0 0 4px;
  position:relative;z-index:1
}
.hero-card:nth-child(1) .hero-card-subtitle{color:rgba(30,156,255,0.7)}
.hero-card:nth-child(2) .hero-card-subtitle{color:rgba(201,168,76,0.75)}
.hero-card:nth-child(3) .hero-card-subtitle{color:rgba(34,197,150,0.75)}

/* Card body */
.hero-card-body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:14px;
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:22px;flex:1
}
.hero-card:nth-child(1) .hero-card-body{border-top-color:rgba(30,156,255,0.12)}
.hero-card:nth-child(2) .hero-card-body{border-top-color:rgba(201,168,76,0.12)}
.hero-card:nth-child(3) .hero-card-body{border-top-color:rgba(34,197,150,0.1)}

.hero-card-desc{
  font-size:0.83rem;line-height:1.78;
  color:rgba(255,255,255,0.48);font-family:var(--font-body);margin:0
}

/* Tags */
.hero-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.hero-card-tags span{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;font-family:var(--font-main);
  padding:4px 10px;border-radius:50px
}
.hero-card:nth-child(1) .hero-card-tags span{
  color:rgba(30,156,255,0.9);background:rgba(30,156,255,0.07);border:1px solid rgba(30,156,255,0.18)
}
.hero-card:nth-child(2) .hero-card-tags span{
  color:rgba(201,168,76,0.9);background:rgba(201,168,76,0.07);border:1px solid rgba(201,168,76,0.18)
}
.hero-card:nth-child(3) .hero-card-tags span{
  color:rgba(34,197,150,0.9);background:rgba(34,197,150,0.07);border:1px solid rgba(34,197,150,0.18)
}

/* CTA Button */
.hero-card-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-main);font-size:11.5px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  padding:12px 20px;border-radius:10px;
  margin-top:auto;margin-bottom:12px;
  transition:all 0.3s ease
}
.hero-card:nth-child(1) .hero-card-btn{
  background:rgba(30,156,255,0.08);color:rgba(30,156,255,0.9);border:1px solid rgba(30,156,255,0.25)
}
.hero-card:nth-child(2) .hero-card-btn{
  background:rgba(201,168,76,0.08);color:rgba(201,168,76,0.9);border:1px solid rgba(201,168,76,0.3)
}
.hero-card:nth-child(3) .hero-card-btn{
  background:rgba(34,197,150,0.07);color:rgba(34,197,150,0.9);border:1px solid rgba(34,197,150,0.22)
}
.hero-card:nth-child(1):hover .hero-card-btn{background:rgba(30,156,255,0.18);border-color:rgba(30,156,255,0.5);color:#1e9cff}
.hero-card:nth-child(2):hover .hero-card-btn{background:rgba(201,168,76,0.18);border-color:rgba(201,168,76,0.6);color:#d4b25a}
.hero-card:nth-child(3):hover .hero-card-btn{background:rgba(34,197,150,0.16);border-color:rgba(34,197,150,0.5);color:#22c596}

/* Card footer */
.hero-card-footer{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,0.05);
  position:relative;z-index:1
}
.hero-card:nth-child(1) .hero-card-footer{border-top-color:rgba(30,156,255,0.1)}
.hero-card:nth-child(2) .hero-card-footer{border-top-color:rgba(201,168,76,0.12)}
.hero-card:nth-child(3) .hero-card-footer{border-top-color:rgba(34,197,150,0.12)}
.hero-card:nth-child(3) .hero-card-footer span{color:rgba(34,197,150,0.6)}

.hero-card-footer img{height:20px;width:auto;object-fit:contain;opacity:0.6}
.hero-card-footer span{
  font-family:var(--font-main);font-size:10px;font-weight:700;
  letter-spacing:0.8px;text-transform:uppercase
}
.hero-card:nth-child(1) .hero-card-footer span{color:rgba(30,156,255,0.6)}
.hero-card:nth-child(2) .hero-card-footer span{color:rgba(201,168,76,0.65)}
.hero-card:nth-child(3) .hero-card-footer span{color:rgba(34,197,150,0.65)}

/* Scroll hint */
.hero-scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:8px;color:rgba(255,255,255,0.22);
  font-size:9px;letter-spacing:3px;text-transform:uppercase;font-family:var(--font-main);
  animation:float 2.8s ease-in-out infinite
}
.hero-scroll i{font-size:18px;color:rgba(201,168,76,0.45)}
@keyframes float{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(10px)}
}

/* ============================================================
   SECTIONS
   ============================================================ */
#ueberuns,#team,#karriere{
  padding:82px 0;position:relative;z-index:10
}
#ueberuns{background:#060a10}
#karriere{background:#090c14}
#team{background:#060a10}
#team .container{max-width:1480px}

#ueberuns::after,#karriere::after{
  content:'';position:absolute;bottom:0;left:8%;right:8%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.05) 75%,transparent 100%)
}

/* Labels & Titles */
.sec-label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-main);
  font-size:10px;font-weight:800;
  letter-spacing:4px;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px
}
.sec-label::before{
  content:'';display:block;
  width:22px;height:1px;
  background:var(--blue);opacity:0.5
}
.sec-header .sec-label{
  justify-content:center
}
.sec-header .sec-label::before{display:none}

.sec-title{
  font-family:var(--font-main);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;color:var(--heading);
  margin-bottom:20px;line-height:1.15;
  letter-spacing:-0.02em
}
.sec-title .accent{
  background:linear-gradient(135deg,#0847a0 0%,#1e9cff 45%,#4dc8ff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text
}
.sec-subtitle{
  color:var(--text);font-size:0.94rem;
  max-width:560px;line-height:1.85;margin-bottom:0
}
.sec-header{text-align:center;margin-bottom:68px}
.sec-header .sec-subtitle{margin:0 auto}

.sec-body{color:var(--text);font-size:0.94rem;line-height:1.9;margin-bottom:18px}

/* Values */
.sec-values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.sec-value{
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,0.05);
  border-top:2px solid rgba(30,156,255,0.3);
  border-radius:16px;padding:28px 22px;
  transition:all 0.3s ease
}
.sec-value:nth-child(2){border-top-color:rgba(201,168,76,0.35)}
.sec-value:nth-child(3){border-top-color:rgba(30,178,120,0.3)}
.sec-value:nth-child(4){border-top-color:rgba(130,100,255,0.3)}
.sec-value:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
  border-color:rgba(255,255,255,0.08)
}
.sec-value-icon{
  width:44px;height:44px;border-radius:11px;
  background:rgba(30,156,255,0.08);border:1px solid rgba(30,156,255,0.12);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--blue);margin-bottom:18px;
  transition:transform 0.3s ease
}
.sec-value:nth-child(2) .sec-value-icon{background:rgba(201,168,76,0.08);border-color:rgba(201,168,76,0.15);color:var(--gold)}
.sec-value:nth-child(3) .sec-value-icon{background:rgba(30,178,120,0.08);border-color:rgba(30,178,120,0.15);color:#20b28c}
.sec-value:nth-child(4) .sec-value-icon{background:rgba(130,100,255,0.08);border-color:rgba(130,100,255,0.15);color:#8264ff}
.sec-value:hover .sec-value-icon{transform:scale(1.1) rotate(-6deg)}
.sec-value h4{font-size:0.96rem;color:var(--heading);margin-bottom:10px}
.sec-value p{font-size:0.82rem;color:var(--text-muted);line-height:1.7;margin:0}

/* ── Team ── */
.team-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:16px;row-gap:28px
}
.team-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;text-align:center;
  transition:all 0.35s cubic-bezier(0.34,1.2,0.64,1);
  display:flex;flex-direction:column
}
.team-card:hover{
  border-color:rgba(30,156,255,0.2);
  transform:translateY(-7px);
  box-shadow:0 24px 60px rgba(0,0,0,0.45),0 0 0 1px rgba(30,156,255,0.07)
}
.team-photo-wrap{
  width:100%;aspect-ratio:3/4;overflow:hidden;background:#0a1020
}
.team-photo{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;
  filter:brightness(1);
  transition:transform 0.5s ease
}
.team-card:hover .team-photo{
  transform:scale(1.04)
}
.team-info{padding:16px 14px 18px}
.team-avatar{
  width:100px;height:100px;border-radius:50%;
  background:rgba(30,156,255,0.08);border:1px solid rgba(30,156,255,0.15);
  display:flex;align-items:center;justify-content:center;
  font-size:44px;color:var(--blue);margin:24px auto 0
}
.team-card h4{font-size:0.97rem;color:var(--heading);margin-bottom:5px;font-weight:700}
.team-role{
  display:block;font-size:0.73rem;color:var(--blue);
  font-family:var(--font-main);font-weight:700;
  letter-spacing:0.3px;margin-bottom:0
}
.team-card p{font-size:0.82rem;color:var(--text-muted);line-height:1.7;margin-bottom:18px}
.team-socials{display:flex;justify-content:center;gap:10px}
.team-socials a{
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:14px;text-decoration:none;
  transition:all 0.3s ease
}
.team-socials a:hover{background:rgba(30,156,255,0.1);border-color:rgba(30,156,255,0.25);color:var(--blue)}

/* Team Email */
.team-email{
  display:flex;align-items:center;justify-content:center;
  width:44px;border-radius:10px;
  background:rgba(30,156,255,0.08);border:1px solid rgba(30,156,255,0.2);
  color:var(--blue);font-size:18px;
  text-decoration:none;margin:0 auto;
  overflow:hidden;height:0;border-width:0;opacity:0;
  transition:height 0.3s ease,opacity 0.3s ease,margin 0.3s ease,border-width 0.3s ease
}
.team-card:hover .team-email{height:44px;border-width:1px;opacity:1;margin:0 auto 10px auto}
.team-email:hover{background:var(--blue);color:#fff}

/* ── Karriere ── */
.karriere-intro-block{
  display:grid;grid-template-columns:1fr 1fr;
  gap:52px;margin-bottom:52px;align-items:start
}
.karriere-intro-text h3{
  font-family:var(--font-main);font-size:1.7rem;font-weight:800;
  color:var(--heading);margin-bottom:16px;line-height:1.15;
  letter-spacing:-0.01em
}
.karriere-intro-text p{font-size:0.87rem;color:var(--text);line-height:1.9;margin-bottom:12px}
.karriere-intro-stats{display:flex;flex-direction:column;gap:14px}

.karriere-bubbles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.karriere-bubble{
  background:var(--bg-card);border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;padding:18px 16px;
  display:flex;flex-direction:column;gap:5px;
  transition:border-color 0.25s,transform 0.25s
}
.karriere-bubble:hover{border-color:rgba(30,156,255,0.25);transform:translateY(-2px)}
.karriere-bubble>i{font-size:20px;color:var(--blue);margin-bottom:4px}
.karriere-bubble strong{font-family:var(--font-main);font-size:0.82rem;font-weight:800;color:var(--heading);line-height:1.3}
.karriere-bubble span{font-size:0.74rem;color:var(--text-muted);line-height:1.5}

.karriere-chancen{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-bottom:48px
}
.karriere-chance-card{
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:18px;padding:28px 24px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:transform 0.3s cubic-bezier(0.34,1.2,0.64,1),border-color 0.3s,box-shadow 0.3s
}
.karriere-chance-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgba(30,156,255,0.7) 0%,rgba(30,156,255,0.15) 100%)
}
.karriere-chance-card:nth-child(2)::before{
  background:linear-gradient(90deg,rgba(201,168,76,0.7) 0%,rgba(201,168,76,0.15) 100%)
}
.karriere-chance-card:nth-child(3)::before{
  background:linear-gradient(90deg,rgba(32,178,140,0.7) 0%,rgba(32,178,140,0.15) 100%)
}
.karriere-chance-card:hover{
  transform:translateY(-5px);
  border-color:rgba(30,156,255,0.18);
  box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 0 1px rgba(30,156,255,0.05)
}
.karriere-chance-card:nth-child(2):hover{border-color:rgba(201,168,76,0.18);box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 0 1px rgba(201,168,76,0.05)}
.karriere-chance-card:nth-child(3):hover{border-color:rgba(32,178,140,0.18);box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 0 1px rgba(32,178,140,0.05)}

.karriere-chance-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.karriere-chance-icon{
  width:44px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  transition:transform 0.3s ease
}
.karriere-chance-card:hover .karriere-chance-icon{transform:scale(1.1) rotate(-6deg)}
.karriere-chance-icon.blue{background:rgba(30,156,255,0.1);color:var(--blue);border:1px solid rgba(30,156,255,0.18)}
.karriere-chance-icon.gold{background:rgba(201,168,76,0.1);color:var(--gold);border:1px solid rgba(201,168,76,0.18)}
.karriere-chance-icon.teal{background:rgba(32,178,140,0.1);color:#20b28c;border:1px solid rgba(32,178,140,0.18)}

.karriere-chance-badge{
  font-family:var(--font-main);font-size:0.68rem;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;border-radius:20px;padding:4px 12px
}
.karriere-chance-badge.blue{background:rgba(30,156,255,0.08);color:var(--blue);border:1px solid rgba(30,156,255,0.18)}
.karriere-chance-badge.gold{background:rgba(201,168,76,0.08);color:var(--gold);border:1px solid rgba(201,168,76,0.18)}
.karriere-chance-badge.teal{background:rgba(32,178,140,0.08);color:#20b28c;border:1px solid rgba(32,178,140,0.18)}

.karriere-chance-card h4{font-family:var(--font-main);font-size:1.12rem;font-weight:800;color:var(--heading);margin-bottom:5px}
.karriere-chance-sub{font-size:0.74rem;color:var(--text-muted);margin-bottom:14px}
.karriere-chance-card>p{font-size:0.82rem;color:var(--text);line-height:1.8;margin-bottom:18px}
.karriere-chance-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.karriere-chance-list li{display:flex;align-items:center;gap:8px;font-size:0.81rem;color:rgba(255,255,255,0.68)}
.karriere-chance-list li i{color:var(--blue);font-size:12px;flex-shrink:0}
.karriere-chance-card:nth-child(2) .karriere-chance-list li i{color:var(--gold)}
.karriere-chance-card:nth-child(3) .karriere-chance-list li i{color:#20b28c}

/* Karriere Initiative */
.karriere-initiative{
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:16px;padding:24px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:relative;overflow:visible
}
.karriere-initiative::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold) 0%,rgba(201,168,76,0.2) 100%);
  border-radius:3px 0 0 3px
}
.karriere-initiative h4{font-size:1.08rem;color:var(--heading);margin-bottom:6px}
.karriere-initiative p{font-size:0.87rem;color:var(--text-muted);margin:0}

.karriere-initiative-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:#0d0f14;
  font-family:var(--font-main);font-weight:800;font-size:13px;letter-spacing:0.5px;
  padding:13px 28px;border-radius:50px;white-space:nowrap;
  text-decoration:none;border:none;cursor:pointer;
  transition:all 0.3s ease
}
.karriere-initiative-btn:hover{
  background:var(--gold-light);transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(201,168,76,0.35);color:#0d0f14
}

/* Kontakt dropdown */
.kontakt-dropdown-wrap{position:relative;display:inline-block}
.kontakt-dropdown{
  position:absolute;bottom:calc(100% + 10px);right:0;
  background:var(--bg-card);border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;padding:6px;min-width:240px;
  box-shadow:0 24px 60px rgba(0,0,0,0.7);
  opacity:0;pointer-events:none;
  transform:translateY(8px) scale(0.97);
  transition:opacity 0.2s ease,transform 0.2s ease;z-index:100
}
.kontakt-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.kontakt-dropdown-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:10px;
  text-decoration:none;transition:background 0.15s;color:inherit
}
.kontakt-dropdown-item:hover{background:rgba(255,255,255,0.04)}
.kontakt-dropdown-icon{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.18);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--gold)
}
.kontakt-dropdown-title{font-family:var(--font-main);font-size:13px;font-weight:700;color:var(--heading);line-height:1.2}
.kontakt-dropdown-sub{font-size:11px;color:rgba(255,255,255,0.3);margin-top:2px}

/* ── Über uns ── */
.au-intro{
  display:grid;grid-template-columns:1fr 360px;
  gap:72px;align-items:start;margin-bottom:72px
}
.au-intro-stats{display:flex;flex-direction:column;gap:12px}
.au-bigstat{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:14px;padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;
  transition:border-color 0.25s,transform 0.25s
}
.au-bigstat:hover{border-color:rgba(201,168,76,0.25);transform:translateX(4px)}
.au-bigstat strong{
  font-family:var(--font-display);font-size:2.2rem;font-weight:700;
  color:var(--gold);line-height:1;letter-spacing:0.02em
}
.au-bigstat strong span{font-size:1.3rem}
.au-bigstat>span{font-size:0.81rem;color:rgba(255,255,255,0.7);font-weight:600;font-family:var(--font-main);text-align:right;max-width:150px}

.au-finma{
  background:rgba(30,156,255,0.05);border:1px solid rgba(30,156,255,0.13);
  border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px
}
.au-finma i{font-size:20px;color:var(--blue);flex-shrink:0}
.au-finma strong{display:block;font-family:var(--font-main);font-size:0.83rem;font-weight:800;color:var(--heading);margin-bottom:2px}
.au-finma span{font-size:0.73rem;color:var(--text-muted)}
.au-finma-small{margin-top:20px;padding:11px 16px;border-radius:10px;display:inline-flex;width:auto}
.au-finma-small i{font-size:16px}
.au-finma-small strong{font-size:0.78rem}
.au-finma-small span{font-size:0.70rem}

.au-divider{border:none;border-top:1px solid var(--border);margin:4px 0}

.au-location{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:13px 16px
}
.au-location i{color:var(--gold);font-size:16px;flex-shrink:0}
.au-location strong{display:block;font-family:var(--font-main);font-size:0.80rem;font-weight:800;color:var(--heading);margin-bottom:2px}
.au-location span{font-size:0.73rem;color:var(--text-muted)}

.au-themen{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:12px}
.au-thema{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:20px;padding:36px 30px;display:flex;flex-direction:column;
  position:relative;overflow:hidden
}
.au-thema-gold{
  border-color:rgba(201,168,76,0.2);
  background:linear-gradient(150deg,rgba(201,168,76,0.07) 0%,rgba(201,168,76,0.02) 40%,var(--bg-card) 70%);
  box-shadow:0 4px 32px rgba(201,168,76,0.06)
}
.au-thema-blue{
  border-color:rgba(30,156,255,0.2);
  background:linear-gradient(150deg,rgba(30,156,255,0.07) 0%,rgba(30,156,255,0.02) 40%,var(--bg-card) 70%);
  box-shadow:0 4px 32px rgba(30,156,255,0.06)
}
.au-thema-gold::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(201,168,76,0.15) 100%)
}
.au-thema-blue::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue) 0%,rgba(30,156,255,0.15) 100%)
}
.au-thema-logo-bar{
  display:flex;align-items:center;gap:14px;
  margin-bottom:18px;padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,0.06)
}
.au-thema-logo{height:30px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:0.8}
.au-thema-label{display:block;font-size:9px;font-family:var(--font-main);font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.au-thema-title{font-family:var(--font-main);font-size:1.28rem;font-weight:800;color:var(--heading);margin:0 0 14px;line-height:1.3}
.au-thema-gold .au-thema-title span{color:var(--gold)}
.au-thema-blue .au-thema-title span{color:var(--blue)}
.au-thema-intro{font-size:0.86rem;color:var(--text);line-height:1.85;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,0.05)}
.au-thema-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.au-tag{font-family:var(--font-main);font-size:0.70rem;font-weight:800;letter-spacing:0.5px;border-radius:20px;padding:4px 12px}
.au-tag.gold{background:rgba(201,168,76,0.1);color:var(--gold);border:1px solid rgba(201,168,76,0.22)}
.au-tag.blue{background:rgba(30,156,255,0.08);color:var(--blue);border:1px solid rgba(30,156,255,0.2)}
.au-thema-points{display:flex;flex-direction:column;gap:16px;flex:1;padding-bottom:14px}
.au-point{display:flex;align-items:flex-start;gap:12px}
.au-point>i{font-size:14px;flex-shrink:0;margin-top:3px}
.au-thema-gold .au-point>i{color:var(--gold)}
.au-thema-blue .au-point>i{color:var(--blue)}
.au-point strong{display:block;font-family:var(--font-main);font-size:0.84rem;font-weight:800;color:var(--heading);margin-bottom:3px}
.au-point span{font-size:0.79rem;color:var(--text-muted);line-height:1.7}

.au-thema-footer{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,0.05);
  font-family:var(--font-main);font-size:0.81rem;font-weight:700
}
.au-thema-footer i{font-size:16px}
.au-thema-footer-gold{color:var(--gold)}
.au-thema-footer-blue{color:var(--blue)}
.au-title-gold{color:var(--gold) !important}

/* Karriere highlight */
.karriere-highlight-text{
  display:block;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.07);
  border-left:3px solid rgba(201,168,76,0.45);
  border-radius:10px;padding:10px 22px;
  margin-top:12px;max-width:100%;
  font-size:0.87rem;line-height:1.65;
  color:var(--text) !important
}

/* Karriere logo */
.karriere-card-logo{
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.05);
  display:flex;justify-content:center
}
.karriere-card-logo img{
  height:22px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:0.4
}

/* Team level labels */
.team-level-label{display:flex;align-items:center;gap:16px;margin:44px 0 24px}
.team-level-line{flex:1;height:1px;background:rgba(255,255,255,0.06)}
.team-level-title{
  font-family:var(--font-main);font-size:10px;font-weight:800;
  letter-spacing:4px;text-transform:uppercase;color:var(--blue);white-space:nowrap
}
.team-grid-center{grid-template-columns:repeat(5,1fr);justify-items:center}
.team-grid-center .team-card{max-width:100%}

/* ── FOOTER ── */
#footer{background:#04080e;padding:88px 0 0;margin-top:auto}
.footer-top{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:64px;margin-bottom:64px
}
.footer-brand p{color:var(--text-muted);font-size:0.86rem;line-height:1.8;margin:18px 0 22px;max-width:300px}
.footer-logo-img{height:60px;width:auto;margin-bottom:4px;opacity:0.9}
.footer-contact-item{
  display:flex;align-items:center;gap:10px;
  color:var(--text-muted);font-size:0.82rem;margin-bottom:9px
}
.footer-contact-item i{color:var(--blue);font-size:13px;flex-shrink:0}
.footer-col h4{
  font-family:var(--font-main);font-size:9.5px;font-weight:800;
  color:var(--text-muted);margin-bottom:24px;letter-spacing:3px;text-transform:uppercase
}
.footer-col ul li{margin-bottom:12px}
.footer-col ul li a{
  color:rgba(255,255,255,0.4);font-size:0.85rem;
  transition:color var(--transition);display:flex;align-items:center;gap:8px
}
.footer-col ul li a:hover{color:var(--white)}
.footer-col ul li a i{color:var(--blue);font-size:12px;opacity:0.7}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  font-size:0.78rem;color:var(--text-muted);
  border-top:1px solid rgba(255,255,255,0.04);
  padding:24px 0;flex-wrap:wrap;gap:10px
}
@media(max-width:600px){.footer-bottom{flex-direction:column;text-align:center}}

/* ── SCROLL TOP ── */
.scroll-top{
  position:fixed;bottom:28px;right:28px;z-index:999;
  width:42px;height:42px;border-radius:10px;
  background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:20px;
  opacity:0;transform:translateY(10px);
  transition:all var(--transition);pointer-events:none
}
.scroll-top.active{opacity:1;transform:translateY(0);pointer-events:all}
.scroll-top:hover{background:var(--gold);color:#0d0f14;border-color:var(--gold)}

/* ── MOBILE ── */
@media(max-width:900px){
  .mobile-nav-toggle{display:flex}
  .navmenu{
    display:none;position:fixed;
    top:var(--nav-h);left:0;right:0;bottom:0;
    background:rgba(4,8,14,0.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    overflow-y:auto;
    padding:28px;
    z-index:9998
  }
  .navmenu.open{display:block}
  .navmenu ul{flex-direction:column;gap:0;align-items:stretch}
  .navmenu ul li a{padding:14px 16px;border-radius:10px;font-size:14px;letter-spacing:1px}
  .navmenu ul li a::after{display:none}
  /* Hero — kompakt auf Mobile (≈35% Höhe) */
  #hero{padding:calc(var(--nav-h) + 20px) 0 28px;justify-content:flex-start;min-height:unset}
  .hero-cards{grid-template-columns:1fr;gap:8px;padding:0 16px}
  .hero-card{padding:13px 25px}
  .hero-card-logo-wrap{display:flex !important;height:auto;min-height:unset !important;margin-bottom:8px;padding:0}
  .hero-card-logo-wrap img{max-height:32px;width:auto}
  .hero-card-subtitle{font-size:14px;letter-spacing:3px}
  .hero-card-tags{display:none}
  .hero-card-desc{font-size:0.78rem;line-height:1.6;margin:0}
  .hero-card-footer{display:none}
  .hero-card-body{padding-top:8px;gap:8px;flex:unset;border-top:none}
  .hero-card-btn{padding:8px 13px;font-size:10px;margin-top:4px;margin-bottom:0}
  .hero-scroll{display:none}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .sec-values{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .karriere-intro-block{grid-template-columns:1fr}
  .karriere-chancen{grid-template-columns:1fr}
  .karriere-initiative{flex-direction:column;text-align:center}
  .au-intro{grid-template-columns:1fr;gap:40px}
  .au-themen{grid-template-columns:1fr}
  #ueberuns,#team,#karriere{padding:60px 0}
}
@media(max-width:560px){
  .sec-values{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .au-bigstat{flex-direction:column;align-items:flex-start;gap:4px}
  .au-bigstat>span{text-align:left}
}

/* misc legacy */
.sec-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.sec-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px 16px;text-align:center;transition:border-color 0.25s}
.sec-stat:hover{border-color:rgba(30,156,255,0.2);transform:translateY(-2px)}
.sec-stat-num{display:block;font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--blue);line-height:1;margin-bottom:6px}
.sec-stat-lbl{font-size:0.73rem;color:var(--text-muted)}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px}

/* ============================================================
   ÜBER UNS v3 — kompaktes Redesign
   ============================================================ */

/* Top: Text links / Stats rechts */
.au3-top{
  display:grid;grid-template-columns:1fr 340px;
  gap:60px;align-items:start;margin-bottom:48px
}
.au3-top-right{display:flex;flex-direction:column;gap:14px}

/* Stats als kompakte 3-Spalten-Leiste */
.au3-stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px
}
.au3-stat{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;padding:14px 12px;text-align:center;
  transition:border-color 0.25s,transform 0.25s
}
.au3-stat:hover{border-color:rgba(201,168,76,0.25);transform:translateY(-2px)}
.au3-stat strong{
  display:block;font-family:var(--font-display);
  font-size:1.55rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:4px
}
.au3-stat strong span{font-size:1rem}
.au3-stat>span{font-size:0.70rem;color:var(--text-muted);font-family:var(--font-main);font-weight:600;line-height:1.3}

/* Standorte kompakt — nebeneinander */
.au3-locs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.au3-loc{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:6px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:14px 12px
}
.au3-loc i{color:var(--gold);font-size:16px;flex-shrink:0}
.au3-loc strong{display:block;font-family:var(--font-main);font-size:0.76rem;font-weight:800;color:var(--heading);margin-bottom:1px}
.au3-loc span{font-size:0.70rem;color:var(--text-muted);line-height:1.4}

/* Themen: horizontale Bänder */
.au3-themen{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}

.au3-thema{
  display:flex;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);
  transition:box-shadow 0.3s,border-color 0.3s;
  min-height:260px
}
.au3-gold{
  border-color:rgba(201,168,76,0.2);
  box-shadow:0 2px 24px rgba(201,168,76,0.05)
}
.au3-gold:hover{border-color:rgba(201,168,76,0.4);box-shadow:0 8px 40px rgba(201,168,76,0.1)}
.au3-blue{
  border-color:rgba(30,156,255,0.18);
  box-shadow:0 2px 24px rgba(30,156,255,0.05)
}
.au3-blue:hover{border-color:rgba(30,156,255,0.38);box-shadow:0 8px 40px rgba(30,156,255,0.1)}

/* Linkes Panel — farbig getönt */
.au3-panel-left{
  width:260px;flex-shrink:0;
  padding:28px 24px;
  display:flex;flex-direction:column;gap:10px;
  border-right:1px solid rgba(255,255,255,0.05);
  align-self:stretch
}
.au3-gold .au3-panel-left{background:linear-gradient(160deg,rgba(201,168,76,0.1) 0%,rgba(201,168,76,0.03) 100%)}
.au3-blue .au3-panel-left{background:linear-gradient(160deg,rgba(30,156,255,0.1) 0%,rgba(30,156,255,0.03) 100%)}

.au3-panel-left img{height:26px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:0.8;margin-bottom:2px}
.au3-label{font-family:var(--font-main);font-size:9px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted)}
.au3-panel-left h3{font-family:var(--font-main);font-size:1rem;font-weight:800;color:var(--heading);line-height:1.3;margin:0}
.au3-gold .au3-panel-left h3 span{color:var(--gold)}
.au3-blue .au3-panel-left h3 span{color:var(--blue)}
.au3-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.au3-panel-foot{
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-family:var(--font-main);font-size:0.75rem;font-weight:700;
  display:flex;align-items:center;gap:7px;
  margin-top:0
}
.au3-link-btn{
  display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;
  font-family:var(--font-main);font-size:0.72rem;font-weight:700;
  letter-spacing:0.6px;text-transform:uppercase;
  padding:9px 18px;border-radius:8px;
  text-decoration:none;margin-top:18px;
  transition:all 0.2s ease;
  cursor:pointer
}
.au3-link-btn i{font-size:12px;transition:transform 0.2s ease}
.au3-link-btn:hover i{transform:translate(2px,-2px)}
.au3-link-gold{
  color:#0d0f14;
  background:var(--gold);
  border:1px solid var(--gold);
  box-shadow:0 2px 12px rgba(201,168,76,0.35)
}
.au3-link-gold:hover{
  background:var(--gold-light);
  border-color:var(--gold-light);
  box-shadow:0 4px 20px rgba(201,168,76,0.5);
  color:#0d0f14
}
.au3-link-blue{
  color:#fff;
  background:var(--blue);
  border:1px solid var(--blue);
  box-shadow:0 2px 12px rgba(30,156,255,0.35)
}
.au3-link-blue:hover{
  background:#3aadff;
  border-color:#3aadff;
  box-shadow:0 4px 20px rgba(30,156,255,0.5);
  color:#fff
}
.au3-foot-gold{color:var(--gold)}
.au3-foot-blue{color:var(--blue)}

/* Rechtes Panel */
.au3-panel-right{
  flex:1;padding:28px 28px;
  background:var(--bg-card);
  display:flex;flex-direction:column;gap:16px
}
.au3-intro{font-size:0.84rem;color:var(--text);line-height:1.8;margin:0}

.au3-points{display:flex;flex-direction:column;gap:10px}
.au3-point{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04)
}
.au3-point>i{font-size:13px;flex-shrink:0;margin-top:3px}
.au3-point-gold>i{color:var(--gold)}
.au3-point-blue>i{color:var(--blue)}
.au3-point strong{display:block;font-family:var(--font-main);font-size:0.82rem;font-weight:800;color:var(--heading);margin-bottom:2px}
.au3-point span{font-size:0.77rem;color:var(--text-muted);line-height:1.65}

/* Kernwerte — horizontale Leiste */
.au3-values{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  margin-top:14px
}
.au3-val{
  display:flex;align-items:flex-start;gap:14px;
  padding:22px 20px;
  border-right:1px solid var(--border);
  transition:background 0.25s
}
.au3-val:last-child{border-right:none}
.au3-val:hover{background:rgba(255,255,255,0.02)}
.au3-val-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--c,rgba(30,156,255,0.12));
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--ci,var(--blue));
  transition:transform 0.3s
}
.au3-val:hover .au3-val-icon{transform:scale(1.1) rotate(-5deg)}
.au3-val h4{font-size:0.84rem;color:var(--heading);margin-bottom:5px;font-weight:700}
.au3-val p{font-size:0.76rem;color:var(--text-muted);line-height:1.65;margin:0}

@media(max-width:1024px){
  .au3-top{grid-template-columns:1fr;gap:32px}
  .au3-panel-left{width:220px}
  .au3-locs{grid-template-columns:1fr 1fr}
  .au3-values{grid-template-columns:1fr 1fr}
  .au3-val{border-right:none;border-bottom:1px solid var(--border)}
  .au3-val:nth-child(odd){border-right:1px solid var(--border)}
  .au3-val:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:700px){
  .au3-thema{flex-direction:column;min-height:unset}
  .au3-panel-left{width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,0.06);align-self:auto}
  .au3-tags{grid-template-columns:1fr 1fr}
  .au3-values{grid-template-columns:1fr}
  .au3-val{border-right:none !important;border-bottom:1px solid var(--border)}
  .au3-val:last-child{border-bottom:none}
}

/* ============================================================
   KARRIERE v3 — kompaktes Redesign
   ============================================================ */

/* Intro: volle Breite, Features darunter */
.kar3-intro{
  margin-bottom:40px
}
.kar3-intro-text h3{
  font-family:var(--font-main);font-size:1.5rem;font-weight:800;
  color:var(--heading);margin-bottom:14px;line-height:1.2;letter-spacing:-0.01em
}
.kar3-intro-text p{font-size:0.86rem;color:var(--text);line-height:1.9;margin-bottom:10px}

/* 4 Features als horizontaler 4-Spalten-Strip */
.kar3-features{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin-top:18px
}
.kar3-feature{
  display:flex;align-items:start;gap:14px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;
  transition:border-color 0.25s,transform 0.25s
}
.kar3-feature:hover{border-color:rgba(30,156,255,0.2);transform:translateX(4px)}
.kar3-feature>i{font-size:19px;color:var(--blue);flex-shrink:0;width:24px;text-align:center}
.kar3-feature strong{display:block;font-family:var(--font-main);font-size:0.83rem;font-weight:800;color:var(--heading);margin-bottom:2px}
.kar3-feature span{font-size:0.74rem;color:var(--text-muted)}

/* 3 Karten */
.kar3-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-bottom:40px
}
.kar3-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:16px;padding:22px 20px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:transform 0.3s cubic-bezier(0.34,1.2,0.64,1),box-shadow 0.3s,border-color 0.3s
}
.kar3-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px
}
.kar3-card-blue::before{background:linear-gradient(90deg,var(--blue) 0%,rgba(30,156,255,0.1) 100%)}
.kar3-card-gold::before{background:linear-gradient(90deg,var(--gold) 0%,rgba(201,168,76,0.1) 100%)}
.kar3-card-teal::before{background:linear-gradient(90deg,#20b28c 0%,rgba(32,178,140,0.1) 100%)}

.kar3-card-blue{border-color:rgba(30,156,255,0.15)}
.kar3-card-gold{border-color:rgba(201,168,76,0.18)}
.kar3-card-teal{border-color:rgba(32,178,140,0.15)}

.kar3-card:hover{transform:translateY(-4px)}
.kar3-card-blue:hover{box-shadow:0 16px 48px rgba(30,156,255,0.12);border-color:rgba(30,156,255,0.3)}
.kar3-card-gold:hover{box-shadow:0 16px 48px rgba(201,168,76,0.1);border-color:rgba(201,168,76,0.35)}
.kar3-card-teal:hover{box-shadow:0 16px 48px rgba(32,178,140,0.1);border-color:rgba(32,178,140,0.3)}

/* Card Head: Icon + Titel + Badge in einer Zeile */
.kar3-head{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.05)
}
.kar3-head-text{flex:1;min-width:0}
.kar3-head-text h4{font-family:var(--font-main);font-size:0.95rem;font-weight:800;color:var(--heading);margin-bottom:3px}
.kar3-head .karriere-chance-badge{flex-shrink:0;margin-top:2px}

.kar3-desc{font-size:0.81rem;color:var(--text);line-height:1.75;margin-bottom:14px}

/* Checkliste als 2×2 Grid */
.kar3-list{
  display:grid;grid-template-columns:1fr 1fr;
  gap:7px 10px;margin:0 0 16px;flex:1
}
.kar3-list li{
  display:flex;align-items:flex-start;gap:6px;
  font-size:0.77rem;color:rgba(255,255,255,0.65);line-height:1.4
}
.kar3-card-blue .kar3-list li i{color:var(--blue);font-size:11px;flex-shrink:0;margin-top:2px}
.kar3-card-gold .kar3-list li i{color:var(--gold);font-size:11px;flex-shrink:0;margin-top:2px}
.kar3-card-teal .kar3-list li i{color:#20b28c;font-size:11px;flex-shrink:0;margin-top:2px}

/* Karten-Logo */
.kar3-foot{
  margin-top:auto;padding-top:22px;
  border-top:1px solid rgba(255,255,255,0.05);
  display:flex;justify-content:center
}
.kar3-foot img{height:20px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:0.4}

@media(max-width:1024px){
  .kar3-features{grid-template-columns:1fr 1fr}
  .kar3-cards{grid-template-columns:1fr}
}
@media(max-width:600px){
  .kar3-features{grid-template-columns:1fr}
}
@media(max-width:600px){
  .kar3-list{grid-template-columns:1fr}
}

/* ============================================================
   21ST.DEV — INSPIRED OVERRIDES
   ============================================================ */

/* ── Hero Cards: Aurora / Mesh Gradient (21st.dev card aesthetic) ── */
.hero-card:nth-child(1){
  background:#0b111f;
  border-color:rgba(255,255,255,0.08)
}
.hero-card:nth-child(1)::before{
  background:
    radial-gradient(ellipse 70% 55% at 30% 0%,rgba(30,156,255,0.45) 0%,transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(0,210,200,0.2) 0%,transparent 60%);
  opacity:0.55
}
.hero-card:nth-child(1):hover::before{opacity:0.85}
.hero-card:nth-child(1):hover{
  border-color:rgba(30,156,255,0.3);
  box-shadow:0 24px 64px rgba(0,0,0,0.6),0 0 0 1px rgba(30,156,255,0.12)
}

.hero-card:nth-child(2){
  background:#120e04;
  border-color:rgba(255,255,255,0.08)
}
.hero-card:nth-child(2)::before{
  background:
    radial-gradient(ellipse 70% 55% at 30% 0%,rgba(220,170,40,0.5) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 75%,rgba(255,100,30,0.25) 0%,transparent 60%);
  opacity:0.55
}
.hero-card:nth-child(2):hover::before{opacity:0.85}
.hero-card:nth-child(2):hover{
  border-color:rgba(201,168,76,0.3);
  box-shadow:0 24px 64px rgba(0,0,0,0.6),0 0 0 1px rgba(201,168,76,0.12)
}

/* Card body top border matches aurora */
.hero-card:nth-child(1) .hero-card-body{border-top-color:rgba(30,156,255,0.15)}
.hero-card:nth-child(2) .hero-card-body{border-top-color:rgba(201,168,76,0.15)}
.hero-card:nth-child(3) .hero-card-body{border-top-color:rgba(34,197,150,0.15)}

/* ── Karriere Cards: pure 21st.dev minimal (no color theming, just clean dark) ── */
.kar3-card::before{display:none}
.kar3-card{
  background:#111318;
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:none
}
.kar3-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 12px 40px rgba(0,0,0,0.5)
}
.kar3-card-blue:hover,.kar3-card-gold:hover,.kar3-card-teal:hover{
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 12px 40px rgba(0,0,0,0.5)
}
.kar3-head{border-bottom-color:rgba(255,255,255,0.06)}
.kar3-foot{border-top-color:rgba(255,255,255,0.05)}

/* ── Feature Items: kein Box-Styling, nur Trennlinien ── */
.kar3-feature{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,0.05);
  border-radius:0;
  padding:13px 0
}
.kar3-feature:last-child{border-bottom:none}
.kar3-feature:hover{
  background:transparent;
  transform:none
}
.kar3-feature>i{color:rgba(201,168,76,0.7);width:20px}

/* ── Values Strip: reine Border-Separator ohne Box ── */
.au3-values{
  background:transparent;
  border:none;
  border-top:1px solid rgba(255,255,255,0.06);
  border-radius:0;
  margin-top:32px
}
.au3-val{
  border-right:1px solid rgba(255,255,255,0.06);
  padding:24px 20px
}
.au3-val:last-child{border-right:none}
.au3-val:hover{background:transparent}

/* ── Abschnitt-Labels: cleaner, kein Dekorationsstrich ── */
.sec-label::before{display:none}
.sec-label{letter-spacing:3px}

/* ── Sektion-Header schlicht wie 21st.dev ── */
.sec-header{margin-bottom:52px}
.sec-header .sec-subtitle{
  max-width:620px;
  font-size:0.92rem
}

/* ── BentoGrid-style Karriere Cards ── */

/* Dot-texture overlay (shows on hover) */
.bkar-dots{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at center,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:4px 4px;
  opacity:0;transition:opacity 0.3s ease
}
.kar3-card:hover .bkar-dots{opacity:1}

/* Top row: icon left, badge right */
.bkar-row-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px
}

/* Icon box: tighter, rounder */
.karriere-chance-icon{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:all 0.3s ease
}
.kar3-card:hover .karriere-chance-icon{
  filter:brightness(1.2);transform:scale(1.08)
}

/* Body: title + meta + desc stacked */
.bkar-body{display:flex;flex-direction:column;gap:5px;flex:1}
.bkar-body h4{
  font-family:var(--font-main);font-size:0.96rem;font-weight:700;
  color:var(--heading);margin:0;letter-spacing:0.2px;
  tracking-tight:true
}
.bkar-meta{
  font-size:0.74rem;color:var(--text-muted);line-height:1.4;
  margin-bottom:6px
}
.bkar-body .kar3-desc{
  font-size:0.81rem;color:var(--text);line-height:1.75;margin:0
}

/* Bottom row: tags left, cta right */
.bkar-row-bot{display:none}
.bkar-tags{display:flex;flex-wrap:wrap;gap:5px}
.bkar-tags span{
  font-size:0.69rem;color:var(--text-muted);
  background:rgba(255,255,255,0.06);
  border-radius:6px;padding:3px 9px;
  backdrop-filter:blur(4px);
  transition:background 0.2s ease
}
.bkar-tags span:hover{background:rgba(255,255,255,0.13)}

.bkar-cta{display:none}

/* Gradient border shimmer on hover */
.kar3-card::after{
  content:'';position:absolute;inset:0;z-index:-1;
  border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,0.07) 50%,transparent 70%);
  opacity:0;transition:opacity 0.3s ease
}
.kar3-card:hover::after{opacity:1}

/* Reset old kar3-head / kar3-list styles (no longer in use) */
.kar3-head{display:none}
.kar3-list{display:none}

/* Responsive */
@media(max-width:900px){
  .bkar-cta{display:none}
}

/* ── Page-wide fixed grid (mouse-reveal only) ── */
.pgrid-wrap{
  position:fixed;inset:0;z-index:-1;pointer-events:none
}
.pgrid-base,.pgrid-reveal{
  position:absolute;inset:0;width:100%;height:100%;display:block
}
.pgrid-base{opacity:0}
.pgrid-reveal{
  opacity:0.32;
  -webkit-mask-image:radial-gradient(300px circle at -600px -600px,black,transparent);
  mask-image:radial-gradient(300px circle at -600px -600px,black,transparent)
}

/* ── Section grid: animated inside each section (above bg, below content) ── */
@keyframes grid-shift{
  from{background-position:0 0}
  to{background-position:40px 40px}
}
#ueberuns::before,
#karriere::before,
#team::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size:40px 40px;
  animation:grid-shift 1.33s linear infinite
}

/* ── Cinematic title style — from "Track the journey" / text-silver-matte ── */
.sec-title-film{
  background:linear-gradient(175deg,#ffffff 20%,rgba(255,255,255,0.38) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transform:translateZ(0);
  filter:
    drop-shadow(0 10px 28px rgba(255,255,255,0.10))
    drop-shadow(0 2px 5px rgba(255,255,255,0.06))
}

/* ── BentoGrid-style Stats & Locations — single column ── */
.au3-stats-row{
  display:flex;flex-direction:column;gap:8px
}
.au3-stat{
  background:#0b1220;border:1px solid rgba(30,156,255,0.12);
  border-radius:12px;padding:14px 18px;text-align:left;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;
  transition:transform 0.3s ease,border-color 0.3s ease
}
.au3-stat::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at center,rgba(30,156,255,0.04) 1px,transparent 1px);
  background-size:4px 4px;opacity:0;transition:opacity 0.3s ease
}
.au3-stat:hover::before{opacity:1}
.au3-stat:hover{transform:translateY(-2px);border-color:rgba(30,156,255,0.35)}
.au3-stat strong{
  font-family:var(--font-display);font-size:1.55rem;font-weight:700;
  color:var(--blue);line-height:1;margin:0
}
.au3-stat strong span{font-size:1rem}
.au3-stat>span{font-size:0.74rem;color:var(--text-muted);font-family:var(--font-main);font-weight:600;line-height:1.3;text-align:right}

.au3-locs{display:flex;flex-direction:column;gap:8px}
.au3-loc{
  background:#0b1220;border:1px solid rgba(30,156,255,0.12);
  border-radius:12px;padding:14px 18px;
  display:flex;flex-direction:row;align-items:center;
  text-align:left;gap:14px;
  position:relative;overflow:hidden;
  transition:transform 0.3s ease,border-color 0.3s ease
}
.au3-loc::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at center,rgba(30,156,255,0.04) 1px,transparent 1px);
  background-size:4px 4px;opacity:0;transition:opacity 0.3s ease
}
.au3-loc:hover::before{opacity:1}
.au3-loc:hover{transform:translateY(-2px);border-color:rgba(30,156,255,0.35)}
.au3-loc i{font-size:17px;color:var(--blue);flex-shrink:0;align-self:flex-start;margin-top:2px}
.au3-loc div{display:flex;flex-direction:column;gap:3px}
.au3-loc strong{display:block;font-family:var(--font-main);font-size:0.82rem;font-weight:800;color:var(--heading);margin:0}
.au3-loc span{font-size:0.72rem;color:var(--text-muted);line-height:1.4}

/* Override responsive rule that forced 2-col grid */
@media(max-width:1024px){
  .au3-locs{grid-template-columns:unset}
}
