:root{
  --topbar-height: clamp(56px, 7.5vh, 72px);
  --start-spacing: clamp(2.7rem, 6.3vh, 4.8rem);
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-hover-bg: rgba(255, 255, 255, 0.17);
  --glass-blur: blur(9px);
  --glass-shadow: 0 8px 12px rgba(0, 0, 0, 0.10);
}

::-webkit-scrollbar{width:0;height:0}
::-webkit-scrollbar-track{background:transparent}
html.fp-enabled, .fp-enabled body{margin:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}

*{
  box-sizing:border-box;
  user-select:none;
  -webkit-user-select:none;
  caret-color:transparent;
}
html,body{
  height:100%;
  margin:0;
  padding:0;
  cursor:default;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#FCFFFC;
  background:#242633;
  overflow:hidden;
}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit;padding:0}

/* Glass panel */
.glass-panel,
.topbar_component,
.project-media-box,
.btn-action,
.glass-btn,
.impressum-card{
  background:var(--glass-bg) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:none !important;
  border-radius:16px;
  box-shadow:var(--glass-shadow) !important;
  color:inherit;
  transition:transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

/* Action buttons */
.glass-btn,
.btn-action{
  border-radius:9999px !important;
  cursor:pointer;
  padding:0.32rem 1.15rem;
  min-height:31px;
  box-sizing:border-box;
  font-size:clamp(0.68rem, 0.8vw, 0.78rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.45rem;
  line-height:1;
}
.glass-btn:hover,
.glass-btn:focus-visible,
.btn-action:hover,
.btn-action:focus-visible{
  transform:translateY(-2px);
  background:var(--glass-hover-bg) !important;
  box-shadow:0 12px 36px rgba(0,0,0,0.32) !important;
}

/* Light theme typography */
.is-light-theme{
  color:#181A20;
}

/* Top bar & drawer */
.topbar_component{
  position:fixed;
  left:0;
  top:0;
  right:0;
  z-index:9999;
  width:100%;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border-radius:0 !important;
  transition:background-color 200ms ease, box-shadow 200ms ease;
  overflow:hidden;
}

.topbar-main-row{
  width:100%;
  height:var(--topbar-height);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0 clamp(1rem, 4vw, 3rem);
}

.topbar-nav-items{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem, 2.5vw, 2rem);
  height:100%;
}

.nav-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:clamp(44px, 6vh, 58px);
  width:clamp(44px, 6vh, 58px);
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  color:rgba(252,255,252,0.85);
  transition:color 200ms ease, transform 180ms ease, filter 200ms ease;
  position:relative;
  cursor:pointer;
}
.nav-icon-link svg{
  transition:transform 180ms ease, filter 180ms ease;
}
.nav-icon-start svg{
  width:clamp(30px, 4.4vh, 42px);
  height:clamp(30px, 4.4vh, 42px);
  fill:currentColor;
}
.nav-icon-sub svg{
  width:clamp(23px, 3.4vh, 32px);
  height:clamp(23px, 3.4vh, 32px);
}
.nav-icon-link:hover{
  color:#FCFFFC;
  transform:scale(1.12);
  filter:drop-shadow(0 2px 8px rgba(252,255,252,0.3));
}
.nav-icon-link.is-current{
  color:#FCFFFC;
  filter:drop-shadow(0 0 10px rgba(252,255,252,0.65));
}
.nav-icon-link.is-current::after{
  content:'';
  position:absolute;
  bottom:3px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:2.5px;
  background:#FCFFFC;
  border-radius:9999px;
  box-shadow:0 0 6px rgba(252,255,252,0.6);
  transition:background-color 200ms ease, box-shadow 200ms ease;
}

/* Light nav state */
.topbar_component.is-light-nav .nav-icon-link{
  color:rgba(24,26,32,0.65);
}
.topbar_component.is-light-nav .nav-icon-link:hover{
  color:#181A20;
  filter:drop-shadow(0 2px 8px rgba(24,26,32,0.25));
}
.topbar_component.is-light-nav .nav-icon-link.is-current{
  color:#181A20;
  filter:drop-shadow(0 0 8px rgba(24,26,32,0.35));
}
.topbar_component.is-light-nav .nav-icon-link.is-current::after{
  background:#181A20;
  box-shadow:0 0 6px rgba(24,26,32,0.35);
}

/* Project tags drawer */
.topbar-drawer{
  width:100%;
  max-height:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:max-height 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease, padding 300ms ease, visibility 300ms;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 clamp(0.75rem, 3.5vw, 3rem);
}

.topbar_component.is-expanded .topbar-drawer{
  max-height:360px;
  opacity:1;
  visibility:visible;
  padding-bottom:clamp(0.65rem, 1.8vh, 1.1rem);
}

.topbar-tags-wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(0.35rem, 0.6vw, 0.55rem);
  width:100%;
  max-width:1300px;
}

.nav-project-tag{
  flex:0 1 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0.32rem clamp(0.65rem, 0.9vw, 1rem);
  min-height:31px;
  box-sizing:border-box;
  border-radius:9999px;
  font-size:clamp(0.65rem, 0.78vw, 0.75rem);
  font-weight:700;
  letter-spacing:0.7px;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  background:#FCFFFC;
  border:none;
  outline:none;
  color:#181A20;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.16);
  transition:background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  user-select:none;
  transform:none !important;
  line-height:1;
}

.nav-project-tag:hover,
.nav-project-tag:focus-visible{
  background:#E8ECE9;
  color:#101216;
  border:none;
  transform:none !important;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.22);
}

.nav-project-tag.is-active{
  background:#D6DFDB;
  color:#0B0D11;
  font-weight:800;
  border:none;
  transform:none !important;
  box-shadow:0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Fullpage layout */
.fullpage-wrapper{position:relative;z-index:1;width:100%}
.section{
  position:relative;
  width:100%;
  height:100vh;
  max-height:100vh;
  overflow:hidden;
  transition:background-color 600ms ease, color 600ms ease;
}
.section-content{
  position:relative;
  z-index:1;
  height:100%;
  max-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(64px, 8.5vh, 80px) clamp(1rem, 4vw, 3.5rem) clamp(0.8rem, 2vh, 1.5rem) clamp(1rem, 4vw, 3.5rem);
  overflow:hidden;
}

/* 3D background animation */
.cube-stage{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:580px;
  pointer-events:none;
  overflow:hidden;
}
.cube{
  position:relative;
  width:374px;
  height:374px;
  transform-style:preserve-3d;
  transform-origin:187px 187px;
  animation:spinCube 12000ms linear infinite;
}
.faces{position:absolute;top:0;left:0;width:374px;height:374px}
.dot{position:absolute;width:3.5px;height:3.5px;border-radius:50%;background:currentColor;opacity:0.45}
.p1{top:-1px;margin-left:-1px}
.p2{top:-1px;left:50%;margin-left:-1px}
.p3{top:-1px;left:100%;margin-left:-1px}
.p4{top:50%;left:-1px;margin-top:-1px}
.p5{top:50%;left:50%;margin-top:-1px;margin-left:-1px}
.p6{top:50%;left:100%;margin-top:-1px;margin-left:-1px}
.p7{top:100%;left:0%;margin-top:-1px;margin-left:-1px}
.p8{top:100%;left:50%;margin-top:-1px;margin-left:-1px}
.p9{top:100%;left:100%;margin-top:-1px;margin-left:-1px}
.p10{top:25%;left:25%;margin-top:-1px;margin-left:-1px}
.p11{top:25%;left:75%;margin-top:-1px;margin-left:-1px}
.p12{top:75%;left:25%;margin-top:-1px;margin-left:-1px}
.p13{top:75%;left:75%;margin-top:-1px;margin-left:-1px}

.f1{transform:translateZ(-187px);animation-delay:.4s}
.f2{transform:translateZ(-150px);animation-delay:.8s}
.f3{transform:translateZ(-112px);animation-delay:1.2s}
.f4{transform:translateZ(-75px);animation-delay:1.6s}
.f5{transform:translateZ(-37px);animation-delay:2.0s}
.f6{transform:translateZ(0px);animation-delay:2.4s}
.f7{transform:translateZ(37px);animation-delay:2.8s}
.f8{transform:translateZ(75px);animation-delay:3.2s}
.f9{transform:translateZ(112px);animation-delay:3.6s}
.f10{transform:translateZ(150px);animation-delay:4.0s}
.f11{transform:translateZ(187px);animation-delay:4.4s}

@keyframes spinCube{
  0%{transform:rotateY(0deg) rotateX(-45deg) rotate(0deg)}
  50%{transform:rotateY(180deg) rotateX(135deg) rotate(180deg)}
  100%{transform:rotateY(360deg) rotateX(315deg) rotate(360deg)}
}

/* Home section layout */
.start-section-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  max-width:1400px;
  position:relative;
  padding-top:calc(var(--topbar-height) * 0.7);
  gap:clamp(1.8rem, 4.5vh, 3.8rem);
  margin:0 auto;
}

.hero-logo-container{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:260px;
  margin:0 auto;
  line-height:1;
}

.hero-logo-img{
  width:100%;
  max-width:clamp(500px, 14vw, 800px);
  max-height:clamp(450px, 10vh, 750px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35));
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

/* Social links */
.social-links-list{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.2rem, 3.5vw, 2.5rem);
  justify-content:center;
  align-items:center;
  margin:0;
  position:relative;
  line-height:1;
}
.social-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  color:rgba(252,255,252,0.85);
  width:clamp(40px, 5.5vh, 48px);
  height:clamp(40px, 5.5vh, 48px);
  transition:color 180ms ease, transform 180ms ease, filter 180ms ease;
  cursor:pointer;
  position:relative;
}
.is-light-theme .social-icon-btn{
  color:rgba(24,26,32,0.78);
}
.social-icon-btn svg{
  width:clamp(28px, 4vh, 34px);
  height:clamp(28px, 4vh, 34px);
}
.social-icon-btn:hover{
  color:#FCFFFC;
  transform:scale(1.2);
  filter:drop-shadow(0 2px 10px rgba(252,255,252,0.45));
}
.is-light-theme .social-icon-btn:hover{
  color:#181A20;
  filter:drop-shadow(0 2px 10px rgba(24,26,32,0.3));
}

/* Tooltip */
.copy-tooltip{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:#FCFFFC;
  color:#181A20;
  padding:4px 12px;
  font-size:0.75rem;
  font-weight:700;
  border-radius:9999px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  pointer-events:none;
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease;
  z-index:100;
}
.copy-tooltip.show{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}

/* Project showcase */
.project-showcase-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.2rem, 3.5vw, 2.8rem);
  align-items:center;
  max-width:min(92vw, 1050px);
  width:100%;
  max-height:calc(100vh - 100px);
}

/* Media box */
.project-media-box{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  max-height:clamp(180px, 36vh, 340px);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  user-select:none;
  padding:0 !important;
}
.project-media-box:hover{
  transform:none !important;
}
.project-media-box img,
.project-media-img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  border-radius:inherit;
}
.project-media-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  color:inherit;
  opacity:0.85;
  font-size:clamp(0.72rem, 1vw, 0.85rem);
  font-weight:600;
  letter-spacing:1px;
}
.project-media-placeholder svg{
  width:clamp(32px, 5vh, 44px);
  height:clamp(32px, 5vh, 44px);
}

.project-info-box{
  display:flex;
  flex-direction:column;
  gap:clamp(0.5rem, 1.4vh, 0.95rem);
}

/* Project tag */
.project-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  padding:0.32rem 1.05rem;
  min-height:31px;
  box-sizing:border-box;
  font-size:clamp(0.65rem, 0.78vw, 0.75rem);
  font-weight:800;
  letter-spacing:0.9px;
  text-transform:uppercase;
  border-radius:9999px;
  pointer-events:none;
  cursor:default;
  user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
  background:#FCFFFC;
  color:#181A20;
  line-height:1;
}
.is-light-theme .project-tag{
  background:#181A20;
  color:#FCFFFC;
}

.project-title{
  font-size:clamp(1.6rem, 3.8vh, 2.7rem);
  font-weight:800;
  margin:0;
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.project-description{
  font-size:clamp(0.82rem, 1.2vh, 0.95rem);
  line-height:1.45;
  margin:0;
  opacity:0.92;
}
.project-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
  margin-top:clamp(0.2rem, 0.8vh, 0.5rem);
}

/* Impressum */
.impressum-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.2rem, 3vh, 2.2rem);
  max-width:min(90vw, 700px);
  width:100%;
}
.impressum-card{
  width:100%;
  padding:clamp(1.2rem, 3vh, 2.2rem) clamp(1.4rem, 3.5vw, 2.6rem);
  max-height:calc(100vh - 180px);
  overflow-y:auto;
  text-align:center;
}
.impressum-title{
  font-size:clamp(1.3rem, 2.8vh, 1.8rem);
  font-weight:800;
  margin:0 0 clamp(0.6rem, 1.4vh, 1rem) 0;
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.impressum-content{
  font-size:clamp(0.95rem, 1.6vh, 1.2rem);
  line-height:1.8;
  font-weight:500;
  letter-spacing:0.5px;
}

/* Responsive adjustments */
@media screen and (max-width:768px){
  :root{
    --start-spacing: clamp(1.8rem, 4.5vh, 3.2rem);
  }
  .topbar-nav-items{
    gap:clamp(1.5rem, 6vw, 3rem);
  }
  .topbar_component.is-expanded .topbar-drawer{
    max-height:420px;
    padding-bottom:1rem;
  }
  .topbar-tags-wrapper{
    gap:0.42rem;
  }
  .nav-project-tag{
    min-height:31px;
    padding:0.3rem 0.75rem;
    font-size:0.7rem;
    letter-spacing:0.4px;
  }
  .hero-title-rohoe{
    font-size:clamp(3rem, 18vw, 6.5rem);
    letter-spacing:2px;
  }
  .project-showcase-layout{
    grid-template-columns:1fr;
    gap:clamp(1.2rem, 2.5vh, 1.8rem);
    text-align:center;
  }
  .project-tag{
    align-self:center;
    margin-top:clamp(0.4rem, 1vh, 0.8rem);
  }
  .project-media-box{
    aspect-ratio:16/10;
    width:100%;
    max-height:clamp(150px, 24vh, 200px);
  }
  .project-actions{
    justify-content:center;
  }
}

@media screen and (max-width:480px){
  .topbar-tags-wrapper{
    gap:0.35rem;
  }
  .nav-project-tag{
    min-height:30px;
    padding:0.28rem 0.62rem;
    font-size:0.68rem;
    letter-spacing:0.35px;
  }
}