:root {
  --showcase-ink: #171713;
  --showcase-paper: #f1efe8;
  --showcase-accent: #c49a5a;
  --showcase-radius: clamp(18px, 1.7vw, 32px);
}

html { background: var(--showcase-paper); }
body { overflow-x: clip; }

.w-webflow-badge { display: none !important; }

body .navbar,
body .navbar.navbar-2 {
  position: fixed !important;
  z-index: 999 !important;
  top: 10px !important;
  right: clamp(8px, 1.2vw, 20px) !important;
  left: clamp(8px, 1.2vw, 20px) !important;
  width: auto !important;
  overflow: visible;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(115deg, rgba(250,249,246,.5), rgba(220,228,235,.32), rgba(250,249,246,.44)) !important;
  background-size: 220% 220% !important;
  box-shadow: 0 14px 46px rgba(34,32,27,.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  backdrop-filter: blur(22px) saturate(1.18);
  animation: showcase-header-in .85s cubic-bezier(.2,.8,.2,1) both, showcase-header-flow 9s ease-in-out .85s infinite alternate;
  transition: top .35s ease, background .35s ease, box-shadow .35s ease;
}

body .navbar.showcase-header-scrolled {
  top: 6px !important;
  background: linear-gradient(115deg, rgba(249,248,244,.82), rgba(218,226,234,.66), rgba(249,248,244,.76)) !important;
  box-shadow: 0 18px 54px rgba(34,32,27,.13) !important;
}

body .navbar_overlay {
  background: rgba(255,255,255,.08) !important;
  opacity: 1 !important;
}

body .navbar .navbar-padding { padding-right: 16px !important; padding-left: 16px !important; }
body .navbar .navbar-container { max-width: none !important; }
body .navbar .navbar_flex { min-height: 62px; }

body .navbar_brand {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 6px;
}

body .navbar_brand::after { display: none !important; }

body .navbar_logo { width: clamp(102px, 9vw, 124px) !important; height: auto !important; }

body .navbar_coordinates-wrap {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 0;
  opacity: .62;
}

body .navbar_menu {
  gap: 3px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

body .navbar_menu > a.button {
  min-height: 38px;
  padding: .55rem .82rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

body .navbar_menu > a.button:hover,
body .navbar_menu > a.button.w--current {
  background: rgba(255,255,255,.62) !important;
  transform: translateY(-1px);
}

body .navbar_menu > a.button .button_bg { display: none !important; }
body .navbar_menu > a.button .text-button { color: var(--showcase-ink) !important; font-weight: 600; }

body .navbar_menu > a.button.showcase-booking-cta {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  background: linear-gradient(120deg, #171a1d, #596979, #24292e) !important;
  background-size: 200% 200% !important;
  box-shadow: 0 8px 24px rgba(31,38,44,.22);
  animation: showcase-booking-glow 3.2s ease-in-out infinite alternate;
}

body .navbar_menu > a.button.showcase-booking-cta:hover {
  background-position: 100% 50% !important;
  box-shadow: 0 12px 30px rgba(31,38,44,.3);
  transform: translateY(-2px) scale(1.02);
}

body .navbar_menu > a.button.showcase-booking-cta .text-button { color: #fff !important; }

body .navbar_icon-wrap {
  display: none !important;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(23,23,19,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: transform .3s ease, background .3s ease;
}

body .navbar .w-nav-button { display: none !important; }

body .navbar_icon-wrap:hover { background: rgba(255,255,255,.78); transform: rotate(4deg); }
body .navbar_icon-wrap .navbar_line { width: 17px; }

.rt-projects-gallery {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: clamp(5.25rem, 6.5vw, 7rem) clamp(8px, .75vw, 14px) clamp(5rem, 9vw, 10rem) !important;
  background:
    radial-gradient(circle at 82% 2%, rgba(143,158,178,.18), transparent 28rem),
    linear-gradient(180deg, #f5f3ed 0%, var(--showcase-paper) 42%, #ebe8df 100%);
  background-position: 84% 0%, center;
  background-size: 125% 125%, 100% 100%;
  animation: showcase-surface 18s ease-in-out infinite alternate;
}

.rt-projects-gallery::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8rem;
  left: -10rem;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: rgba(166, 157, 139, .08);
  filter: blur(48px);
  animation: showcase-orbit 16s ease-in-out infinite alternate;
  pointer-events: none;
}

.rt-projects-gallery::after {
  content: "";
  position: absolute;
  z-index: 0;
  /* Die Aurora läuft bis hinter den Magazinbereich weiter, ohne harte Farbkante. */
  inset: -18% -24% calc(-18% - 180px);
  background:
    conic-gradient(from 40deg at 52% 48%,
      rgba(188, 160, 117, .18),
      rgba(244, 239, 226, .3) 18%,
      rgba(135, 158, 184, .4) 36%,
      rgba(224, 222, 213, .28) 55%,
      rgba(160, 177, 169, .3) 73%,
      rgba(188, 160, 117, .18));
  filter: blur(72px) saturate(.9);
  opacity: .72;
  transform-origin: center;
  animation: showcase-aurora 15s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  pointer-events: none;
}

.rt-projects-gallery .rt-container {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: 1220px !important;
}

.rt-projects-gallery .rt-align-center {
  position: relative;
  z-index: 1;
  width: 100% !important;
  padding-top: clamp(0rem, 1vw, .75rem) !important;
}

.studio-hero_tile-wrap {
  width: min(100%, 1680px);
  margin: clamp(1rem, 1.5vw, 1.25rem) auto clamp(1.5rem, 2.5vw, 2.5rem) !important;
  padding-top: 1.75rem !important;
  padding-bottom: 2.75rem !important;
  text-align: left;
}

.studio-hero_tile-wrap::before {
  content: "SHOWCASE  /  SELECTED WORK";
  display: block;
  margin-bottom: clamp(1.1rem, 2vw, 2rem);
  color: var(--showcase-accent);
  font: 700 clamp(.72rem, .8vw, .9rem)/1.2 Arial, sans-serif;
  letter-spacing: .2em;
  text-align: left;
}

.heading-style-h0.studio-h0 {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto !important;
  color: var(--showcase-ink);
  font-size: clamp(2.35rem, 4.45vw, 5.25rem) !important;
  font-weight: 520 !important;
  line-height: .88 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
  transform-origin: left bottom;
}

.showcase-title__line { display: block; }

.showcase-title__line--one {
  position: relative;
  width: max-content;
  max-width: 100%;
  font-weight: 560;
}

.showcase-title__line--one::after {
  content: none;
  display: none;
  position: absolute;
  left: 101%;
  top: 52%;
  width: clamp(30px, 7vw, 110px);
  height: 1px;
  background: linear-gradient(90deg, rgba(23,23,19,.42), transparent);
  transform-origin: left;
  animation: showcase-title-rule 3.2s ease-in-out infinite alternate;
}

.showcase-title__line--two {
  display: flex;
  width: fit-content;
  align-items: baseline;
  margin-top: .06em;
  margin-left: clamp(1.2rem, 7vw, 6.5rem);
  color: #a88451;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.045em;
  text-shadow: 0 0 24px rgba(196,154,90,.14);
}

.showcase-title__amp {
  display: inline-block;
  margin-right: .18em;
  color: #a88d66;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18em;
  font-style: italic;
  font-weight: 400;
  line-height: .7;
  transform: rotate(-7deg) translateY(.03em);
}

.showcase-motion-ready .heading-style-h0.studio-h0 {
  opacity: 0;
  transform: translateY(42px) rotate(1deg);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform 1.05s cubic-bezier(.2,.8,.2,1);
}

.showcase-motion-ready .heading-style-h0.studio-h0.is-visible {
  opacity: 1;
  transform: none;
}

.showcase-editorial {
  width: 100%;
  margin: 0 auto clamp(2.6rem, 4vw, 4.5rem);
  overflow: hidden;
  border-top: 1px solid rgba(23,23,19,.18);
  border-bottom: 1px solid rgba(23,23,19,.18);
  color: var(--showcase-ink);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
}

.showcase-editorial__track {
  display: flex;
  width: max-content;
  align-items: center;
  padding: .9rem 0;
  animation: showcase-marquee 24s linear infinite;
  will-change: transform;
}

.showcase-editorial__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-right: clamp(1.5rem, 3vw, 3.5rem);
  white-space: nowrap;
}

.showcase-editorial__word {
  font: 600 clamp(.76rem, .9vw, .94rem)/1 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.showcase-editorial__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8999ad;
  box-shadow: 0 0 0 5px rgba(137,153,173,.12);
}

.showcase-pointer-glow {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: clamp(240px, 28vw, 460px);
  height: clamp(240px, 28vw, 460px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.62), rgba(160,179,202,.16) 38%, transparent 70%);
  filter: blur(24px);
  opacity: 0;
  transform: translate3d(var(--glow-x, 50vw), var(--glow-y, 30vh), 0) translate(-50%,-50%);
  transition: opacity .5s ease;
  pointer-events: none;
}

.rt-projects-gallery:hover .showcase-pointer-glow { opacity: .72; }

.showcase-scroll-index {
  position: fixed;
  z-index: 80;
  right: 14px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .58rem .72rem;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  color: #fff;
  background: rgba(22,24,25,.46);
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  font: 600 .66rem/1 Arial, sans-serif;
  letter-spacing: .13em;
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-50%) translateX(18px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

/* Der frühere mitlaufende Projektzähler wird nicht mehr eingeblendet. */
.showcase-scroll-index {
  display: none !important;
}

/* Showcase und Magazin teilen sich bis zum dunklen Footer dieselbe Oberfläche. */
body.showcase-v2 .section_blog-home {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Identische Navigationsgröße wie im Footer der Startseite. */
body.showcase-v2 .footer_menu .footer_link,
body.showcase-v2 .footer_menu .heading-style-h4 {
  font-size: 25px !important;
  line-height: 1.1 !important;
}

body.showcase-v2 .footer_legal-flex {
  border-top: 0 !important;
}

.showcase-scroll-index.is-active { opacity: 1; transform: translateY(-50%) translateX(0); }
.showcase-scroll-index__line { width: 24px; height: 1px; background: rgba(255,255,255,.55); }

.rt-projects-gallery-main {
  opacity: 1 !important;
}

/* Etwas mehr Bildwirkung, ohne das ruhige Vierer-Raster zu verändern. */
@media (min-width: 992px) {
  .rt-projects-gallery-main {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 368px !important;
  }

  .rt-projects-gallery-main > * {
    min-height: 368px;
  }

  .rt-projects-gallery-main img,
  .rt-projects-gallery-main video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}

.rt-projects-gallery-main > * {
  position: relative;
  transform-origin: center bottom;
}

.rt-projects-gallery-main > *::after {
  content: "↗";
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: clamp(38px, 3vw, 54px);
  height: clamp(38px, 3vw, 54px);
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff;
  background: rgba(20,20,16,.32);
  box-shadow: 0 8px 22px rgba(0,0,0,.13);
  font-size: clamp(1rem, 1.2vw, 1.35rem);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(10px) rotate(-18deg);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), background .3s ease;
  pointer-events: none;
}

.rt-projects-gallery-main > *:hover::after {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  background: rgba(196,154,90,.85);
}

.rt-projects-gallery-main img,
.rt-projects-gallery-main video {
  display: block;
  transform: scale(1.002);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}

.showcase-item-wrapper .lightbox-link {
  position: absolute;
  z-index: 4;
  inset: 0;
}

.rt-projects-gallery-main > *:hover img,
.rt-projects-gallery-main > *:hover video {
  transform: scale(1.055);
  filter: saturate(1.06) contrast(1.02);
}

.showcase-motion-ready .showcase-reveal {
  opacity: 0;
  transform: translateY(54px) scale(.975);
  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .95s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.showcase-motion-ready .showcase-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.showcase-motion-ready .showcase-reveal.is-visible:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 72px rgba(35,29,20,.16);
}

@keyframes showcase-orbit {
  from { transform: translate3d(0,0,0) scale(.9); }
  to { transform: translate3d(18vw,12vh,0) scale(1.14); }
}

@keyframes showcase-aurora {
  0% { transform: translate3d(-7%, -4%, 0) rotate(-10deg) scale(.98); }
  42% { transform: translate3d(8%, 5%, 0) rotate(9deg) scale(1.12); }
  100% { transform: translate3d(-2%, 13%, 0) rotate(21deg) scale(1.2); }
}

@keyframes showcase-surface {
  from { background-position: 84% 0%, center; }
  to { background-position: 66% 9%, center; }
}

@keyframes showcase-marquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

@keyframes showcase-title-rule {
  from { opacity: .35; transform: scaleX(.4); }
  to { opacity: .9; transform: scaleX(1); }
}

@keyframes showcase-header-in {
  from { opacity: 0; transform: translateY(-18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes showcase-header-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes showcase-booking-glow {
  from { background-position: 0% 50%; box-shadow: 0 8px 22px rgba(31,38,44,.18); }
  to { background-position: 100% 50%; box-shadow: 0 10px 30px rgba(74,91,107,.36); }
}

@media (max-width: 600px) {
  body .navbar,
  body .navbar.navbar-2 { top: 7px !important; border-radius: 16px; }
  body .navbar .navbar-padding { padding-right: 10px !important; padding-left: 10px !important; }
  body .navbar .navbar_flex { min-height: 56px; }
  body .navbar_coordinates-wrap { display: none !important; }
  body .navbar_brand { padding-right: 6px; }
  body .navbar_menu { display: flex !important; margin-left: auto; }
  body .navbar_menu > a.button:not(.showcase-booking-cta) { display: none !important; }
  .rt-projects-gallery { padding-inline: 12px !important; }
  .studio-hero_tile-wrap { margin-bottom: 3rem; }
  .heading-style-h0.studio-h0 { font-size: clamp(1.95rem, 8.5vw, 3.1rem) !important; }
  .showcase-title__line--two { margin-left: 0; }
  .showcase-title__line--one::after { display: none; }
  .showcase-scroll-index,
  .showcase-pointer-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-projects-gallery,
  .rt-projects-gallery::before,
  .rt-projects-gallery::after { animation: none; }
  .showcase-editorial__track { animation: none; }
  .showcase-title__line--one::after { animation: none; }
  body .navbar,
  body .navbar.navbar-2,
  body .navbar_menu > a.button.showcase-booking-cta { animation: none; }
  .showcase-motion-ready .heading-style-h0.studio-h0,
  .showcase-motion-ready .showcase-reveal { opacity: 1; transform: none; transition: none; }
  .rt-projects-gallery-main img,
  .rt-projects-gallery-main video { transition: none; }
}