:root{
  --navy:#06131c;
  --navy-2:#081b27;
  --navy-3:#0b2432;
  --gold:#dec68f;
  --gold-bright:#ead9ad;
  --gold-muted:#a99365;
  --text:#eef2f2;
  --muted:#aebbc0;
  --line:rgba(222,198,143,.25);
  --line-soft:rgba(255,255,255,.08);
  --panel:rgba(255,255,255,.025);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--navy);
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

::selection{
  background:var(--gold);
  color:var(--navy);
}


/* -------------------------------------------------
   HEADER
------------------------------------------------- */

.bridge-header{
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  min-height:90px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.back-link{
  display:flex;
  align-items:center;
  gap:12px;
  color:#dce3e5;
  font-size:.82rem;
  letter-spacing:.08em;
  transition:color .25s ease;
}

.back-link:hover{
  color:var(--gold);
}

.back-arrow{
  color:var(--gold);
  font-size:1.15rem;
}

.header-mark{
  color:var(--gold);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
}

.header-mark span{
  display:inline-block;
  margin:0 9px;
  color:rgba(255,255,255,.38);
}


/* -------------------------------------------------
   COMMON
------------------------------------------------- */

.section-shell{
  position:relative;
  width:min(1220px,calc(100% - 48px));
  margin:0 auto;
}

.section-shell.narrow{
  width:min(980px,calc(100% - 48px));
}

.section-number{
  margin:0 0 26px;
  color:var(--gold);
  font-size:.69rem;
  font-weight:600;
  letter-spacing:.22em;
}

h1,
h2,
h3,
blockquote{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

h2{
  margin:0;
  color:#f3f5f4;
  font-size:clamp(2.2rem,4.6vw,4.4rem);
  line-height:1.08;
  letter-spacing:-.025em;
}

h2 span{
  color:var(--gold);
}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible{
  opacity:1;
  transform:none;
}


/* -------------------------------------------------
   HERO
------------------------------------------------- */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 43%,rgba(37,74,88,.32),transparent 34%),
    radial-gradient(circle at 50% 75%,rgba(222,198,143,.055),transparent 30%),
    linear-gradient(145deg,#071b27 0%,#06131c 52%,#040d13 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.32;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom,transparent,black 30%,black 70%,transparent);
}

.hero-glow{
  position:absolute;
  width:720px;
  height:720px;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(222,198,143,.08);
  border-radius:50%;
  box-shadow:
    0 0 120px rgba(222,198,143,.035),
    inset 0 0 120px rgba(222,198,143,.025);
}

.hero-glow::before,
.hero-glow::after{
  content:"";
  position:absolute;
  border:1px solid rgba(222,198,143,.045);
  border-radius:50%;
}

.hero-glow::before{
  inset:75px;
}

.hero-glow::after{
  inset:150px;
}

.hero-inner{
  position:relative;
  z-index:2;
  width:min(1080px,calc(100% - 48px));
  padding:150px 0 100px;
  text-align:center;
}

.eyebrow{
  margin:0 0 34px;
  color:var(--gold);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
}

.hero h1{
  margin:0 auto;
  max-width:1050px;
  color:#f4f6f5;
  font-size:clamp(3.4rem,7vw,7rem);
  line-height:.98;
  letter-spacing:-.045em;
}

.hero h1 span{
  color:var(--gold);
}

.hero-lead{
  max-width:770px;
  margin:42px auto 0;
  color:#c3cdd0;
  font-size:clamp(1rem,1.4vw,1.2rem);
  line-height:1.85;
}

.hero-signature{
  margin:52px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  color:#dfe4e4;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.2em;
}

.hero-signature i{
  width:70px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:#88989e;
  font-size:.56rem;
  letter-spacing:.25em;
}

.scroll-cue b{
  color:var(--gold);
  font-size:1.15rem;
  font-weight:400;
  animation:cue 2s ease-in-out infinite;
}

@keyframes cue{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}


/* -------------------------------------------------
   THOUGHT
------------------------------------------------- */

.thought{
  position:relative;
  padding:150px 0;
  background:#071720;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.thought h2{
  max-width:930px;
}

.large-copy{
  max-width:790px;
  margin:38px 0 0;
  color:#b9c5c8;
  font-size:1.08rem;
  line-height:1.95;
}

.process{
  margin-top:78px;
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  gap:24px;
}

.process div{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.process small{
  color:#73868e;
  font-size:.62rem;
  letter-spacing:.18em;
}

.process strong{
  color:var(--gold);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.18em;
}

.process-line{
  height:1px;
  background:linear-gradient(90deg,var(--line),rgba(222,198,143,.08));
}


/* -------------------------------------------------
   BRAND SECTIONS
------------------------------------------------- */

.brand-section{
  position:relative;
  padding:160px 0;
  overflow:hidden;
}

.ihev-section{
  background:
    radial-gradient(circle at 18% 48%,rgba(27,69,84,.2),transparent 28%),
    #06131c;
}

.orientum-section{
  background:
    radial-gradient(circle at 82% 48%,rgba(222,198,143,.065),transparent 29%),
    linear-gradient(135deg,#071821,#081b25);
}

.brand-grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:100px;
  align-items:center;
}

.brand-grid.reverse{
  grid-template-columns:1.12fr .88fr;
}

.brand-visual{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:55px;
  border:1px solid rgba(222,198,143,.16);
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
  box-shadow:
    0 35px 90px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.015);
}

.brand-visual::before,
.brand-visual::after{
  content:"";
  position:absolute;
  width:38px;
  height:38px;
  pointer-events:none;
}

.brand-visual::before{
  top:-1px;
  left:-1px;
  border-top:1px solid var(--gold);
  border-left:1px solid var(--gold);
}

.brand-visual::after{
  right:-1px;
  bottom:-1px;
  border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
}

.brand-aura{
  position:absolute;
  width:65%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(222,198,143,.035);
  filter:blur(45px);
}

.ihev-logo{
  position:relative;
  z-index:2;
  width:min(88%,430px);
  max-height:400px;
  object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.3));
}

.orientum-logo{
  position:relative;
  z-index:2;
  width:min(100%,600px);
  object-fit:contain;
}

.brand-content{
  position:relative;
}

.brand-kicker{
  margin:0 0 18px;
  color:#899ba2;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.2em;
}

.brand-content h2{
  margin-bottom:36px;
}

.brand-content > p:not(.section-number):not(.brand-kicker){
  max-width:690px;
  margin:0 0 20px;
  color:#c3cdd0;
  font-size:1rem;
  line-height:1.9;
}

.brand-content strong{
  color:#edf1f1;
  font-weight:600;
}

.principles{
  margin-top:45px;
  padding-top:25px;
  display:flex;
  flex-wrap:wrap;
  gap:11px 24px;
  border-top:1px solid var(--line);
}

.principles span{
  color:var(--gold);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.16em;
}

.brand-statement{
  margin:40px 0 0;
  padding:28px 30px;
  border-left:1px solid var(--gold);
  background:linear-gradient(90deg,rgba(222,198,143,.055),transparent);
}

.brand-statement span,
.brand-statement strong{
  display:block;
}

.brand-statement span{
  margin-bottom:8px;
  color:#aab8bc;
  font-size:.9rem;
}

.brand-statement strong{
  max-width:570px;
  color:var(--gold-bright);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:400;
  line-height:1.5;
}


/* -------------------------------------------------
   TRANSITION
------------------------------------------------- */

.transition{
  position:relative;
  padding:125px 24px;
  text-align:center;
  background:#040d13;
}

.transition-line{
  width:1px;
  height:80px;
  margin:auto;
  background:linear-gradient(to bottom,transparent,var(--gold),transparent);
  opacity:.65;
}

.transition-inner{
  padding:50px 0;
}

.transition-inner > p{
  margin:0 0 27px;
  color:#75878e;
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.25em;
}

.transition blockquote{
  margin:0;
  color:#f1f3f2;
  font-size:clamp(2.2rem,4.5vw,4.5rem);
  line-height:1.12;
}

.transition blockquote span{
  color:var(--gold);
}

.transition small{
  display:block;
  margin-top:37px;
  color:var(--gold-muted);
  font-size:.62rem;
  letter-spacing:.24em;
}


/* -------------------------------------------------
   HUMAN
------------------------------------------------- */

.human{
  position:relative;
  min-height:780px;
  padding:160px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(33,69,82,.24),transparent 35%),
    #040e14;
}

.human::before{
  content:"";
  position:absolute;
  width:580px;
  height:580px;
  border:1px solid rgba(222,198,143,.07);
  border-radius:50%;
}

.human-glow{
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(222,198,143,.035);
  filter:blur(50px);
}

.human-inner{
  position:relative;
  z-index:2;
  width:min(900px,100%);
}

.human h2{
  margin-bottom:42px;
  font-size:clamp(4rem,8vw,7.5rem);
  color:var(--gold);
}

.human-values{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 32px;
  color:#c6d0d2;
  font-size:1rem;
}

.human blockquote{
  margin:52px 0 0;
  color:#eef2f1;
  font-size:clamp(1.8rem,3.5vw,3.3rem);
  line-height:1.3;
}

.human blockquote strong{
  color:var(--gold-bright);
  font-weight:400;
}

.human-signature{
  margin-top:60px;
  color:#89999f;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.22em;
}

.human-signature span{
  margin:0 10px;
  color:var(--gold);
}


/* -------------------------------------------------
   PORTALS
------------------------------------------------- */

.portals{
  padding:150px 0 100px;
  background:
    linear-gradient(180deg,#071720,#06131c);
}

.portal-intro{
  max-width:900px;
  margin-bottom:70px;
}

.portal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

.portal-card{
  position:relative;
  min-height:520px;
  padding:48px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line-soft);
  background:
    linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.portal-card.featured{
  border-color:rgba(222,198,143,.28);
  background:
    linear-gradient(145deg,rgba(222,198,143,.055),rgba(255,255,255,.01));
}

.portal-card:hover{
  transform:translateY(-5px);
  border-color:rgba(222,198,143,.55);
  box-shadow:0 32px 70px rgba(0,0,0,.24);
}

.portal-type{
  margin:0 0 30px;
  color:#82949b;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.2em;
}

.portal-card h3{
  margin:0;
  color:var(--gold);
  font-size:clamp(2.7rem,5vw,4.7rem);
  line-height:1;
}

.portal-tagline{
  margin:14px 0 26px !important;
  color:#edf1f0 !important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.4rem !important;
}

.portal-card > p{
  max-width:500px;
  margin:0;
  color:#acbabf;
  line-height:1.8;
}

.portal-topics{
  margin:30px 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.portal-topics span{
  padding:6px 10px;
  border:1px solid rgba(222,198,143,.17);
  color:#b8aa84;
  font-size:.62rem;
  letter-spacing:.08em;
}

.portal-button{
  margin-top:auto;
  width:max-content;
  max-width:100%;
  padding:13px 0 9px;
  color:var(--gold-bright);
  border-bottom:1px solid var(--gold);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.13em;
  transition:color .25s ease,padding .25s ease;
}

.portal-button span{
  margin-left:12px;
}

.portal-button:hover{
  padding-right:8px;
  color:#fff;
}

.return-home{
  margin-top:65px;
  text-align:center;
}

.return-home a{
  color:#8fa0a6;
  font-size:.75rem;
  letter-spacing:.08em;
  transition:color .25s ease;
}

.return-home a:hover{
  color:var(--gold);
}


/* -------------------------------------------------
   FOOTER
------------------------------------------------- */

.bridge-footer{
  min-height:120px;
  padding:30px 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid rgba(255,255,255,.06);
  background:#040c11;
}

.bridge-footer > div:first-child{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.bridge-footer > div:first-child > span{
  color:#dce3e4;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
}

.bridge-footer small{
  color:#687a81;
  font-size:.65rem;
  letter-spacing:.07em;
}

.footer-links{
  display:flex;
  gap:28px;
}

.footer-links a{
  color:#82949a;
  font-size:.69rem;
  letter-spacing:.1em;
  transition:color .25s ease;
}

.footer-links a:hover{
  color:var(--gold);
}


/* -------------------------------------------------
   RESPONSIVE
------------------------------------------------- */

@media(max-width:980px){

  .brand-grid,
  .brand-grid.reverse{
    grid-template-columns:1fr;
    gap:65px;
  }

  .brand-grid.reverse .brand-content{
    order:2;
  }

  .brand-grid.reverse .brand-visual{
    order:1;
  }

  .brand-visual{
    min-height:440px;
  }

  .portal-card{
    padding:38px;
  }

}


@media(max-width:760px){

  .bridge-header{
    min-height:72px;
    padding:0 22px;
  }

  .back-link{
    font-size:.68rem;
  }

  .header-mark{
    font-size:.58rem;
    letter-spacing:.1em;
  }

  .hero-inner{
    width:min(100% - 36px,1080px);
    padding-top:130px;
  }

  .hero h1{
    font-size:clamp(3rem,14vw,5rem);
  }

  .hero-lead{
    font-size:.96rem;
  }

  .hero-glow{
    width:520px;
    height:520px;
  }

  .thought,
  .brand-section,
  .portals{
    padding:110px 0;
  }

  .section-shell,
  .section-shell.narrow{
    width:calc(100% - 36px);
  }

  .process{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:55px;
  }

  .process div{
    padding:0 0 18px;
    border-bottom:1px solid var(--line);
  }

  .process-line{
    display:none;
  }

  .brand-grid{
    gap:50px;
  }

  .brand-visual{
    min-height:350px;
    padding:35px;
  }

  .ihev-logo{
    max-height:300px;
  }

  .principles{
    gap:10px 18px;
  }

  .transition{
    padding:90px 18px;
  }

  .transition-line{
    height:55px;
  }

  .human{
    min-height:680px;
    padding:120px 20px;
  }

  .human::before{
    width:420px;
    height:420px;
  }

  .human-values{
    flex-direction:column;
    gap:5px;
  }

  .portal-grid{
    grid-template-columns:1fr;
  }

  .portal-card{
    min-height:470px;
  }

  .bridge-footer{
    padding:35px 22px;
    flex-direction:column;
    align-items:flex-start;
  }

}


@media(max-width:460px){

  .header-mark{
    display:none;
  }

  .eyebrow{
    font-size:.58rem;
    line-height:1.7;
  }

  .hero h1{
    font-size:3rem;
  }

  h2{
    font-size:2.35rem;
  }

  .hero-signature{
    gap:12px;
    font-size:.61rem;
  }

  .hero-signature i{
    width:35px;
  }

  .brand-visual{
    min-height:300px;
    padding:25px;
  }

  .brand-statement{
    padding:24px 20px;
  }

  .portal-card{
    padding:30px 25px;
  }

}


/* -------------------------------------------------
   REDUCED MOTION
------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .scroll-cue b{
    animation:none;
  }

}
/* =================================================
   PREMIUM FINISH
================================================= */

/* Marken in ihren Präsentationsflächen stärker inszenieren */
.ihev-logo{
  width:min(96%,540px);
  max-height:470px;
}

.orientum-logo{
  width:min(108%,700px);
  max-width:none;
}

/* Dezente Bewegung der Markenflächen */
.brand-visual{
  transition:
    border-color .45s ease,
    box-shadow .45s ease,
    transform .45s cubic-bezier(.2,.7,.2,1);
}

@media (hover:hover) and (pointer:fine){
  .brand-visual:hover{
    transform:translateY(-4px);
    border-color:rgba(222,198,143,.34);
    box-shadow:
      0 42px 100px rgba(0,0,0,.28),
      inset 0 0 0 1px rgba(255,255,255,.02);
  }
}

/* Übergang stärker als Orientierungspfad lesen */
.transition-line{
  position:relative;
}

.transition-line::after{
  content:"↓";
  position:absolute;
  left:50%;
  bottom:-15px;
  transform:translateX(-50%);
  padding:3px 7px;
  background:#040d13;
  color:var(--gold);
  font-size:.8rem;
  font-weight:400;
}

/* Der Mensch – drei feine Markenpunkte */
.human-values span{
  position:relative;
  padding-left:16px;
}

.human-values span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:4px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 10px rgba(222,198,143,.28);
}

/* Abschlussportale – hochwertige Richtungsführung */
.portal-button{
  position:relative;
  min-width:205px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.portal-button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transition:transform .35s ease;
}

.portal-button span{
  display:inline-block;
  transition:transform .3s ease;
}

@media (hover:hover) and (pointer:fine){
  .portal-button:hover span{
    transform:translate(4px,-4px);
  }

  .portal-button:hover::after{
    transform:scaleX(1.08);
  }
}

/* Mobile: Logo-Vergrößerung kontrollieren */
@media(max-width:760px){
  .ihev-logo{
    width:min(94%,430px);
    max-height:350px;
  }

  .orientum-logo{
    width:min(105%,600px);
  }
}

@media(max-width:460px){
  .human-values span{
    width:max-content;
    max-width:100%;
    margin:auto;
  }
}
/* ==========================================
   FINAL BRAND POLISH
========================================== */

/* IHEV-Wappen etwas stärker inszenieren */
.ihev-logo{
  width:min(100%,620px);
  max-height:520px;
  transform:scale(1.12);
}

/* Feine Pfeilführung an den Übergängen */
.transition-line::after{
  content:"↓";
  color:var(--gold);
  font-size:.9rem;
  letter-spacing:0;
  opacity:.75;
  text-shadow:0 0 14px rgba(222,198,143,.25);
}

/* Pfeile der Abschlussportale etwas präsenter */
.portal-button span{
  font-size:1.05em;
}

@media (hover:hover) and (pointer:fine){
  .portal-button:hover span{
    transform:translate(6px,-4px);
  }
}

/* Mobil keine übermäßige Skalierung */
@media(max-width:760px){
  .ihev-logo{
    transform:scale(1.04);
  }
}