/* Startseite: vertikaler Website-Hinweis und Projekt-Scrollanzeige. */
.dd-website-rail, .dd-website-rail * { box-sizing: border-box; }
.dd-website-rail {
  position: fixed;
  left: 32px;
  top: 50%;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  min-height: 46px;
  padding: 13px 18px;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: 0 0;
  border: 0;
  border-radius: 11px;
  background: #202022;
  color: #c1c1c3 !important;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .25s, color .25s;
}
.dd-website-rail strong { color: inherit; font-size: inherit; font-weight: 700; }
.dd-website-rail:hover, .dd-website-rail:focus-visible { background: #29292c; color: #fff !important; }
.dd-website-rail:focus-visible { outline: 2px solid #c1c1c3; outline-offset: 4px; }
.dd-website-rail__icon {
  display: block;
  width: 21px;
  height: 21px;
  margin-left: 7px;
  flex: 0 0 21px;
  animation: dd-website-icon-pulse 2.2s ease-in-out infinite;
}
@keyframes dd-website-icon-pulse {
  0%, 100% { opacity: .45; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}
.portfolio-showcase.showcase-list .showcase-footer {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) !important;
}
.dd-project-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 76px;
  font-size: 12px;
}
.dd-project-scroll__label,
.dd-project-scroll .scroll-notice > span:last-child {
  display: block;
  writing-mode: vertical-rl;
  width: 1em;
  text-orientation: mixed;
  text-align: left;
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  color: hsla(0, 0%, 100%, .15);
  pointer-events: none;
}
.dd-project-scroll .sn_bef { left: 50%; transform: translateX(-50%); }
@media (max-width: 767px) {
  .dd-website-rail {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 24px;
    transform: translateX(-50%);
    transform-origin: 50% 50%;
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 13px;
  }
  .dd-website-rail__icon { width: 18px; height: 18px; flex-basis: 18px; margin-left: 4px; }
  .dd-project-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-website-rail { transition: none; }
  .dd-website-rail__icon { animation: none; }
  .dd-project-scroll .sn_bef { height: 26px !important; top: -42px !important; bottom: auto !important; }
}

/* Kontakt im selben Stil wie der seitliche Website-Hinweis. */
.site-header .button-6 {
  min-height: 50px;
  padding: 14px 21px;
  border: 0;
  border-radius: 11px;
  background: #202022;
  color: #c1c1c3;
  box-shadow: none;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0;
  transition: background .25s, color .25s;
}
.site-header .button-6 a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  font: inherit;
  text-decoration: none;
  transition: none;
}
.site-header .button-6:hover,
.site-header .button-6:focus-within {
  background: #29292c;
  color: #fff;
}
.site-header .button-6 a:focus-visible {
  outline: 2px solid #c1c1c3;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .button-6 { transition: none; }
}