* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Avenir LT Std', 'Avenir Next', Avenir, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #fb3200;
  background: var(--page-bg, #e0e0e0);
  overflow-x: hidden;
}

@font-face{
  font-family: 'Avenir LT Std';
  src: url('assets/Avenir LT Std 55 Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Avenir LT Std';
  src: url('assets/Avenir LT Std 55 Oblique.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: 'Avenir LT Std';
  src: url('assets/Avenir LT Std 95 Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Avenir LT Std';
  src: url('assets/Avenir LT Std 95 Black Oblique.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root{
  --orange: #fb3200;
  --orange-2: #fe1430;
  --yellow: #ffc400;
  --rail-pad: clamp(56px, 6vmin, 88px);
  --side-pad: clamp(24px, 3.5vw, 56px);
  --maxw: 100vw;
  --fs: clamp(28px, 10vmin, 140px);
  --hx: 0px;
  --hy: -7px;
  --cta-y: -28px;
  --menu-x: 108px;
  --menu-y: 598px;
}

/* Links: niemals blau, immer orange (rot) */
 a, a:visited{ color: var(--orange); text-decoration-color: var(--orange); }
 a:hover{ color: var(--orange-2); text-decoration-color: var(--orange-2); }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(32px, 6vh, 72px) var(--side-pad) clamp(24px, 4vh, 64px) calc(var(--side-pad) + var(--rail-pad));
  min-height: 100vh;
}

.rail{
  position: fixed;
  left: 10px;
  font-weight: 600;
  color: #fb3200;
  opacity: .9;
  letter-spacing: .5px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  user-select: none;
}
.rail-top{ top: clamp(32px, 6vh, 72px); }
.rail-bottom{ bottom: clamp(32px, 6vh, 72px); }

.headline{
  margin: 0;
  line-height: 1;
  font-size: var(--fs);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}
.headline span{
  color: #000;
  display: inline-block;
  transform: translate(var(--hx), calc(-0.06em + var(--hy)));
}

.cta{
  margin: 22px 0 0 0;
  font-size: calc(var(--fs) * .70);
  font-weight: 400;
  font-style: italic;
  background: #fb3200;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  padding: 0;
  letter-spacing: .5px;
  transform: translateY(var(--cta-y));
  gap: 0;
  cursor: pointer;
}
.cta > span{
  background: transparent;
  color: #ffb6ff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  display: flex;
  align-items: center;
  line-height: 0.85;
  padding: 0.1em 0 0 0;
  position: relative;
  top: 0;
}

.intro{
  margin: 28px 0 10px 0;
  max-width: 38ch;
  font-size: clamp(14px, 2.1vmin, 18px);
  line-height: 1.1;
  hyphens: none;
  color: var(--intro-color, #ffffff);
}

.divider{
  height: 1px;
  background: #fb3200;
  width: 100vw;
  position: relative;
  left: calc(-1 * (var(--side-pad) + var(--rail-pad)));
  margin: 22px 0 0 0;
}

.status{
  display: grid; grid-template-columns: auto auto auto 1fr; grid-template-rows: auto auto; align-items: baseline;
  gap: 8px 12px; margin: 10px 0 0 0; font-size: clamp(12px, 1.8vmin, 16px);
}
.status .date{ grid-column: 1; grid-row: 1; }
.status .sep{ grid-column: 2; grid-row: 1; opacity: .6; }
.status .city{ grid-column: 3; grid-row: 1; font-weight: 400; }
.status .avail{ grid-column: 4; grid-row: 1; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status .led{ width: 10px; height: 10px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.9); display: inline-block; }
  .status .time{ grid-column: 1 / -1; grid-row: 2; font-size: calc(var(--fs) * .9); line-height: .9; color: #c6c6c6; pointer-events: none; user-select: none; }
.cta .chev{ margin-left: .25em; }
.cta .chev-btn{ color: #ffb6ff; background: transparent; font-size: 1em; line-height: 1; padding: 0 0.2em; display: block; border: 0; margin: 0; }

.menu{
  position: fixed;
  top: var(--menu-y);
  left: var(--menu-x);
  right: var(--side-pad);
  margin-top: 0;
  display: grid;
  gap: clamp(2px, 0.8vh, 14px);
  z-index: 2;
}

/* Project list inside panels */
.project-list{ display: grid; gap: clamp(24px, 3vh, 40px); margin-top: 16px; }
.project-item{ display: flex; flex-direction: column; gap: 12px; }
.project-title{ font-size: clamp(20px, 3vmin, 28px); font-weight: 900; color: var(--orange); margin: 0; line-height: 1.2; }
.project-description{ font-size: clamp(14px, 2vmin, 18px); font-weight: 400; color: #000; margin: 0; line-height: 1.4; max-width: 60ch; }
.project-logo{ max-width: 100%; height: auto; margin-top: 8px; }
.project-item:first-child .project-logo{ max-width: 200px; }
.item{
  text-decoration: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  cursor: pointer;
}
.item .text{
  color: #000;
  font-size: var(--fs);
  line-height: 0.95;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}
.item .chev{
  color: #000;
  font-weight: 400;
  font-size: var(--fs);
}

/* Subpage link below menu */
.menu .sub-link{
  appearance: none;
  background: transparent;
  border: 0;
  font-size: clamp(12px, 1.8vmin, 14px);
  text-transform: none;
  font-weight: 600;
  justify-self: start;
  margin-top: 6px;
  cursor: pointer;
  padding: 0;
  color: var(--orange);
  text-align: left;
}

.stage{ position: relative; min-height: calc(100vh - clamp(24px, 4vh, 64px) - clamp(32px, 6vh, 72px)); }
.home-screen{ transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s; }
body.panel-open .home-screen{ transform: translateX(-40vw); opacity: 0; pointer-events: none; }
body.panel-open .menu{ opacity: 0; pointer-events: none; }

.panel{
  position: absolute; inset: 0; padding: clamp(32px, 6vh, 72px) 0 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100vw); opacity: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
}
#panel-sideprojekts{
  padding-top: clamp(16px, 2vh, 32px);
}
.panel .panel-inner{ width: 100%; padding: 0 var(--side-pad) 0 calc(var(--side-pad) + var(--rail-pad)); }
.panel-title{ font-size: var(--fs); font-weight: 400; margin: 0 0 .2em 0; color: #fb3200; }
.panel-copy{ font-size: clamp(16px, 2.2vmin, 22px); max-width: 60ch; }
.contact-form{ display: grid; gap: 10px; margin-top: 12px; max-width: min(640px, 100%); }
.contact-form input, .contact-form textarea{ width: 100%; padding: 10px 12px; border: 1px solid #bbb; border-radius: 8px; font: inherit; color: #000; }
.contact-form label{ font-weight: 600; color: #000; }
.contact-submit{ appearance: none; border: 0; background: var(--orange); color: #fff; font-weight: 800; padding: 12px 16px; border-radius: 10px; cursor: pointer; justify-self: start; }
.contact-submit:hover{ background: var(--orange-2); }
.contact-submit:disabled{ opacity: 0.6; cursor: not-allowed; }
.contact-hint{ font-size: 12px; color: #444; }
.contact-status{ font-size: 14px; font-weight: 600; margin-top: 8px; }
.panel .product-image{ display: block; max-width: 100%; height: auto; margin-top: 16px; }
/* Produktseiten: Titel und Texte schwarz */
#panel-img .panel-title, #panel-config .panel-title, #panel-gen3d .panel-title{ color: #000; }
#panel-img .panel-copy, #panel-config .panel-copy, #panel-gen3d .panel-copy{ color: #000; }
.product-figure{ position: relative; display: block; margin: 16px 0 0 0; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.product-figure img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.product-cta{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: transparent; color: #fff !important; text-decoration: none; font-weight: 800; padding: clamp(12px, 2vh, 18px) clamp(24px, 4vw, 36px); border-radius: 999px; box-shadow: none; border: 3px solid #fff; font-size: clamp(14px, 2.5vw, 28px); letter-spacing: .5px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; white-space: nowrap; }
.product-cta:hover{ background: rgba(255,255,255,0.12); color: #fff !important; }
.panel.active{ transform: translateX(0); opacity: 1; }

.chev-btn{
  appearance: none; border: 0; background: transparent; color: #000;
  font: inherit; font-weight: 400; font-size: var(--fs); line-height: 1; cursor: pointer;
}
body.panel-open .chev-btn{ visibility: hidden; }

.back-arrow{
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%) rotate(180deg);
  appearance: none; border: 0; background: transparent; color: var(--orange);
  font-weight: 400; font-size: var(--fs); line-height: 1; cursor: pointer; display: none;
}
body.panel-open .back-arrow{ display: block; }

@media (min-width: 1024px){
  html, body{ overflow-y: hidden; }
}

.lang-toggle{ position: fixed; top: 12px; right: 12px; z-index: 1001; background: transparent; color: #fb3200; padding: 0; border-radius: 0; font-size: clamp(14px, 2.1vmin, 18px); line-height: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.lang-toggle button{ appearance: none; background: transparent; color: inherit; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; font-weight: inherit; }
.lang-toggle button[aria-current="true"]{ text-decoration: underline; text-underline-offset: 2px; }
.lang-toggle .sep{ opacity: .6; }

@media print{
  .rail{ display:none; }
  .wrap{ padding-left: var(--side-pad); }
}

/* Mobile Navigation */
.mobile-nav{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #e0e0e0;
  padding: 16px 20px;
  z-index: 100;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(251, 50, 0, 0.2);
}
.mobile-nav-left{
  font-weight: 700;
  font-size: 14px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mobile-nav-center{
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--orange);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 0;
}
.mobile-nav-right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}
.mobile-nav-right button{
  appearance: none;
  background: transparent;
  border: 0;
  color: #000;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.mobile-nav-right button[aria-current="true"]{
  color: var(--orange);
}

/* Mobile Footer */
.mobile-footer{
  display: none;
  padding: 24px 20px 32px 20px;
  text-align: center;
  background: #e0e0e0;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.mobile-footer button{
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--orange);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 0;
}
.mobile-footer .footer-sep{
  color: var(--orange);
  opacity: 0.6;
  font-size: 12px;
}

/* Mobile: vertical-only scrolling, no horizontal overflow */
@media (max-width: 768px){
  html, body{ overflow-x: hidden; overflow-y: auto; }
  .rail{ display: none; }
  .mobile-nav{ display: grid; }
  .mobile-footer{ display: flex; }
  .wrap{ padding: calc(clamp(32px, 6vh, 72px) + 60px) var(--side-pad) clamp(24px, 4vh, 64px) var(--side-pad); }
  .stage{ min-height: auto; }
  .menu{ position: static; left: auto; right: auto; top: auto; }
  .item .text, .item .chev{ font-size: clamp(24px, 8vmin, 56px); }
  .panel{ 
    position: static; 
    inset: auto; 
    transform: none !important;
    opacity: 1 !important;
    overflow-y: visible;
    padding: 0;
    display: none;
  }
  .panel.active{
    display: block;
  }
  .panel .panel-inner{ 
    padding-left: var(--side-pad); 
    padding-right: var(--side-pad);
    padding-top: 24px;
    padding-bottom: 48px;
  }
  body.panel-open .home-screen{ display: none; }
  body.panel-open .menu{ display: none; }
  .back-arrow{ 
    display: none;
    position: fixed;
    left: 20px;
    top: calc(60px + 32px);
    transform: rotate(180deg);
    font-size: 32px;
    color: var(--orange);
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 99;
  }
  body.panel-open .back-arrow{ display: block !important; }
  .product-image{ max-width: 100%; height: auto; }
  .product-figure{ aspect-ratio: auto; height: auto; }
  .panel-title{ font-size: clamp(32px, 8vw, 48px); }
  .panel-copy{ font-size: clamp(16px, 3vw, 20px); }
  .project-logo{ max-width: 100%; }
}

/* Team profiles styling */
.team-profiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: 24px;
  align-items: start; /* Align start so text blocks start on same baseline when image heights match */
}
.team-member{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.team-photo{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4; /* Enforce consistent image height across columns */
  object-fit: cover;
  object-position: center bottom;
  display: block;
  margin-bottom: 16px;
  border-radius: 8px;
}
.team-name{
  font-size: clamp(20px, 3.2vmin, 28px);
  font-weight: 900;
  color: #000;
  margin: 0 0 8px 0;
  line-height: 1.2;
}
.team-role{
  font-size: clamp(14px, 2vmin, 16px);
  font-weight: 600;
  color: var(--orange);
  margin: 0 0 6px 0;
  line-height: 1.3;
}
.team-description{
  font-size: clamp(12px, 1.8vmin, 14px);
  font-weight: 400;
  color: #444;
  margin: 0;
  line-height: 1.4;
}

/* Mobile: Team untereinander */
@media (max-width: 768px){
  .team-profiles{
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vh, 48px);
  }
  .team-photo{ aspect-ratio: auto; object-fit: contain; object-position: center; }
  .team-name{
    font-size: clamp(24px, 4vmin, 32px);
  }
  .team-role{
    font-size: clamp(16px, 2.4vmin, 18px);
  }
  .team-description{
    font-size: clamp(14px, 2vmin, 16px);
  }
}