.site-header{position:sticky;top:0;z-index:50;background:rgba(18,17,16,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(245,242,234,.07)}
.header-inner{height:88px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-mark{min-width:48px;height:42px;padding:0 10px;display:grid;place-items:center;border:1px solid rgba(245,242,234,.18);font-family:"Space Grotesk";font-size:1.02rem;font-weight:700}
.brand-subline{color:var(--stone);font-size:.7rem}
.site-nav{display:flex;gap:34px;color:var(--ivory-soft);font-size:.88rem}
.site-nav a{position:relative}
.site-nav a::after{content:"";width:0;height:1px;position:absolute;left:0;bottom:-7px;background:var(--orange);transition:width .25s ease}
.site-nav a:hover::after,.site-nav a.active::after{width:100%}
.header-cta{justify-self:end;display:inline-flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid rgba(245,242,234,.18);border-radius:999px;font-size:.86rem;font-weight:700}
.header-cta:hover{color:var(--charcoal);background:var(--ivory)}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent}
.menu-toggle span{display:block;width:18px;height:1px;margin:5px auto;background:var(--ivory)}

.portfolio-hero{padding:70px 0 120px}
.portfolio-topline{padding-bottom:20px;display:flex;justify-content:space-between;color:var(--stone);border-bottom:1px solid var(--line);font-size:.7rem;letter-spacing:.16em}
.portfolio-grid{padding-top:70px;display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end}
.portfolio-hero h1{margin:22px 0 0;font-family:"Space Grotesk";font-size:clamp(5rem,9vw,10rem);line-height:.82;letter-spacing:-.075em}
.portfolio-hero h1 span{color:var(--orange)}
.portfolio-grid>p{margin:0 0 16px;color:var(--ivory-soft);font-size:1.08rem;line-height:1.8}

.project-nav{padding-bottom:100px}
.project-nav-row{min-height:110px;display:grid;grid-template-columns:80px 1fr .7fr auto;gap:24px;align-items:center;border-top:1px solid var(--line)}
.project-nav-row:last-child{border-bottom:1px solid var(--line)}
.project-nav-row>span,.project-nav-row small{color:var(--stone)}
.project-nav-row strong{font-family:"Space Grotesk";font-size:1.8rem}
.project-nav-row b{color:var(--orange);font-size:1.4rem}

.case-study{padding:130px 0;position:relative;border-top:1px solid var(--line)}
.case-index{position:absolute;right:0;top:70px;color:rgba(245,242,234,.05);font-family:"Space Grotesk";font-size:clamp(8rem,18vw,17rem);font-weight:700;line-height:1}
.case-header{max-width:1000px;margin-bottom:62px}
.case-header h2{margin:18px 0;font-family:"Space Grotesk";font-size:clamp(4rem,7vw,8rem);line-height:.92;letter-spacing:-.065em}
.case-header p{max-width:700px;color:var(--ivory-soft);font-size:1.08rem;line-height:1.8}

.comparison-toolbar{min-height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--stone);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.68rem;letter-spacing:.15em}
.comparison-toolbar span:nth-child(2){color:var(--orange);text-align:center}
.comparison-toolbar span:last-child{text-align:right}
.comparison-canvas{--position:50%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#0D0C0B;border:1px solid var(--line);border-top:0}
.comparison-image{width:100%;height:100%;position:absolute;inset:0;display:block;object-fit:cover;object-position:top center;user-select:none;pointer-events:none}
.new-layer{width:var(--position);height:100%;position:absolute;inset:0 auto 0 0;overflow:hidden;border-right:2px solid var(--orange)}
.new-image{width:calc(100vw - max(64px,(100vw - var(--max-width))/2)*2);max-width:var(--max-width);min-width:100%}
.cookie-crop{height:118%;top:-2%;transform:scale(1.05);transform-origin:top center}
.oral-crop{clip-path:inset(0 0 8% 0)}
.comparison-handle{width:56px;height:56px;position:absolute;left:var(--position);top:50%;z-index:4;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--charcoal);background:var(--orange);border:5px solid rgba(18,17,16,.28);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 12px 32px rgba(0,0,0,.32);font-size:.82rem;font-weight:800;pointer-events:none}
.comparison-range{width:100%;height:100%;position:absolute;inset:0;z-index:5;opacity:0;cursor:ew-resize}

.case-meta{margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-meta div{padding-top:20px;border-top:1px solid var(--line)}
.case-meta span{color:var(--orange);font-size:.7rem;letter-spacing:.15em;font-weight:800}
.case-meta p{color:var(--ivory-soft);line-height:1.7}
.case-actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}

.portfolio-cta{min-height:520px;padding:120px 0;display:flex;align-items:end;justify-content:space-between;gap:50px;border-top:1px solid var(--line)}
.portfolio-cta h2{margin:20px 0 0;font-family:"Space Grotesk";font-size:clamp(4rem,7vw,8rem);line-height:.92;letter-spacing:-.065em}

.site-footer{padding:34px 0 48px;display:grid;grid-template-columns:auto 1fr auto auto;gap:28px;align-items:center;border-top:1px solid var(--line);color:var(--stone);font-size:.82rem}
.footer-links{display:flex;gap:18px}


@media(max-width:1100px){
  .menu-open .site-nav{
    display:flex;
    position:fixed;
    inset:88px 18px auto 18px;
    z-index:60;
    min-height:auto;
    padding:18px;
    gap:8px;
    align-items:stretch;
    justify-content:flex-start;
    border:1px solid rgba(245,242,234,.14);
    background:rgba(24,22,20,.92);
    backdrop-filter:blur(20px);
    box-shadow:0 24px 60px rgba(0,0,0,.38);
  }
  .menu-open .site-nav a{
    padding:16px 14px;
    border:1px solid transparent;
    color:var(--ivory);
    background:rgba(245,242,234,.035);
    font-family:"Space Grotesk";
    font-size:1.05rem;
  }
  .menu-open .site-nav a:hover,
  .menu-open .site-nav a:focus{
    border-color:rgba(232,93,42,.45);
    background:rgba(232,93,42,.08);
  }
  .menu-open .site-nav a::after{display:none}
  .menu-toggle span{transition:transform .25s ease}
  .menu-open .menu-toggle span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-open .menu-toggle span:last-child{transform:translateY(-3px) rotate(-45deg)}
}
@media(max-width:760px){
  .menu-open .site-nav{inset:74px 12px auto 12px}
}


.side-comparison{
  display:grid;
  grid-template-columns:1fr 70px 1fr;
  gap:22px;
  align-items:center;
}
.compare-panel{min-width:0}
.compare-label{
  min-height:56px;
  padding:0 2px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--stone);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:.7rem;
  letter-spacing:.14em;
}
.compare-label span{color:var(--orange);font-weight:800}
.compare-browser{
  overflow:hidden;
  border:1px solid var(--line);
  border-top:0;
  background:#0d0c0b;
  box-shadow:0 24px 70px rgba(0,0,0,.26);
}
.compare-browser-bar{
  height:38px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:7px;
  background:#1a1816;
  border-bottom:1px solid var(--line);
}
.compare-browser-bar i{
  width:8px;height:8px;border-radius:50%;background:#665f58;
}
.compare-browser img{
  width:100%;
  aspect-ratio:16/10;
  display:block;
  object-fit:cover;
  object-position:top center;
}
.compare-new .compare-browser{transform:translateY(16px)}
.compare-arrow{
  width:56px;height:56px;display:grid;place-items:center;justify-self:center;
  color:var(--charcoal);background:var(--orange);border-radius:50%;
  font-size:1.45rem;font-weight:800;
}
@media(max-width:1100px){
  .side-comparison{grid-template-columns:1fr;gap:20px}
  .compare-arrow{transform:rotate(90deg)}
  .compare-new .compare-browser{transform:none}
}
@media(max-width:760px){
  .compare-label{min-height:50px;gap:18px}
  .compare-label small{text-align:right}
  .compare-browser img{aspect-ratio:4/3}
}


/* Sprint 5: stabiles mobiles Dropdown-Menü */
@media(max-width:1100px){
  body.menu-open{overflow:hidden}
  .site-header{z-index:100}
  .menu-toggle{position:relative;z-index:103;display:block}
  .site-nav{display:none}
  body.menu-open .site-nav{
    display:flex!important;
    position:fixed!important;
    top:76px!important;
    left:12px!important;
    right:12px!important;
    bottom:auto!important;
    z-index:102!important;
    max-height:calc(100vh - 92px);
    overflow:auto;
    padding:12px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    border:1px solid rgba(245,242,234,.16);
    background:rgba(24,22,20,.96)!important;
    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);
    box-shadow:0 24px 70px rgba(0,0,0,.48);
  }
  body.menu-open .site-nav a{
    display:flex;
    align-items:center;
    min-height:54px;
    padding:14px 16px!important;
    border:1px solid rgba(245,242,234,.08)!important;
    background:rgba(245,242,234,.04)!important;
    color:var(--ivory)!important;
    font-family:"Space Grotesk";
    font-size:1.02rem!important;
  }
  body.menu-open .site-nav a:active,
  body.menu-open .site-nav a:focus{
    border-color:rgba(232,93,42,.55)!important;
    background:rgba(232,93,42,.10)!important;
  }
  body.menu-open .site-nav a::after{display:none!important}
  .menu-toggle span{transition:transform .25s ease,opacity .25s ease}
  body.menu-open .menu-toggle span:first-child{transform:translateY(3px) rotate(45deg)}
  body.menu-open .menu-toggle span:last-child{transform:translateY(-3px) rotate(-45deg)}
}

/* Sprint 5: komplette Seitenansichten im Vergleich */
.compare-browser{
  min-height:520px;
  display:flex;
  flex-direction:column;
}
.compare-browser img{
  width:100%;
  height:520px;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:top center;
  background:#eeeae2;
}
@media(max-width:1100px){
  .compare-browser,.compare-browser img{min-height:440px;height:440px}
}
@media(max-width:760px){
  .compare-browser,.compare-browser img{min-height:360px;height:360px}
}


/* SPRINT 6 – robustes mobiles Dropdown */
@media (max-width: 1100px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .header-inner {
    position: relative;
  }

  .site-nav {
    display: none !important;
  }

  .menu-toggle {
    display: block !important;
    position: relative;
    z-index: 1002;
  }

  body.menu-open .site-nav {
    display: flex !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    margin: 0 !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    border: 1px solid rgba(245,242,234,.16) !important;
    background: rgba(24,22,20,.97) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.48) !important;
    z-index: 1001 !important;
  }

  body.menu-open .site-nav a {
    display: block !important;
    width: 100% !important;
    padding: 16px 14px !important;
    margin: 0 !important;
    color: var(--ivory) !important;
    background: rgba(245,242,234,.045) !important;
    border: 1px solid rgba(245,242,234,.07) !important;
    font-family: "Space Grotesk" !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  body.menu-open .site-nav a:hover,
  body.menu-open .site-nav a:focus {
    color: var(--ivory) !important;
    background: rgba(232,93,42,.12) !important;
    border-color: rgba(232,93,42,.5) !important;
  }

  body.menu-open .site-nav a::after {
    display: none !important;
  }

  body.menu-open .menu-toggle span:first-child {
    transform: translateY(3px) rotate(45deg);
  }

  body.menu-open .menu-toggle span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
}

@media (max-width: 760px) {
  body.menu-open .site-nav {
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
  }
}


/* SPRINT 7 – clean mobile dropdown */
@media (max-width: 1100px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 2000;
  }

  .header-inner {
    position: relative;
  }

  .site-nav {
    display: none !important;
  }

  .menu-toggle {
    display: block !important;
    position: relative;
    z-index: 2002;
  }

  body.menu-open .site-nav {
    display: grid !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-height: auto !important;
    padding: 14px !important;
    gap: 8px !important;
    border: 1px solid rgba(245,242,234,.16) !important;
    background: rgba(24,22,20,.96) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.48) !important;
    z-index: 2001 !important;
  }

  body.menu-open .site-nav a {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    color: var(--ivory) !important;
    background: rgba(245,242,234,.045) !important;
    border: 1px solid rgba(245,242,234,.07) !important;
    font-family: "Space Grotesk" !important;
    font-size: 1rem !important;
    text-align: left !important;
  }

  body.menu-open .site-nav a:hover,
  body.menu-open .site-nav a:focus {
    background: rgba(232,93,42,.12) !important;
    border-color: rgba(232,93,42,.5) !important;
  }

  body.menu-open .site-nav a::after {
    display: none !important;
  }

  body.menu-open .menu-toggle span:first-child {
    transform: translateY(3px) rotate(45deg);
  }

  body.menu-open .menu-toggle span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }

  .menu-toggle span {
    transition: transform .25s ease;
  }
}

@media (max-width: 760px) {
  body.menu-open .site-nav {
    top: calc(100% + 8px) !important;
  }
}


/* Lokale Vollseiten-Screenshots */
.compare-browser {
  max-height: 620px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) rgba(245,242,234,.08);
}

.compare-browser img.fullpage-shot {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
  background: #fff;
}

.compare-browser img.szikszay-shot {
  min-width: 100%;
}

@media (max-width: 760px) {
  .compare-browser {
    max-height: 520px;
  }

  .compare-browser img.fullpage-shot {
    aspect-ratio: auto;
  }
}


/* Sprint 8 – lokale Alt-Screenshots wirklich verwenden */
.compare-browser img.fullpage-shot {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: top center !important;
  display: block !important;
  background: #fff;
}

.compare-browser:has(img.fullpage-shot) {
  max-height: 680px;
  overflow-y: auto;
  overflow-x: hidden;
}


/* SPRINT 9 – Back to top, Scroll-Fortschritt und aktiver Menüpunkt */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 3000;
  pointer-events: none;
  background: transparent;
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--orange);
  box-shadow: 0 0 18px rgba(232,93,42,.45);
  transition: width .08s linear;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2500;
  min-width: 118px;
  min-height: 52px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ivory);
  background: rgba(24,22,20,.82);
  border: 1px solid rgba(245,242,234,.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  font-family: "Space Grotesk";
  font-size: .86rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .28s ease,
    color .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--charcoal);
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(-3px);
}

.back-to-top:active {
  transform: translateY(-1px) scale(.98);
}

.back-to-top-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.site-nav a.is-active {
  color: var(--ivory);
}

.site-nav a.is-active::after {
  width: 100%;
}

.button,
.header-cta,
.back-to-top {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 760px) {
  .back-to-top {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    min-width: 58px;
    min-height: 58px;
    width: 58px;
    padding: 0;
    border-radius: 50%;
  }

  .back-to-top-label {
    display: none;
  }

  .back-to-top-icon {
    font-size: 1.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .scroll-progress span {
    transition: none;
  }
}