:root{--bg:#040310;--panel:rgba(8,10,30,.86);--text:#f4f6ff;--muted:#c7cdef;--line:rgba(162,136,255,.28);--violet:#d370ff;--blue:#4bc0ff;--gold:#f2c66d;--green:#62ffc3;--red:#ff738f;--max:1320px;--glow:0 0 30px rgba(146,90,255,.28),0 0 65px rgba(62,178,255,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 8%,rgba(219,70,255,.24),transparent 28%),radial-gradient(circle at 90% 10%,rgba(75,192,255,.20),transparent 28%),linear-gradient(180deg,#02010a,#08051b 52%,#03020a);line-height:1.62}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.023) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at 50% 18%,black 0%,transparent 74%)}
a{color:inherit;text-decoration:none}.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(20px);background:rgba(2,2,12,.82);border-bottom:1px solid var(--line)}.nav-inner{max-width:var(--max);margin:0 auto;padding:12px 22px;display:flex;gap:10px;overflow-x:auto}.nav-inner a{white-space:nowrap;color:var(--muted);padding:10px 14px;border-radius:999px;border:1px solid transparent;background:rgba(255,255,255,.02);font-size:.93rem;font-weight:700}.nav-inner a:hover{color:#fff;border-color:var(--line);box-shadow:var(--glow)}
.hero{position:relative;min-height:76vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}.hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(4,2,12,.76)),url('assets/vires_systems_bg.jpg') center/cover no-repeat;filter:saturate(1.18) contrast(1.04)}.hero-content{position:relative;z-index:2;width:100%;padding:82px 0}.hero-card{max-width:980px;padding:28px;border-radius:30px;background:linear-gradient(180deg,rgba(8,10,30,.72),rgba(11,10,34,.88));border:1px solid rgba(195,146,255,.32);box-shadow:var(--glow)}
.brandline{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.brandmark{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;border:1px solid rgba(205,140,255,.55);background:linear-gradient(135deg,rgba(74,192,255,.20),rgba(180,82,255,.18));box-shadow:0 0 30px rgba(130,80,255,.24);font-size:1.6rem}
.kicker{display:inline-block;margin-bottom:10px;color:#e5beff;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:900}h1{margin:0;font-size:clamp(2.6rem,6.5vw,5.9rem);line-height:.96;letter-spacing:-.06em;text-shadow:0 0 25px rgba(169,90,255,.30),0 0 55px rgba(75,192,255,.10)}h2{margin:0 0 12px;font-size:clamp(1.7rem,4vw,3rem);line-height:1.08;letter-spacing:-.04em}h3{margin:0 0 10px;color:#fff;font-size:1.28rem}p{margin:0 0 13px}.lead{max-width:900px;margin-top:18px;color:var(--muted);font-size:1.08rem}.muted{color:var(--muted)}
main{padding:52px 0 94px}section{margin-bottom:48px;scroll-margin-top:88px}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.panel{border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(12,14,40,.92),rgba(7,8,24,.95));padding:22px;box-shadow:var(--glow)}.panel.gold{border-color:rgba(242,198,109,.30);background:linear-gradient(180deg,rgba(242,198,109,.10),rgba(8,10,28,.95))}.panel.green{border-color:rgba(102,255,195,.26)}.panel.red{border-color:rgba(255,115,143,.30)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:999px;border:1px solid rgba(193,140,255,.28);background:linear-gradient(135deg,rgba(86,188,255,.12),rgba(175,88,255,.12));color:#fff;font-weight:800;box-shadow:var(--glow)}.btn.gold{border-color:rgba(242,198,109,.40);background:rgba(242,198,109,.12);color:#ffeab0}.btn.ghost{background:rgba(255,255,255,.04)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.note{margin-top:14px;padding:12px 14px;border-radius:14px;border-left:3px solid var(--blue);background:rgba(75,192,255,.08);color:#dcefff}.warning{margin-top:14px;padding:12px 14px;border-radius:14px;border-left:3px solid var(--red);background:rgba(255,115,143,.08);color:#ffe3ea}
.profession-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.profession-btn{min-height:72px;border-radius:18px;border:1px solid rgba(173,135,255,.24);background:linear-gradient(180deg,rgba(18,19,50,.90),rgba(8,10,24,.94));padding:11px 12px;display:flex;align-items:center;gap:10px;transition:.18s ease;box-shadow:0 0 16px rgba(117,86,255,.10)}.profession-btn span{min-width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,rgba(75,192,255,.18),rgba(175,88,255,.20));border:1px solid rgba(143,220,255,.28);color:#fff;font-weight:900}.profession-btn:hover{transform:translateY(-2px);border-color:rgba(206,154,255,.38);box-shadow:var(--glow)}
.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.role-box{border-radius:18px;border:1px solid rgba(173,135,255,.18);background:rgba(255,255,255,.03);padding:14px}.role-box strong{display:block;margin-bottom:6px;color:#fff}.role-box p{margin:0;color:var(--muted);font-size:.95rem}.tag{display:inline-flex;padding:7px 11px;border-radius:999px;border:1px solid rgba(242,198,109,.28);background:rgba(242,198,109,.08);color:#ffeab4;font-size:.8rem;font-weight:900}
ul,ol{margin:8px 0 0 20px;padding:0}li{margin:6px 0;color:var(--muted)}strong{color:#fff}.backrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}footer{border-top:1px solid var(--line);background:rgba(0,0,0,.28);padding:34px 0;color:var(--muted)}
@media(max-width:1100px){.grid.two,.grid.three,.role-grid{grid-template-columns:1fr}.profession-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.hero{min-height:auto}.hero-content{padding:70px 0}.hero-card{padding:20px}h1{font-size:2.8rem}.profession-buttons{grid-template-columns:1fr}}


/* Premium Motion Layer */
body{
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(211,112,255,.18), transparent 12%),
    radial-gradient(circle at 78% 18%, rgba(75,192,255,.14), transparent 12%),
    radial-gradient(circle at 50% 82%, rgba(98,255,195,.08), transparent 16%),
    radial-gradient(circle at 36% 46%, rgba(255,255,255,.055), transparent 2px),
    radial-gradient(circle at 62% 36%, rgba(255,255,255,.045), transparent 2px),
    radial-gradient(circle at 82% 70%, rgba(255,255,255,.05), transparent 2px);
  animation: auroraDrift 18s ease-in-out infinite alternate;
  opacity:.9;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.16), transparent 4%),
    conic-gradient(from 0deg at 50% 42%, transparent 0deg, rgba(211,112,255,.12) 55deg, transparent 105deg, rgba(75,192,255,.10) 190deg, transparent 250deg, rgba(242,198,109,.06) 310deg, transparent 360deg);
  mix-blend-mode:screen;
  opacity:.65;
  animation: slowRotate 28s linear infinite;
}
.hero-bg{
  transform:scale(1.04);
  animation: heroBreath 14s ease-in-out infinite alternate;
}
.hero-card{
  position:relative;
  overflow:hidden;
  animation: cardFloat 7s ease-in-out infinite alternate;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.04) 36%, rgba(255,255,255,.20) 48%, rgba(211,112,255,.09) 56%, transparent 70%);
  transform:translateX(-120%);
  animation: heroShimmer 8s ease-in-out infinite;
}
.hero-card > *{
  position:relative;
  z-index:1;
}
.brandmark{
  animation: brandPulse 3.8s ease-in-out infinite;
}
.btn,.profession-btn,.panel{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, filter .25s ease;
}
.btn:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.08);
}
.panel{
  position:relative;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(circle at 18% 0%, rgba(75,192,255,.08), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(211,112,255,.10), transparent 30%);
  opacity:.65;
}
.panel > *{
  position:relative;
  z-index:1;
}
.panel:hover{
  transform:translateY(-4px);
  border-color:rgba(205,140,255,.42);
  box-shadow:0 0 34px rgba(146,90,255,.30),0 0 80px rgba(62,178,255,.14);
}
.profession-btn{
  position:relative;
  overflow:hidden;
}
.profession-btn::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.15) 42%, transparent 58%);
  transform:translateX(-140%);
  transition:transform .55s ease;
}
.profession-btn:hover::after{
  transform:translateX(140%);
}
.profession-btn:hover span{
  box-shadow:0 0 20px rgba(75,192,255,.32),0 0 38px rgba(211,112,255,.20);
}
.role-box{
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.role-box:hover{
  transform:translateY(-3px);
  border-color:rgba(143,220,255,.36);
  background:rgba(255,255,255,.055);
}
.hero h1{
  background:linear-gradient(90deg,#ffffff 0%,#e8eaff 28%,#d370ff 52%,#7adfff 74%,#ffffff 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:titleGlow 7s ease-in-out infinite alternate;
}
.kicker{
  text-shadow:0 0 14px rgba(211,112,255,.45);
}
section{
  animation:sectionFade .8s ease both;
}
.profession-card,.profession-list .panel{
  border-image:linear-gradient(135deg, rgba(75,192,255,.36), rgba(211,112,255,.32), rgba(242,198,109,.16)) 1;
}
.scanline{
  position:fixed;
  left:0;
  right:0;
  top:-20%;
  height:20%;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(180deg, transparent, rgba(114,243,255,.035), transparent);
  animation:scanMove 9s linear infinite;
}
.motion-orb{
  position:fixed;
  width:240px;
  height:240px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  filter:blur(18px);
  opacity:.18;
  background:radial-gradient(circle, rgba(211,112,255,.72), transparent 62%);
  animation:orbMove 16s ease-in-out infinite alternate;
}
.motion-orb.two{
  width:320px;
  height:320px;
  right:4%;
  left:auto;
  top:62%;
  background:radial-gradient(circle, rgba(75,192,255,.55), transparent 64%);
  animation-duration:20s;
  animation-delay:-4s;
}
.reveal{
  opacity:0;
  transform:translateY(18px);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  transition:opacity .7s ease, transform .7s ease;
}
@keyframes auroraDrift{
  0%{transform:translate3d(-1.5%, -1%, 0) scale(1);}
  100%{transform:translate3d(1.5%, 1%, 0) scale(1.06);}
}
@keyframes slowRotate{
  from{transform:rotate(0deg) scale(1.08);}
  to{transform:rotate(360deg) scale(1.08);}
}
@keyframes heroBreath{
  from{transform:scale(1.04) translateY(0);}
  to{transform:scale(1.09) translateY(-10px);}
}
@keyframes cardFloat{
  from{transform:translateY(0);}
  to{transform:translateY(-7px);}
}
@keyframes heroShimmer{
  0%,58%{transform:translateX(-130%);}
  76%,100%{transform:translateX(130%);}
}
@keyframes brandPulse{
  0%,100%{box-shadow:0 0 25px rgba(130,80,255,.23), inset 0 0 18px rgba(75,192,255,.10);}
  50%{box-shadow:0 0 42px rgba(211,112,255,.36), 0 0 70px rgba(75,192,255,.18), inset 0 0 26px rgba(255,255,255,.10);}
}
@keyframes titleGlow{
  from{background-position:0% center; filter:drop-shadow(0 0 12px rgba(211,112,255,.18));}
  to{background-position:100% center; filter:drop-shadow(0 0 20px rgba(75,192,255,.24));}
}
@keyframes sectionFade{
  from{opacity:.2; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes scanMove{
  from{top:-24%;}
  to{top:120%;}
}
@keyframes orbMove{
  from{left:2%; top:18%; transform:scale(1);}
  to{left:12%; top:28%; transform:scale(1.15);}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .reveal{
    opacity:1;
    transform:none;
  }
}


/* Berufliche Brückenlogik */
.bridge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.bridge-card{border:1px solid rgba(173,135,255,.20);border-radius:18px;background:rgba(255,255,255,.035);padding:14px;position:relative;overflow:hidden}
.bridge-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 0%,rgba(75,192,255,.08),transparent 38%),radial-gradient(circle at 100% 0%,rgba(211,112,255,.08),transparent 34%);pointer-events:none}
.bridge-card>*{position:relative;z-index:1}
.bridge-card strong{display:block;color:#fff;margin-bottom:6px}
.bridge-card p{color:var(--muted);margin:0}
.mapping-table{display:grid;gap:10px;margin-top:16px}
.mapping-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid rgba(173,135,255,.18);border-radius:18px;background:rgba(255,255,255,.03);padding:12px;align-items:center}
.mapping-row span{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:800}
.mapping-row small{color:var(--muted);font-size:.92rem}
.arrow-pill{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;border:1px solid rgba(242,198,109,.32);background:rgba(242,198,109,.08);color:#ffeab4;font-weight:900}
@media(max-width:900px){.bridge-grid,.mapping-row{grid-template-columns:1fr}}