:root{
  --orange:#ff5a16;
  --orange2:#ff7a1a;
  --dark:#070b13;
  --navy:#141d38;
  --text:#1c2440;
  --muted:#69708a;
  --soft:#f6f7fb;
  --gold:#c99b35;
  --line:#e7eaf3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.65}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1480px,94%);margin:auto}
.topbar{font-size:14px;color:#727a92;border-bottom:1px solid var(--line);background:#fff}
.topbar .container{display:flex;justify-content:space-between;gap:18px;padding:9px 0;flex-wrap:wrap}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(10,20,40,.05)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900}
.logo-mark{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--gold),#1b1b1b);display:grid;place-items:center;color:white;font-size:26px;box-shadow:0 12px 25px rgba(0,0,0,.16)}
.logo small{display:block;color:#777;font-weight:700;font-size:11px;letter-spacing:.03em}
.menu{display:flex;gap:24px;align-items:center}
.menu a{font-weight:700;color:#4b526b}
.menu a:hover,.menu a.active{color:var(--orange)}
.dropdown{position:relative}
.dropdown-content{display:none;position:absolute;top:100%;left:0;background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 45px rgba(20,30,60,.14);min-width:210px;padding:10px}
.dropdown:hover .dropdown-content{display:block}
.dropdown-content a{display:block;padding:10px 12px;border-radius:10px}
.dropdown-content a:hover{background:#fff2eb}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:9px;background:var(--orange);color:white!important;font-weight:800;box-shadow:0 14px 28px rgba(255,90,22,.24);border:0}
.btn:hover{transform:translateY(-2px);background:#f04f0d}
.btn.secondary{background:transparent;color:white!important;border:1px solid rgba(255,255,255,.25);box-shadow:none}
.hero{background:radial-gradient(circle at 78% 28%,rgba(255,90,22,.22),transparent 25%),linear-gradient(135deg,#070b13 0%,#111b33 58%,#20283d 100%);color:white;overflow:hidden}
.hero-grid{min-height:680px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:70px;padding:70px 0}
.kicker{color:var(--orange2);font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:14px}
.hero h1{font-size:clamp(48px,6.4vw,92px);line-height:1.03;margin:14px 0 22px;letter-spacing:-1.5px}
.hero p{font-size:19px;color:#e7e9f3;max-width:860px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.job-box{margin-top:28px;padding:22px 24px;border-left:5px solid var(--orange);border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);color:#f8f8fb}
.portrait{position:relative;min-height:480px;display:flex;align-items:end;justify-content:center}
.portrait-card{width:min(500px,100%);border-radius:34px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:0 34px 80px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.13)}
.portrait-card img{width:100%;height:auto}
.section{padding:86px 0}
.section.soft{background:var(--soft)}
.section h2{font-size:clamp(30px,4vw,48px);line-height:1.1;margin:10px 0 16px;color:var(--navy)}
.lead{color:var(--muted);font-size:18px;max-width:760px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.card{background:white;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 18px 48px rgba(15,25,55,.07)}
.card h3{margin:10px 0;color:var(--navy);font-size:22px}
.card p{color:var(--muted)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.badge{font-size:12px;background:#eef1f9;color:#44506b;border-radius:999px;padding:7px 10px;font-weight:700}
.project-card .btn{margin-top:10px;padding:11px 17px}
.timeline{display:grid;gap:16px;margin-top:30px}
.timeline-item{background:white;border-left:5px solid var(--orange);border-radius:18px;padding:22px 24px;box-shadow:0 16px 38px rgba(15,25,55,.06)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:34px}
.video-card{background:white;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 18px 48px rgba(15,25,55,.07)}
.video-placeholder{height:220px;border-radius:18px;background:linear-gradient(135deg,#10182d,#ff5a16);display:grid;place-items:center;color:white;font-weight:900;text-align:center;padding:20px}
.contact-box{background:linear-gradient(135deg,#10182d,#070b13);color:white;border-radius:30px;padding:42px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.footer{background:#070b13;color:#aab1c8;padding:32px 0;text-align:center}
.mobile-toggle{display:none;background:transparent;border:0;font-size:30px}
@media(max-width:900px){
 .hero-grid,.grid,.gallery,.contact-box{grid-template-columns:1fr}
 .portrait{min-height:auto}
 .menu{display:none;position:absolute;left:0;right:0;top:78px;background:white;padding:20px;box-shadow:0 20px 45px rgba(0,0,0,.12);flex-direction:column;align-items:flex-start}
 .menu.open{display:flex}
 .dropdown-content{position:static;display:block;box-shadow:none;border:0;padding-left:12px}
 .mobile-toggle{display:block}
 .topbar{display:none}
}

/* Bewerbungsausbau – breite Desktop-Version */
.hero-grid{padding:82px 0;}
.section{padding:96px 0;}
.application-strip{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  margin-top:34px;
}
.application-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:30px;
  box-shadow:0 20px 55px rgba(15,25,55,.07);
}
.application-box.dark{
  background:linear-gradient(135deg,#111b33,#070b13);
  color:#fff;
}
.application-box.dark p{color:#d9deee;}
.application-list{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.application-list div{
  padding:14px 16px;
  border-radius:14px;
  background:#f6f7fb;
  color:#29324d;
  font-weight:700;
}
.dark .application-list div{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.personal-note{
  font-size:20px;
  line-height:1.8;
  color:#e7e9f3;
  max-width:860px;
}
@media(max-width:900px){
  .application-strip{grid-template-columns:1fr;}
  .hero-grid{gap:30px;}
}

/* Display-Fix: normaler Hero, weniger riesig */
.hero-grid{
  min-height:560px !important;
  padding:54px 0 60px !important;
  grid-template-columns:1.12fr .88fr !important;
  gap:54px !important;
}
.hero h1{
  font-size:clamp(38px,4.2vw,64px) !important;
  line-height:1.08 !important;
  max-width:820px;
}
.hero p,
.personal-note{
  font-size:18px !important;
  line-height:1.7 !important;
  max-width:780px !important;
}
.job-box{
  max-width:800px;
  padding:18px 22px !important;
  margin-top:22px !important;
}
.hero-actions{
  margin-top:22px !important;
}
.portrait-card{
  width:min(430px,100%) !important;
  max-height:470px;
}
.portrait-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.portrait{
  min-height:420px !important;
}

/* Leichte Hero-Bildanimation ohne Slider-Ballast */
.hero-visual-slider{
  position:relative;
  width:min(430px,100%);
  height:470px;
  border-radius:34px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  box-shadow:0 34px 80px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.13);
}
.hero-visual-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  opacity:0;
  animation:heroFade 15s infinite;
}
.hero-visual-slider img:nth-child(1){animation-delay:0s}
.hero-visual-slider img:nth-child(2){animation-delay:5s}
.hero-visual-slider img:nth-child(3){animation-delay:10s}
@keyframes heroFade{
  0%{opacity:0;transform:scale(1.02)}
  8%{opacity:1;transform:scale(1)}
  30%{opacity:1;transform:scale(1)}
  38%{opacity:0;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.02)}
}

/* Video Startbereich */
.video-start-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:34px;
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr !important;min-height:auto !important;}
  .hero h1{font-size:clamp(34px,10vw,48px) !important;}
  .hero-visual-slider{height:390px;}
  .video-start-grid{grid-template-columns:1fr;}
}

/* FINAL: professioneller Bewerbungs-Hero */
.container{
  width:min(1560px,94vw) !important;
}
.hero{
  background:
    radial-gradient(circle at 78% 45%,rgba(255,91,22,.13),transparent 24%),
    linear-gradient(135deg,#070b13 0%,#10182d 58%,#1b2238 100%) !important;
}
.hero-grid{
  width:min(1560px,94vw) !important;
  margin:auto !important;
  min-height:590px !important;
  padding:58px 0 66px !important;
  grid-template-columns:1.1fr .9fr !important;
  gap:56px !important;
  align-items:center !important;
}
.hero h1{
  font-size:clamp(40px,4vw,66px) !important;
  line-height:1.08 !important;
  max-width:880px !important;
  letter-spacing:-1px !important;
}
.hero p,
.personal-note{
  font-size:18px !important;
  line-height:1.75 !important;
  max-width:850px !important;
}
.job-box{
  max-width:850px !important;
  padding:19px 22px !important;
  margin-top:22px !important;
  background:rgba(255,255,255,.08) !important;
}
.portrait{
  min-height:480px !important;
  align-items:center !important;
  justify-content:center !important;
}
.hero-photo-clean{
  position:relative;
  width:min(470px,100%);
  height:500px;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}
.hero-photo-clean:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,11,19,.24));
  z-index:2;
  pointer-events:none;
}
.hero-photo-clean img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.hero-visual-slider,
.portrait-card{
  all:unset;
}
.section .container{
  width:min(1450px,94vw) !important;
}
@media(max-width:900px){
  .hero-grid{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:28px !important;
    padding:44px 0 54px !important;
  }
  .hero h1{
    font-size:clamp(34px,9vw,48px) !important;
  }
  .portrait{
    min-height:auto !important;
  }
  .hero-photo-clean{
    height:420px;
    width:min(420px,100%);
  }
}

/* Full Update: leicht versetztes Layout, Animationen, Form, Links */
.reveal-card{
  animation:softUp .8s ease both;
}
.reveal-card:nth-child(2){animation-delay:.08s}
.reveal-card:nth-child(3){animation-delay:.16s}
.reveal-card:nth-child(4){animation-delay:.24s}
@keyframes softUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
.offset-grid .card:nth-child(2),
.offset-grid .project-card:nth-child(2){
  transform:translateY(22px);
}
.offset-grid .card:nth-child(3),
.offset-grid .project-card:nth-child(3){
  transform:translateY(-10px);
}
.link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:26px;
}
.link-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--navy);
  font-weight:800;
  box-shadow:0 14px 36px rgba(15,25,55,.06);
}
.link-pill:hover{
  transform:translateY(-4px);
  color:var(--orange);
}
.cv-section{
  margin-top:44px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:24px;
}
.cv-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  box-shadow:0 18px 48px rgba(15,25,55,.07);
}
.cv-list{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.cv-item{
  padding:17px 18px;
  border-left:4px solid var(--orange);
  border-radius:16px;
  background:#f8f9fd;
}
.cv-item strong{
  display:block;
  color:var(--navy);
  margin-bottom:4px;
}
.contact-form{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px 16px;
  font:inherit;
  color:var(--text);
  background:#fff;
}
.contact-form textarea{
  min-height:150px;
  resize:vertical;
}
.form-note{
  color:var(--muted);
  font-size:14px;
}
.video-modal{
  position:fixed;
  inset:0;
  background:rgba(5,8,14,.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:24px;
}
.video-modal.open{
  display:flex;
}
.video-modal-content{
  width:min(980px,96vw);
  background:#080d17;
  border-radius:24px;
  padding:18px;
  box-shadow:0 35px 100px rgba(0,0,0,.45);
  position:relative;
}
.video-modal-content video{
  width:100%;
  max-height:76vh;
  border-radius:16px;
  background:#000;
}
.video-close{
  position:absolute;
  right:14px;
  top:10px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:0;
  background:var(--orange);
  color:white;
  font-size:26px;
  font-weight:800;
  cursor:pointer;
}
.video-card{
  overflow:hidden;
}
.video-placeholder{
  transition:.25s ease;
  cursor:pointer;
}
.video-placeholder:hover{
  transform:scale(1.015);
  filter:saturate(1.08);
}
@media(max-width:900px){
  .offset-grid .card:nth-child(2),
  .offset-grid .project-card:nth-child(2),
  .offset-grid .card:nth-child(3),
  .offset-grid .project-card:nth-child(3){
    transform:none;
  }
  .cv-section{
    grid-template-columns:1fr;
  }
}

/* FINAL WEB-DESIGN FIX: Hero-Bild freistehend, ohne Rahmen/Box */
.container{
  width:min(1500px,94vw) !important;
}
.logo{
  display:flex !important;
  align-items:center !important;
}
.logo img{
  height:76px !important;
  width:auto !important;
  display:block !important;
  object-fit:contain !important;
}
.nav{
  height:82px !important;
}
.hero-fixed-clean{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 45%,rgba(255,91,22,.14),transparent 27%),
    linear-gradient(135deg,#070b13 0%,#10182d 58%,#1b2238 100%) !important;
}
.hero-fixed-grid{
  min-height:640px !important;
  display:grid !important;
  grid-template-columns:1.08fr .92fr !important;
  align-items:center !important;
  gap:48px !important;
  padding:64px 0 0 !important;
}
.hero-fixed-text{
  position:relative;
  z-index:3;
  padding-bottom:58px;
}
.hero-fixed-text h1{
  color:#fff !important;
  font-size:clamp(40px,4.1vw,68px) !important;
  line-height:1.08 !important;
  letter-spacing:-1px !important;
  margin:16px 0 24px !important;
  max-width:880px !important;
}
.hero-fixed-text .personal-note{
  color:#eef2ff !important;
  font-size:18px !important;
  line-height:1.75 !important;
  max-width:820px !important;
}
.hero-fixed-text .job-box{
  max-width:820px !important;
  background:rgba(255,255,255,.085) !important;
  border-left:5px solid var(--orange) !important;
  border-radius:18px !important;
  padding:20px 24px !important;
  margin-top:26px !important;
  box-shadow:none !important;
}
.hero-person-free{
  position:relative;
  z-index:2;
  align-self:end;
  justify-self:end;
  width:min(540px,100%);
  min-height:570px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}
.hero-person-free::before{
  content:"";
  position:absolute;
  right:2%;
  bottom:0;
  width:78%;
  height:62%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,91,22,.17),transparent 66%);
  filter:blur(14px);
  z-index:-1;
}
.hero-person-free img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  max-height:590px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  padding:0 !important;
  margin:0 !important;
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.35));
}
/* Alte Bild-Container endgültig neutralisieren */
.hero-photo-clean,
.hero-visual-slider,
.portrait-card,
.portrait{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
@media(max-width:1000px){
  .hero-fixed-grid{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:24px !important;
    padding:48px 0 0 !important;
  }
  .hero-fixed-text{
    padding-bottom:18px;
  }
  .hero-person-free{
    justify-self:center;
    min-height:420px;
    width:min(460px,96vw);
  }
  .hero-person-free img{
    max-height:430px !important;
  }
}
@media(max-width:700px){
  .logo img{
    height:58px !important;
  }
  .hero-fixed-text h1{
    font-size:clamp(34px,9vw,48px) !important;
  }
  .hero-fixed-text .personal-note{
    font-size:16px !important;
  }
  .hero-person-free{
    min-height:360px;
  }
  .hero-person-free img{
    max-height:370px !important;
  }
}


/* VISUAL PROJECT CARDS */
.project-visual-cards{
    margin-top:40px;
}
.visual-card{
    position:relative;
    overflow:hidden;
    min-height:240px;
    border-radius:28px !important;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 50px rgba(0,0,0,.12);
    transition:.35s ease;
}
.visual-card::before{
    content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:.55;
    transition:.4s ease;
    filter:saturate(1.1) contrast(1.05);
}
.visual-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(7,11,19,.30),rgba(7,11,19,.55));
}
.visual-card > *{
    position:relative;
    z-index:2;
}
.visual-card:hover{
    transform:translateY(-6px);
}
.visual-card:hover::before{
    opacity:.34;
    transform:scale(1.03);
}
.html-card::before{
    background-image:url('assets/img/html-bg.png');
}
.debresh-card::before{
    background-image:url('assets/img/debresh-bg.png');
}
.orbiora-card::before{
    background-image:url('assets/img/orbiora-bg.png');
}
.visual-card h3,
.visual-card p{
    color:white !important;
}


/* VISUAL PROJECT CARDS FIX */
.project-visual-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:28px;
    margin-top:40px;
}

.visual-project-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    min-height:260px;
    padding:32px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background-size:cover;
    background-position:center;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
    transition:.35s ease;
}

.visual-project-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(5,10,25,.15),rgba(5,10,25,.78));
}

.visual-project-card:hover{
    transform:translateY(-6px) scale(1.01);
}

.visual-project-card *{
    position:relative;
    z-index:2;
}

.visual-project-card h3{
    font-size:30px;
    margin-bottom:10px;
    color:#fff;
}

.visual-project-card p{
    color:rgba(255,255,255,.88);
    line-height:1.6;
}

.bg-html{
    background-image:url('img/html-bg.png');
}

.bg-debresh{
    background-image:url('img/debresh-bg.png');
}

.bg-orbiora{
    background-image:url('img/orbiora-bg.png');
}


/* V4: Projektkarten versetzt statt Listen-Look */
.project-visual-grid{
    display:grid !important;
    grid-template-columns:1.1fr .9fr !important;
    grid-template-areas:
        "html debresh"
        "html orbiora";
    gap:30px !important;
    width:100% !important;
    margin-top:44px !important;
    align-items:stretch;
}

.visual-project-card{
    min-height:310px !important;
    width:100% !important;
    border-radius:30px !important;
}

.visual-project-card.bg-html{
    grid-area:html;
    min-height:650px !important;
}

.visual-project-card.bg-debresh{
    grid-area:debresh;
    transform:translateY(28px);
}

.visual-project-card.bg-orbiora{
    grid-area:orbiora;
    transform:translateY(-8px);
}

.visual-project-card h3{
    font-size:clamp(28px,2.2vw,42px) !important;
    line-height:1.1;
}

.visual-project-card p{
    max-width:520px;
    font-size:17px;
}

.visual-project-card .btn{
    width:max-content;
    min-width:190px;
}

.visual-project-card:hover{
    transform:translateY(-8px) scale(1.01);
}

.visual-project-card.bg-debresh:hover{
    transform:translateY(18px) scale(1.01);
}

.visual-project-card.bg-orbiora:hover{
    transform:translateY(-18px) scale(1.01);
}

@media(max-width:1000px){
    .project-visual-grid{
        grid-template-columns:1fr !important;
        grid-template-areas:
            "html"
            "debresh"
            "orbiora";
    }
    .visual-project-card,
    .visual-project-card.bg-html{
        min-height:310px !important;
        transform:none !important;
    }
}


/* V5: Projektlayout als versetzte Reihen */
.project-showcase{
  display:grid;
  gap:54px;
  margin-top:48px;
}

.project-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:center;
  padding:24px;
  border-radius:34px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(220,225,238,.9);
  box-shadow:0 22px 60px rgba(15,25,55,.08);
  overflow:hidden;
}

.project-row:nth-child(2){
  transform:translateX(34px);
}

.project-row:nth-child(3){
  transform:translateX(-18px);
}

.project-image{
  height:330px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.18);
  position:relative;
}

.project-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18));
}

.project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.6s ease;
}

.project-row:hover .project-image img{
  transform:scale(1.045);
}

.project-content{
  padding:18px 18px 18px 10px;
}

.project-label{
  display:inline-block;
  color:var(--orange);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:13px;
  margin-bottom:12px;
}

.project-content h3{
  font-size:clamp(30px,3vw,48px);
  line-height:1.08;
  color:var(--navy);
  margin:0 0 18px;
}

.project-content p{
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
  max-width:620px;
  margin-bottom:24px;
}

.reveal-row{
  animation:projectSoftIn .8s ease both;
}

.reveal-row:nth-child(2){
  animation-delay:.12s;
}

.reveal-row:nth-child(3){
  animation-delay:.24s;
}

@keyframes projectSoftIn{
  from{opacity:0; transform:translateY(26px)}
  to{opacity:1}
}

@media(max-width:1000px){
  .project-row,
  .project-row.reverse{
    grid-template-columns:1fr;
    transform:none !important;
  }
  .project-row.reverse .project-content{
    order:2;
  }
  .project-row.reverse .project-image{
    order:1;
  }
  .project-image{
    height:260px;
  }
}

@media(max-width:700px){
  .project-row{
    padding:16px;
    border-radius:24px;
  }
  .project-image{
    height:220px;
    border-radius:20px;
  }
  .project-content p{
    font-size:16px;
  }
}


/* TECH HERO SECTION */
.projects-tech-hero{
    position:relative;
    min-height:78vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:120px 8%;
    background:
      linear-gradient(90deg, rgba(3,8,22,.94) 0%, rgba(3,8,22,.76) 42%, rgba(3,8,22,.35) 100%),
      url('img/tech-hero.png');
    background-size:cover;
    background-position:center;
}

.projects-tech-overlay{
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at top left, rgba(0,153,255,.12), transparent 34%),
      radial-gradient(circle at bottom right, rgba(255,106,0,.14), transparent 28%);
    animation:techPulse 8s ease-in-out infinite alternate;
}

@keyframes techPulse{
    from{opacity:.55}
    to{opacity:1}
}

.projects-tech-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.hero-mini{
    display:inline-block;
    color:#ff6a00;
    font-weight:800;
    letter-spacing:.18em;
    margin-bottom:18px;
}

.projects-tech-content h1{
    color:#fff;
    font-size:clamp(54px,6vw,92px);
    line-height:.95;
    margin-bottom:28px;
    letter-spacing:-.04em;
}

.projects-tech-content p{
    color:rgba(255,255,255,.88);
    font-size:22px;
    line-height:1.8;
    max-width:680px;
    margin-bottom:34px;
}

.hero-tech-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.hero-tech-buttons .btn-outline{
    background:transparent;
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
}

.hero-tech-buttons .btn-outline:hover{
    background:#fff;
    color:#091224;
}

@media(max-width:900px){
    .projects-tech-hero{
        min-height:auto;
        padding:90px 24px;
        background-position:72% center;
    }

    .projects-tech-content h1{
        font-size:56px;
    }

    .projects-tech-content p{
        font-size:18px;
    }
}


/* V7 TECH HERO IMPROVEMENT */
.projects-tech-hero{
    background:
      linear-gradient(90deg, rgba(4,8,20,.92) 0%, rgba(4,8,20,.70) 42%, rgba(4,8,20,.38) 100%),
      url('img/tech-hero.png') center center / cover no-repeat !important;
}

.projects-tech-content h1{
    text-shadow:0 8px 30px rgba(0,0,0,.45);
}

.projects-tech-content p{
    text-shadow:0 4px 18px rgba(0,0,0,.35);
}

.projects-tech-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(135deg, rgba(0,140,255,.08), transparent 35%),
      linear-gradient(315deg, rgba(255,145,0,.10), transparent 30%);
    pointer-events:none;
}


/* V8 HERO TOP FIX */
.section-tight{
    padding-top:60px !important;
}

.projects-tech-hero{
    margin-top:0 !important;
}


/* V8 FIX: Hero unter Menü, nicht darüber */
.header,
.site-header,
header{
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
}

.projects-tech-hero{
    margin-top:0 !important;
    padding-top:120px !important;
    z-index:1 !important;
}

.section-tight{
    padding-top:60px !important;
}


/* V9 – moderner kreativer Projektbereich */
.project-showcase-v9{
  display:grid;
  gap:82px;
  margin-top:60px;
  position:relative;
}

.project-showcase-v9::before{
  content:"";
  position:absolute;
  left:50%;
  top:20px;
  bottom:20px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,91,22,.35),transparent);
  opacity:.55;
}

.project-row-v9{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
  padding:28px;
  border-radius:36px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  border:1px solid rgba(219,225,238,.95);
  box-shadow:0 28px 75px rgba(15,25,55,.09);
  overflow:hidden;
}

.project-row-v9::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  right:-80px;
  top:-90px;
  background:radial-gradient(circle,rgba(255,91,22,.14),transparent 68%);
  pointer-events:none;
}

.project-row-v9:nth-child(2){
  margin-left:70px;
  margin-right:0;
}

.project-row-v9:nth-child(3){
  margin-right:70px;
  margin-left:0;
}

.project-media-v9{
  position:relative;
  height:380px;
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 22px 55px rgba(0,0,0,.18);
  isolation:isolate;
}

.project-media-v9::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.22)),
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.18),transparent 28%);
}

.project-media-v9 img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .75s ease, filter .75s ease;
}

.project-row-v9:hover .project-media-v9 img{
  transform:scale(1.055);
  filter:saturate(1.1) contrast(1.04);
}

.floating-number{
  position:absolute;
  left:22px;
  top:18px;
  z-index:3;
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.18em;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(7,11,19,.46);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
}

.project-text-v9{
  position:relative;
  z-index:2;
  padding:18px 20px;
}

.project-text-v9 h3{
  font-size:clamp(34px,3.4vw,56px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin:0 0 20px;
  color:var(--navy);
}

.project-text-v9 p{
  max-width:650px;
  color:var(--muted);
  font-size:18px;
  line-height:1.8;
  margin-bottom:28px;
}

.project-text-v9 .btn{
  min-width:210px;
}

.project-label{
  display:inline-block;
  color:var(--orange);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:13px;
  margin-bottom:14px;
}

.reveal-row{
  animation:v9SlideUp .75s ease both;
}
.reveal-row:nth-child(2){animation-delay:.12s}
.reveal-row:nth-child(3){animation-delay:.24s}

@keyframes v9SlideUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1050px){
  .project-showcase-v9::before{display:none}
  .project-row-v9,
  .project-row-v9:nth-child(2),
  .project-row-v9:nth-child(3){
    grid-template-columns:1fr;
    margin-left:0;
    margin-right:0;
  }
  .project-row-v9.reverse .project-text-v9{
    order:2;
  }
  .project-row-v9.reverse .project-media-v9{
    order:1;
  }
  .project-media-v9{
    height:310px;
  }
}

@media(max-width:700px){
  .project-showcase-v9{
    gap:40px;
  }
  .project-row-v9{
    padding:16px;
    border-radius:26px;
  }
  .project-media-v9{
    height:230px;
    border-radius:20px;
  }
  .project-text-v9{
    padding:10px 6px 6px;
  }
  .project-text-v9 p{
    font-size:16px;
  }
}


/* V10 Einheitliche Hero-Struktur */
.page-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
}

.page-hero-inner{
  width:min(1500px,94vw);
  margin:0 auto;
  min-height:430px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:54px;
  padding:72px 0;
  position:relative;
  z-index:2;
}

.page-hero-person{
  background:
    radial-gradient(circle at 80% 42%,rgba(255,91,22,.14),transparent 26%),
    linear-gradient(135deg,#070b13 0%,#10182d 58%,#1b2238 100%);
}

.page-hero-tech{
  min-height:470px;
  background:
    linear-gradient(90deg,rgba(4,8,20,.92) 0%,rgba(4,8,20,.72) 45%,rgba(4,8,20,.38) 100%),
    url('img/page-hero-tech.jpg') center center / cover no-repeat;
}

.page-hero-tech .page-hero-inner{
  grid-template-columns:1fr;
  min-height:470px;
}

.page-hero-copy{
  max-width:860px;
}

.page-kicker{
  display:inline-block;
  color:var(--orange);
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:14px;
  margin-bottom:16px;
}

.page-hero h1{
  font-size:clamp(42px,4.7vw,76px);
  line-height:1.04;
  letter-spacing:-.045em;
  margin:0 0 24px;
  color:#fff;
}

.page-hero p{
  color:#eef2ff;
  font-size:20px;
  line-height:1.75;
  max-width:780px;
}

.page-hero-image{
  justify-self:end;
  width:min(500px,100%);
}

.page-hero-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:28px;
  box-shadow:0 30px 75px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
}

.section-after-hero{
  padding-top:72px !important;
}

@media(max-width:1000px){
  .page-hero-inner{
    grid-template-columns:1fr;
    gap:30px;
    padding:54px 0;
  }
  .page-hero-image{
    justify-self:center;
    width:min(430px,100%);
  }
  .page-hero h1{
    font-size:clamp(34px,9vw,52px);
  }
  .page-hero p{
    font-size:17px;
  }
}


/* V11 – Freistehendes Hero-Bild */
.page-hero-image{
    background:none !important;
    box-shadow:none !important;
    border:none !important;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.page-hero-image img{
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    mix-blend-mode:normal;
    filter:drop-shadow(0 18px 45px rgba(0,0,0,.35));
    max-height:720px;
    width:auto;
    object-fit:contain;
}

.page-hero-person{
    overflow:hidden;
}

.page-hero-person::after{
    content:"";
    position:absolute;
    right:8%;
    top:50%;
    transform:translateY(-50%);
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,91,22,.10), transparent 70%);
    pointer-events:none;
}

@media(max-width:1000px){
    .page-hero-image img{
        max-height:500px;
        width:100%;
    }
}

/* V12 Premium Feinschliff */
:root{--glass:rgba(255,255,255,.78);--ring:rgba(255,91,22,.26);}
body{-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.header{backdrop-filter:blur(18px) saturate(1.15) !important;}
.menu a{position:relative;}
.menu > a:not(.btn)::after,.dropdown > a::after{
  content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;border-radius:99px;
  background:var(--orange);transition:.28s ease;
}
.menu > a:not(.btn):hover::after,.dropdown:hover > a::after,.menu > a.active::after{width:100%;}
.btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background .25s ease !important;}
.btn::before{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.24),transparent);
  transform:translateX(-120%);transition:.55s ease;
}
.btn:hover::before{transform:translateX(120%);}
.btn:hover{box-shadow:0 18px 38px rgba(255,91,22,.30) !important;}
.page-hero{isolation:isolate;}
.page-hero::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.06),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.035),transparent 45%);
  z-index:0;pointer-events:none;
}
.page-hero-copy{animation:v12HeroText .7s ease both;}
.page-hero-image{animation:v12HeroImage .8s ease .08s both;}
@keyframes v12HeroText{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes v12HeroImage{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.card,.cv-card,.application-box,.timeline-item{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease !important;
}
.card:hover,.cv-card:hover,.application-box:hover,.timeline-item:hover{
  transform:translateY(-6px);border-color:rgba(255,91,22,.22) !important;
  box-shadow:0 28px 75px rgba(15,25,55,.11) !important;
}
.timeline{position:relative;}
.timeline::before{
  content:"";position:absolute;left:20px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,var(--orange),transparent);opacity:.35;
}
.timeline-item{position:relative;padding-left:44px !important;}
.timeline-item::before{
  content:"";position:absolute;left:12px;top:28px;width:18px;height:18px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 8px rgba(255,91,22,.12);
}
.project-showcase-v9{gap:92px !important;}
.project-row-v9{
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.70)) !important;
  backdrop-filter:blur(10px);
}
.project-row-v9::before{
  content:"";position:absolute;inset:1px;border-radius:35px;border:1px solid rgba(255,255,255,.75);pointer-events:none;
}
.project-media-v9{transform:translateZ(0);}
.project-media-v9 img{will-change:transform;}
.project-text-v9 .btn{margin-top:4px;}
.link-pill{transition:.25s ease !important;}
.link-pill:hover{box-shadow:0 18px 48px rgba(255,91,22,.14) !important;border-color:rgba(255,91,22,.22) !important;}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,91,22,.13);
}
.video-placeholder{
  min-height:250px;border-radius:24px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 18px 48px rgba(15,25,55,.12);
}
.reveal-card,.reveal-row,.cv-card,.timeline-item{animation:v12FadeUp .7s ease both;}
@keyframes v12FadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){
  .nav{height:74px !important;}
  .menu{border-radius:0 0 24px 24px;}
  .page-hero-inner{padding:46px 0 40px !important;min-height:auto !important;}
  .page-hero h1{letter-spacing:-.035em !important;}
  .page-hero-image img{max-height:420px !important;}
  .section,.section-after-hero{padding-top:54px !important;padding-bottom:58px !important;}
  .grid,.offset-grid{gap:18px !important;}
  .card,.cv-card,.application-box{padding:22px !important;border-radius:20px !important;}
  .project-showcase-v9{gap:44px !important;margin-top:34px !important;}
  .project-row-v9{padding:18px !important;border-radius:26px !important;}
  .project-row-v9::before{border-radius:25px;}
  .project-text-v9 h3{font-size:clamp(30px,8vw,42px) !important;}
  .link-grid{grid-template-columns:1fr !important;}
}
@media(max-width:520px){
  .container,.page-hero-inner{width:min(100% - 28px, 1500px) !important;}
  .topbar{display:none !important;}
  .logo img{height:52px !important;}
  .page-hero p{font-size:16px !important;}
  .btn{width:100%;text-align:center;}
  .hero-actions{width:100%;}
  .hero-actions .btn{flex:1 1 100%;}
  .project-media-v9{height:210px !important;}
  .floating-number{font-size:12px;}
}

/* V13 TECH STYLE */
:root{
  --orange:#00d4ff !important;
  --orange-2:#4de3ff !important;
  --navy:#dfe9ff !important;
  --muted:#9aa8c7 !important;
}
html{background:#060816;}
body{
  background:
    radial-gradient(circle at top left, rgba(0,212,255,.06), transparent 24%),
    radial-gradient(circle at bottom right, rgba(80,120,255,.08), transparent 28%),
    linear-gradient(180deg,#060816 0%,#0a1020 100%) !important;
  color:#dfe9ff !important;
}
.header,header{
  background:rgba(5,10,22,.74) !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.menu a{color:#dfe9ff !important;}
.menu > a:not(.btn):hover,.dropdown:hover > a{color:#00d4ff !important;}
.page-hero-person{
  background:
    radial-gradient(circle at 82% 42%, rgba(0,212,255,.12), transparent 24%),
    linear-gradient(135deg,#050816 0%,#0a1224 58%,#121c34 100%) !important;
}
.page-hero-tech{
  background:
    linear-gradient(90deg, rgba(2,6,16,.95) 0%, rgba(2,6,16,.72) 45%, rgba(2,6,16,.38) 100%),
    url('img/page-hero-tech.jpg') center center / cover no-repeat !important;
}
.page-kicker{
  color:#00d4ff !important;
  text-shadow:0 0 16px rgba(0,212,255,.25);
}
.page-hero h1{color:#f5f9ff !important;}
.page-hero p{color:#aeb8d1 !important;}
.page-hero-image img{
  filter:drop-shadow(0 25px 55px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(0,212,255,.12));
}
.section{background:transparent !important;}
.section-title,h2,h3{color:#f2f6ff !important;}
.card,.cv-card,.application-box,.timeline-item,.project-row-v9,.link-pill{
  background:linear-gradient(135deg, rgba(13,19,36,.92), rgba(17,27,50,.76)) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
  color:#dfe9ff !important;
}
.card p,.cv-card p,.timeline-item p,.project-text-v9 p,.link-pill p{
  color:#9aa8c7 !important;
}
.card:hover,.cv-card:hover,.timeline-item:hover,.project-row-v9:hover,.link-pill:hover{
  border-color:rgba(0,212,255,.22) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.34),0 0 0 1px rgba(0,212,255,.12),0 0 40px rgba(0,212,255,.08) !important;
}
.btn{
  background:linear-gradient(135deg,#00d4ff,#3ba7ff) !important;
  color:#03111f !important;
  border:none !important;
  font-weight:800 !important;
}
.btn:hover{
  box-shadow:0 12px 28px rgba(0,212,255,.22),0 0 34px rgba(0,212,255,.16) !important;
}
.btn.secondary,.btn-outline{
  background:transparent !important;
  border:1px solid rgba(0,212,255,.24) !important;
  color:#dff8ff !important;
}
.timeline::before{
  background:linear-gradient(180deg,#00d4ff,transparent) !important;
}
.timeline-item::before{
  background:#00d4ff !important;
  box-shadow:0 0 0 8px rgba(0,212,255,.12) !important;
}
.project-showcase-v9::before{
  background:linear-gradient(180deg,transparent,rgba(0,212,255,.24),transparent) !important;
}
.project-media-v9{
  box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.05);
}
.project-media-v9::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.28)),
    radial-gradient(circle at 20% 10%, rgba(0,212,255,.12), transparent 28%) !important;
}
.floating-number{
  background:rgba(4,10,22,.72) !important;
  border:1px solid rgba(0,212,255,.18) !important;
  color:#dff8ff !important;
}
input,textarea{
  background:#0b1222 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#e6f0ff !important;
}
.footer{
  background:#050816 !important;
  border-top:1px solid rgba(255,255,255,.05);
}
.footer p,.footer a{
  color:#8fa0c4 !important;
}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#07101d;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#00d4ff,#3b82ff);
  border-radius:99px;
}

/* V14 – Glass Boxes + Color Tech Buttons */
.card,
.cv-card,
.application-box,
.timeline-item,
.project-row-v9,
.link-pill,
.video-card,
.shaini-html-project-card{
  background:
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04) !important;
}

.card:hover,
.cv-card:hover,
.application-box:hover,
.timeline-item:hover,
.project-row-v9:hover,
.link-pill:hover,
.video-card:hover,
.shaini-html-project-card:hover{
  border-color:rgba(0,212,255,.36) !important;
  box-shadow:
    0 28px 86px rgba(0,0,0,.38),
    0 0 0 1px rgba(0,212,255,.16),
    0 0 44px rgba(0,212,255,.12),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.btn,
button.btn,
a.btn{
  background:
    linear-gradient(135deg,#00d4ff 0%,#3b82ff 48%,#8b5cf6 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 14px 34px rgba(0,212,255,.22),
    0 0 28px rgba(59,130,255,.18) !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover{
  background:
    linear-gradient(135deg,#33e3ff 0%,#4f8dff 45%,#a855f7 100%) !important;
  box-shadow:
    0 18px 42px rgba(0,212,255,.30),
    0 0 42px rgba(139,92,246,.24) !important;
}

.btn.secondary,
.btn-outline{
  background:
    linear-gradient(135deg,rgba(0,212,255,.10),rgba(139,92,246,.10)) !important;
  color:#dff8ff !important;
  border:1px solid rgba(0,212,255,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 28px rgba(0,0,0,.22) !important;
}

.btn.secondary:hover,
.btn-outline:hover{
  background:
    linear-gradient(135deg,rgba(0,212,255,.22),rgba(139,92,246,.20)) !important;
  color:#ffffff !important;
}

.project-row-v9{
  position:relative;
}

.project-row-v9::before{
  border:1px solid rgba(255,255,255,.20) !important;
}

.page-hero .job-box,
.job-box{
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035)) !important;
  backdrop-filter: blur(16px) !important;
  border-left:4px solid #00d4ff !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.link-pill span{
  color:#00d4ff;
}

.project-label,
.kicker,
.page-kicker{
  background:linear-gradient(90deg,#00d4ff,#8b5cf6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  text-shadow:none !important;
}

/* =====================================
   V15 – BLACK / GOLD / WHITE LUXURY
===================================== */

:root{
  --orange:#d4af37 !important;
  --orange-2:#f1d67a !important;
  --navy:#f5f1e6 !important;
  --muted:#b8b0a0 !important;
}

html{
  background:#050505;
}

body{
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.06), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.03), transparent 28%),
    linear-gradient(180deg,#050505 0%,#0d0d0d 100%) !important;
  color:#f5f1e6 !important;
}

/* Header */
.header,
header{
  background:rgba(8,8,8,.78) !important;
  border-bottom:1px solid rgba(212,175,55,.10);
  backdrop-filter:blur(18px);
}

.menu a{
  color:#f5f1e6 !important;
}

.menu > a:not(.btn):hover,
.dropdown:hover > a{
  color:#d4af37 !important;
}

/* Hero */
.page-hero-person{
  background:
    radial-gradient(circle at 82% 42%, rgba(212,175,55,.10), transparent 24%),
    linear-gradient(135deg,#050505 0%,#111111 58%,#1a1a1a 100%) !important;
}

.page-hero-tech{
  background:
    linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.72) 45%, rgba(5,5,5,.38) 100%),
    url('img/page-hero-tech.jpg') center center / cover no-repeat !important;
}

.page-kicker,
.project-label,
.kicker{
  background:linear-gradient(90deg,#d4af37,#fff5cf);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  letter-spacing:.14em;
}

.page-hero h1,
.section-title,
h2,
h3{
  color:#fffdf8 !important;
}

.page-hero p,
.card p,
.project-text-v9 p,
.timeline-item p{
  color:#b8b0a0 !important;
}

/* Glass Luxury Boxes */
.card,
.cv-card,
.application-box,
.timeline-item,
.project-row-v9,
.link-pill,
.video-card,
.shaini-html-project-card{
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important;
  backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(212,175,55,.12) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.03) !important;
}

.card:hover,
.cv-card:hover,
.application-box:hover,
.timeline-item:hover,
.project-row-v9:hover,
.link-pill:hover{
  border-color:rgba(212,175,55,.34) !important;
  box-shadow:
    0 28px 86px rgba(0,0,0,.48),
    0 0 0 1px rgba(212,175,55,.10),
    0 0 42px rgba(212,175,55,.08),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Buttons */
.btn,
button.btn,
a.btn{
  background:
    linear-gradient(135deg,#d4af37 0%,#f1d67a 45%,#fff5cf 100%) !important;
  color:#050505 !important;
  border:none !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  box-shadow:
    0 14px 34px rgba(212,175,55,.20),
    0 0 28px rgba(212,175,55,.12) !important;
}

.btn:hover{
  background:
    linear-gradient(135deg,#e3c159 0%,#fff0a8 45%,#ffffff 100%) !important;
  box-shadow:
    0 18px 42px rgba(212,175,55,.30),
    0 0 44px rgba(212,175,55,.18) !important;
}

.btn.secondary,
.btn-outline{
  background:
    linear-gradient(135deg,rgba(212,175,55,.08),rgba(255,255,255,.03)) !important;
  border:1px solid rgba(212,175,55,.24) !important;
  color:#f5f1e6 !important;
}

/* Hero image */
.page-hero-image img{
  filter:
    drop-shadow(0 25px 55px rgba(0,0,0,.55))
    drop-shadow(0 0 34px rgba(212,175,55,.08));
}

/* Timeline */
.timeline::before{
  background:linear-gradient(180deg,#d4af37,transparent) !important;
}

.timeline-item::before{
  background:#d4af37 !important;
  box-shadow:0 0 0 8px rgba(212,175,55,.10) !important;
}

/* Projects */
.project-showcase-v9::before{
  background:linear-gradient(180deg,transparent,rgba(212,175,55,.18),transparent) !important;
}

.project-media-v9{
  box-shadow:
    0 24px 60px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,255,255,.04);
}

.floating-number{
  background:rgba(8,8,8,.72) !important;
  border:1px solid rgba(212,175,55,.16) !important;
  color:#fff5cf !important;
  box-shadow:0 0 18px rgba(212,175,55,.08);
}

/* Inputs */
input,
textarea{
  background:#0d0d0d !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#f5f1e6 !important;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#d4af37 !important;
  box-shadow:
    0 0 0 4px rgba(212,175,55,.10),
    0 0 22px rgba(212,175,55,.06) !important;
}

/* Footer */
.footer{
  background:#050505 !important;
  border-top:1px solid rgba(212,175,55,.08);
}

.footer p,
.footer a{
  color:#a79d8a !important;
}

/* Scrollbar */
::-webkit-scrollbar-track{
  background:#080808;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#d4af37,#fff5cf);
  border-radius:99px;
}

/* V15 FIX – Dropdown, Lesbarkeit, Galerie/Kompetenzen */
.dropdown-content{
  background:rgba(8,8,8,.96) !important;
  border:1px solid rgba(212,175,55,.22) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.48), 0 0 24px rgba(212,175,55,.08) !important;
  backdrop-filter:blur(18px) !important;
}

.dropdown-content a{
  color:#f5f1e6 !important;
  background:transparent !important;
}

.dropdown-content a:hover{
  color:#050505 !important;
  background:linear-gradient(135deg,#d4af37,#fff5cf) !important;
}

.cv-item,
.application-list div,
.badge{
  background:rgba(255,255,255,.065) !important;
  color:#f5f1e6 !important;
  border:1px solid rgba(212,175,55,.12) !important;
}

.cv-item strong,
.application-list strong,
.badge strong{
  color:#fff5cf !important;
}

.cv-list .cv-item p,
.cv-item p{
  color:#b8b0a0 !important;
}

.video-placeholder{
  color:#fff5cf !important;
  background:
    linear-gradient(135deg,rgba(8,8,8,.86),rgba(30,25,12,.72)),
    linear-gradient(135deg,#d4af37,#050505) !important;
  border:1px solid rgba(212,175,55,.18) !important;
}

.video-card h3,
.video-card p,
.gallery h3,
.gallery p{
  color:#f5f1e6 !important;
}

.link-pill{
  color:#f5f1e6 !important;
}

.link-pill span{
  color:#d4af37 !important;
}

@media(max-width:900px){
  .menu{
    background:rgba(8,8,8,.98) !important;
    border-bottom:1px solid rgba(212,175,55,.15) !important;
  }

  .dropdown-content{
    background:rgba(255,255,255,.035) !important;
    border:1px solid rgba(212,175,55,.12) !important;
  }
}

.form-note{
  color:#b8b0a0 !important;
}

.contact-form input,
.contact-form textarea{
  background:rgba(255,255,255,.055) !important;
  color:#f5f1e6 !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#9f9686 !important;
}

/* =====================================
   V16 – Final Premium Polish
   Schwarz · Gold · Tech · Business
===================================== */

/* Einheitliche Premium-Fläche */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 12%, rgba(212,175,55,.055), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(255,255,255,.025), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(212,175,55,.035), transparent 35%);
}

/* Header noch hochwertiger */
.header,
header{
  box-shadow:0 16px 45px rgba(0,0,0,.34) !important;
}

.logo img{
  transition:transform .28s ease, filter .28s ease;
}

.logo:hover img{
  transform:scale(1.025);
  filter:drop-shadow(0 0 14px rgba(212,175,55,.18));
}

/* Menü Gold-Line */
.menu > a:not(.btn)::after,
.dropdown > a::after{
  height:2px !important;
  background:linear-gradient(90deg,#d4af37,#fff5cf) !important;
  box-shadow:0 0 12px rgba(212,175,55,.25);
}

/* Hero Feinschliff */
.page-hero{
  min-height:520px;
}

.page-hero-person::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 32%),
    radial-gradient(circle at 76% 45%, rgba(212,175,55,.13), transparent 22%);
  pointer-events:none;
}

.page-hero-tech::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 35%),
    radial-gradient(circle at 72% 50%, rgba(212,175,55,.12), transparent 24%);
  pointer-events:none;
}

.page-hero h1{
  text-shadow:0 10px 34px rgba(0,0,0,.38);
}

.page-hero p{
  text-shadow:0 5px 20px rgba(0,0,0,.24);
}

/* Freistehende Person noch edler */
.page-hero-image img{
  transform-origin:center bottom;
  transition:transform .45s ease, filter .45s ease;
}

.page-hero-image:hover img{
  transform:translateY(-4px) scale(1.012);
  filter:
    drop-shadow(0 30px 62px rgba(0,0,0,.58))
    drop-shadow(0 0 38px rgba(212,175,55,.11));
}

/* Gold Glass Reflection */
.card,
.cv-card,
.application-box,
.timeline-item,
.project-row-v9,
.link-pill,
.video-card,
.shaini-html-project-card{
  position:relative;
  overflow:hidden;
}

.card::before,
.cv-card::before,
.application-box::before,
.timeline-item::before,
.project-row-v9::before,
.link-pill::before,
.video-card::before,
.shaini-html-project-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), transparent 30%, rgba(212,175,55,.035) 100%);
  opacity:.55;
  pointer-events:none;
}

.card::after,
.cv-card::after,
.application-box::after,
.timeline-item::after,
.project-row-v9::after,
.link-pill::after,
.video-card::after,
.shaini-html-project-card::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-80%;
  width:80%;
  height:300%;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.075) 48%, transparent 100%);
  transform:rotate(12deg);
  opacity:0;
  transition:.55s ease;
  pointer-events:none;
}

.card:hover::after,
.cv-card:hover::after,
.application-box:hover::after,
.timeline-item:hover::after,
.project-row-v9:hover::after,
.link-pill:hover::after,
.video-card:hover::after,
.shaini-html-project-card:hover::after{
  left:110%;
  opacity:1;
}

/* Inhalt über Reflection halten */
.card > *,
.cv-card > *,
.application-box > *,
.timeline-item > *,
.project-row-v9 > *,
.link-pill > *,
.video-card > *,
.shaini-html-project-card > *{
  position:relative;
  z-index:2;
}

/* Projektbereich noch strukturierter */
.project-row-v9{
  border-radius:38px !important;
}

.project-media-v9{
  border:1px solid rgba(212,175,55,.10);
}

.project-text-v9 h3{
  text-wrap:balance;
}

.project-text-v9 p{
  color:#c4bcaa !important;
}

/* Buttons – subtiler Premium Druck */
.btn{
  text-transform:none;
  border-radius:10px !important;
}

.btn:hover{
  transform:translateY(-3px) !important;
}

.btn.secondary:hover,
.btn-outline:hover{
  border-color:rgba(212,175,55,.42) !important;
}

/* Link-Pills kompakter und eleganter */
.link-pill{
  min-height:64px;
  border-radius:18px !important;
}

/* Footer subtiler */
.footer{
  box-shadow:inset 0 1px 0 rgba(212,175,55,.06);
}

/* Section Abstände harmonisieren */
.section,
.section-after-hero{
  padding-top:86px !important;
  padding-bottom:86px !important;
}

/* Mobile Feinschliff */
@media(max-width:900px){
  .page-hero{
    min-height:auto;
  }

  .page-hero-inner{
    padding-top:48px !important;
    padding-bottom:44px !important;
  }

  .section,
  .section-after-hero{
    padding-top:58px !important;
    padding-bottom:62px !important;
  }

  .project-row-v9{
    border-radius:26px !important;
  }
}

@media(max-width:520px){
  .menu a{
    font-size:15px;
  }

  .page-hero h1{
    font-size:clamp(34px,10vw,48px) !important;
  }

  .page-hero-image img{
    max-height:380px !important;
  }
}


/* =====================================
   V17 – Theme Toggle System
===================================== */

.theme-toggle{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.25);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.3s ease;
  color:#d4af37;
  font-size:18px;
  margin-left:14px;
  box-shadow:0 0 20px rgba(212,175,55,.12);
}

.theme-toggle:hover{
  transform:translateY(-2px) rotate(8deg);
  background:rgba(212,175,55,.14);
  box-shadow:0 0 30px rgba(212,175,55,.2);
}

/* LIGHT MODE */

body.light-mode{
  background:#f4f5f7 !important;
  color:#111 !important;
}

body.light-mode::before{
  background:
    radial-gradient(circle at 15% 10%, rgba(212,175,55,.08), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(0,0,0,.03), transparent 22%);
}

body.light-mode header,
body.light-mode .header{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,0,0,.08);
}

body.light-mode .topbar{
  background:#ffffff !important;
  color:#444 !important;
}

body.light-mode .menu a{
  color:#1a1a1a !important;
}

body.light-mode .page-hero,
body.light-mode .page-hero-tech,
body.light-mode .page-hero-person{
  background:
    linear-gradient(135deg,#ffffff 0%,#f3f4f6 55%,#ece7db 100%) !important;
}

body.light-mode .page-hero h1,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3{
  color:#111 !important;
}

body.light-mode .page-hero p,
body.light-mode p{
  color:#4f5563 !important;
}

body.light-mode .card,
body.light-mode .cv-card,
body.light-mode .application-box,
body.light-mode .timeline-item,
body.light-mode .project-row-v9,
body.light-mode .link-pill{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:
    0 10px 34px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}

body.light-mode .footer{
  background:#fff !important;
  color:#444 !important;
  border-top:1px solid rgba(0,0,0,.08);
}

body.light-mode .btn{
  box-shadow:0 10px 25px rgba(212,175,55,.18);
}

body.light-mode .theme-toggle{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* =====================================
   V18 – Light Mode sauber überarbeitet
   hell · gold · schwarz · lesbar
===================================== */

body.light-mode{
  background:
    radial-gradient(circle at 18% 8%, rgba(212,175,55,.10), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(0,0,0,.035), transparent 26%),
    linear-gradient(180deg,#f7f7f4 0%,#ece9df 100%) !important;
  color:#121212 !important;
}

body.light-mode::before{
  background:
    radial-gradient(circle at 20% 10%, rgba(212,175,55,.10), transparent 32%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,.035), transparent 32%) !important;
}

/* Header light */
body.light-mode .topbar{
  background:#ffffff !important;
  color:#5f6470 !important;
  border-bottom:1px solid rgba(0,0,0,.07) !important;
}

body.light-mode header,
body.light-mode .header{
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.08) !important;
}

body.light-mode .menu a{
  color:#171717 !important;
}

body.light-mode .menu a:hover,
body.light-mode .menu a.active,
body.light-mode .dropdown:hover > a{
  color:#9b7a16 !important;
}

body.light-mode .dropdown-content{
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(212,175,55,.26) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.13) !important;
}

body.light-mode .dropdown-content a{
  color:#171717 !important;
}

body.light-mode .dropdown-content a:hover{
  background:linear-gradient(135deg,#d4af37,#fff3bd) !important;
  color:#111 !important;
}

/* Hero light */
body.light-mode .page-hero-person{
  background:
    radial-gradient(circle at 78% 45%, rgba(212,175,55,.18), transparent 26%),
    linear-gradient(135deg,#ffffff 0%,#f2f0e9 58%,#e8dfc8 100%) !important;
}

body.light-mode .page-hero-tech{
  background:
    linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 42%,rgba(255,255,255,.42) 100%),
    url('img/page-hero-tech.jpg') center center / cover no-repeat !important;
}

body.light-mode .page-kicker,
body.light-mode .kicker,
body.light-mode .project-label{
  background:linear-gradient(90deg,#8f6d10,#d4af37) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

body.light-mode .page-hero h1,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3{
  color:#111318 !important;
  text-shadow:none !important;
}

body.light-mode .page-hero p,
body.light-mode p,
body.light-mode .lead{
  color:#4b5260 !important;
  text-shadow:none !important;
}

body.light-mode .page-hero-image img{
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.18)) drop-shadow(0 0 28px rgba(212,175,55,.10)) !important;
}

/* Light glass cards */
body.light-mode .card,
body.light-mode .cv-card,
body.light-mode .application-box,
body.light-mode .timeline-item,
body.light-mode .project-row-v9,
body.light-mode .link-pill,
body.light-mode .video-card,
body.light-mode .shaini-html-project-card{
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.62)) !important;
  backdrop-filter:blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:
    0 20px 55px rgba(30,25,10,.10),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  color:#121212 !important;
}

body.light-mode .card:hover,
body.light-mode .cv-card:hover,
body.light-mode .application-box:hover,
body.light-mode .timeline-item:hover,
body.light-mode .project-row-v9:hover,
body.light-mode .link-pill:hover,
body.light-mode .video-card:hover{
  border-color:rgba(212,175,55,.32) !important;
  box-shadow:
    0 26px 75px rgba(30,25,10,.14),
    0 0 0 1px rgba(212,175,55,.12),
    0 0 34px rgba(212,175,55,.08) !important;
}

body.light-mode .card p,
body.light-mode .cv-card p,
body.light-mode .timeline-item p,
body.light-mode .project-text-v9 p,
body.light-mode .link-pill p,
body.light-mode .form-note{
  color:#4f5664 !important;
}

/* CV/list boxes fix */
body.light-mode .cv-item,
body.light-mode .application-list div,
body.light-mode .badge{
  background:rgba(255,255,255,.82) !important;
  color:#171717 !important;
  border:1px solid rgba(212,175,55,.20) !important;
}

body.light-mode .cv-item strong,
body.light-mode .application-list strong,
body.light-mode .badge strong{
  color:#8f6d10 !important;
}

/* Buttons light */
body.light-mode .btn,
body.light-mode a.btn,
body.light-mode button.btn{
  background:linear-gradient(135deg,#141414 0%,#2a2a2a 55%,#d4af37 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.16),0 0 24px rgba(212,175,55,.10) !important;
}

body.light-mode .btn:hover{
  background:linear-gradient(135deg,#000000 0%,#1a1a1a 50%,#f1d67a 100%) !important;
  color:#ffffff !important;
}

body.light-mode .btn.secondary,
body.light-mode .btn-outline{
  background:rgba(255,255,255,.64) !important;
  color:#161616 !important;
  border:1px solid rgba(212,175,55,.32) !important;
}

/* Video/Galerie light */
body.light-mode .video-placeholder{
  background:
    linear-gradient(135deg,rgba(255,255,255,.70),rgba(212,175,55,.18)),
    linear-gradient(135deg,#ffffff,#e5dec8) !important;
  color:#171717 !important;
  border:1px solid rgba(212,175,55,.24) !important;
  box-shadow:0 18px 48px rgba(30,25,10,.10) !important;
}

body.light-mode .video-placeholder small{
  color:#4b5260 !important;
}

/* Kontakt dunkelbox im Light Mode */
body.light-mode .contact-box{
  background:
    linear-gradient(135deg,#ffffff 0%,#f1eee3 65%,#e4d5a6 100%) !important;
  color:#111 !important;
  border:1px solid rgba(212,175,55,.24) !important;
  box-shadow:0 22px 70px rgba(30,25,10,.12) !important;
}

body.light-mode .contact-box h2,
body.light-mode .contact-box p{
  color:#111 !important;
}

/* Form fields light */
body.light-mode input,
body.light-mode textarea,
body.light-mode .contact-form input,
body.light-mode .contact-form textarea{
  background:rgba(255,255,255,.82) !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.12) !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder{
  color:#777 !important;
}

body.light-mode .contact-form input:focus,
body.light-mode .contact-form textarea:focus{
  border-color:#d4af37 !important;
  box-shadow:0 0 0 4px rgba(212,175,55,.16) !important;
}

/* Footer light */
body.light-mode .footer{
  background:#ffffff !important;
  color:#4b5260 !important;
  border-top:1px solid rgba(0,0,0,.08) !important;
}

body.light-mode .footer p,
body.light-mode .footer a{
  color:#4b5260 !important;
}

/* Theme Button light */
body.light-mode .theme-toggle{
  background:#111 !important;
  color:#f1d67a !important;
  border-color:rgba(0,0,0,.18) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.16) !important;
}

/* Scrollbar light */
body.light-mode::-webkit-scrollbar-track{
  background:#f0eee7 !important;
}

body.light-mode::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#d4af37,#111) !important;
}


/* ==========================================================
   V35 FINAL MOBILE + DARK ONLY
   - Kein Hell/Dunkel Chaos
   - Mobile Menü sichtbar
   - Hamburger sauber sichtbar
   - Hero auf Mobile kompakt
   - Google Analytics ist in allen HTML-Seiten integriert
========================================================== */

/* Theme Switch komplett deaktiviert */
.theme-toggle,
#themeToggle{
    display:none !important;
}

/* Keine gespeicherten Light-Mode Effekte mehr */
body.light-mode{
    background:#050505 !important;
    color:#f6f3ea !important;
}

body.light-mode .hero,
body.light-mode .page-hero,
body.light-mode .site-header,
body.light-mode header{
    background:inherit;
}

/* Mobile Grundstruktur */
@media(max-width:900px){

    html, body{
        overflow-x:hidden !important;
        background:#050505 !important;
    }

    .topbar{
        display:none !important;
    }

    .container{
        width:min(100% - 36px, 1200px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    header,
    .header,
    .site-header{
        min-height:76px !important;
        padding:0 18px !important;
        background:#ffffff !important;
        border-bottom:1px solid rgba(212,175,55,.22) !important;
        position:sticky !important;
        top:0 !important;
        z-index:9999 !important;
    }

    .nav,
    .navbar{
        min-height:76px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:14px !important;
    }

    .logo img,
    .brand img{
        max-width:190px !important;
        height:auto !important;
        display:block !important;
    }

    /* Hamburger Button sichtbar */
    .nav-toggle,
    .hamburger,
    .menu-toggle{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
        border-radius:12px !important;
        border:1px solid rgba(15,15,15,.25) !important;
        background:#ffffff !important;
        color:#111 !important;
        font-size:30px !important;
        line-height:1 !important;
        cursor:pointer !important;
        position:relative !important;
        z-index:10001 !important;
        box-shadow:0 10px 24px rgba(0,0,0,.08) !important;
    }

    .nav-toggle span,
    .hamburger span,
    .menu-toggle span,
    .nav-toggle div,
    .hamburger div,
    .menu-toggle div{
        background:#111 !important;
        color:#111 !important;
    }

    .nav-toggle::before,
    .nav-toggle::after,
    .hamburger::before,
    .hamburger::after,
    .menu-toggle::before,
    .menu-toggle::after{
        background:#111 !important;
        color:#111 !important;
    }

    /* Falls Button leer ist, Unicode-Hamburger erzeugen */
    .nav-toggle:empty::after,
    .hamburger:empty::after,
    .menu-toggle:empty::after{
        content:"☰" !important;
        background:transparent !important;
        color:#111 !important;
        font-size:31px !important;
        line-height:1 !important;
    }

    /* Mobile Menu Panel */
    .menu{
        position:absolute !important;
        top:76px !important;
        left:18px !important;
        right:18px !important;
        display:none !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:0 !important;
        padding:20px !important;
        border-radius:0 0 24px 24px !important;
        background:rgba(5,5,5,.96) !important;
        border:1px solid rgba(212,175,55,.20) !important;
        box-shadow:0 30px 80px rgba(0,0,0,.55) !important;
        backdrop-filter:blur(14px) !important;
        z-index:10000 !important;
    }

    .menu.open,
    nav.open .menu,
    .nav.open .menu,
    .navbar.open .menu{
        display:flex !important;
    }

    .menu a,
    .menu button{
        width:100% !important;
        display:block !important;
        padding:13px 0 !important;
        color:#ffffff !important;
        font-weight:800 !important;
        text-decoration:none !important;
        background:transparent !important;
        border:none !important;
    }

    .menu a:hover{
        color:#f5d66f !important;
    }

    .menu .btn,
    .menu a.btn{
        width:auto !important;
        margin-top:14px !important;
        padding:14px 20px !important;
        color:#111 !important;
        background:linear-gradient(135deg,#d4af37,#fff1b8) !important;
        border-radius:12px !important;
        box-shadow:0 16px 34px rgba(212,175,55,.20) !important;
    }

    .dropdown,
    .has-dropdown{
        width:100% !important;
    }

    .dropdown-menu,
    .submenu,
    .dropdown-content{
        position:static !important;
        display:block !important;
        width:100% !important;
        margin:8px 0 12px !important;
        padding:10px 14px !important;
        background:rgba(255,255,255,.06) !important;
        border:1px solid rgba(212,175,55,.16) !important;
        border-radius:14px !important;
        box-shadow:none !important;
    }

    .dropdown-menu a,
    .submenu a,
    .dropdown-content a{
        color:#fff !important;
        padding:10px 0 !important;
    }

    /* Hero Mobile */
    .hero,
    .page-hero,
    .page-hero-person{
        min-height:auto !important;
        padding:0 !important;
        overflow:hidden !important;
        background:
          radial-gradient(circle at 68% 58%, rgba(212,175,55,.16), transparent 30%),
          linear-gradient(135deg,#050505 0%,#11100d 58%,#171309 100%) !important;
    }

    .hero-inner,
    .page-hero-inner{
        width:100% !important;
        min-height:auto !important;
        display:flex !important;
        flex-direction:column !important;
        gap:28px !important;
        padding:46px 28px 0 !important;
    }

    .hero-content,
    .page-hero-content{
        max-width:100% !important;
        width:100% !important;
        padding:0 !important;
        text-align:left !important;
    }

    .kicker,
    .page-kicker{
        font-size:12px !important;
        letter-spacing:.18em !important;
        margin-bottom:18px !important;
        color:#d4af37 !important;
    }

    .hero h1,
    .page-hero h1{
        font-size:clamp(38px, 9.5vw, 56px) !important;
        line-height:1.06 !important;
        letter-spacing:-.04em !important;
        max-width:100% !important;
        color:#ffffff !important;
        margin-bottom:22px !important;
    }

    .hero p,
    .page-hero p{
        font-size:16px !important;
        line-height:1.75 !important;
        max-width:100% !important;
        color:#c8c1b0 !important;
    }

    .hero-image,
    .page-hero-image{
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        align-items:flex-end !important;
        min-height:330px !important;
        margin:0 auto !important;
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        padding:0 !important;
    }

    .hero-image img,
    .page-hero-image img{
        max-width:84vw !important;
        max-height:390px !important;
        width:auto !important;
        height:auto !important;
        object-fit:contain !important;
        object-position:center bottom !important;
        border:none !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        filter:drop-shadow(0 26px 45px rgba(0,0,0,.55)) !important;
        margin:0 auto !important;
    }

    .section{
        padding:58px 0 !important;
    }

    .grid,
    .offset-grid,
    .skill-dashboard,
    .value-grid{
        grid-template-columns:1fr !important;
        gap:20px !important;
    }
}

/* Sehr kleine Handys */
@media(max-width:520px){

    header,
    .header,
    .site-header{
        min-height:70px !important;
        padding:0 14px !important;
    }

    .nav,
    .navbar{
        min-height:70px !important;
    }

    .logo img,
    .brand img{
        max-width:165px !important;
    }

    .nav-toggle,
    .hamburger,
    .menu-toggle{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        font-size:28px !important;
    }

    .menu{
        top:70px !important;
        left:12px !important;
        right:12px !important;
        padding:18px !important;
    }

    .hero-inner,
    .page-hero-inner{
        padding:38px 22px 0 !important;
        gap:22px !important;
    }

    .hero h1,
    .page-hero h1{
        font-size:clamp(34px, 10.5vw, 46px) !important;
    }

    .hero-image,
    .page-hero-image{
        min-height:310px !important;
    }

    .hero-image img,
    .page-hero-image img{
        max-width:86vw !important;
        max-height:340px !important;
    }
}