/* First study, refined: photographic hero and a self-starting scene below it. */
.design-studio .hero-grid {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.86fr);
  gap: 72px;
}
.design-studio .hero h1 {
  font-size: clamp(64px, 5.75vw, 88px);
  line-height: 1.09;
  letter-spacing: -0.059em;
}
.design-studio .hero h1 em {
  font-size: 1.08em;
  letter-spacing: -0.044em;
}
.design-studio .hero h1 > span {
  white-space: nowrap;
}
.design-studio .hero-photo > img {
  filter: none;
  object-position: 50% 35%;
}
.design-studio .hero-photo:after {
  background: linear-gradient(transparent, #161618ed);
}
.design-studio .hero .support {
  color: #585657;
  font-size: 18px;
}
.design-studio .hero .actions {
  column-gap: 25px;
  row-gap: 20px;
}
.design-studio .duo-photo img {
  height: 640px;
  object-position: 50% 45%;
  filter: none;
}
.design-studio .sc-growth-story {
  padding-bottom: 30px;
}
.growth-card {
  overflow: hidden;
  background: #171719;
  color: #f7f5f1;
  border-radius: 8px;
  box-shadow: 0 30px 55px -40px #17171970;
}
.growth-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 23px 30px;
  border-bottom: 1px solid #ffffff25;
}
.design-studio .growth-top .micro {
  color: #c7c4c1;
  font-size: 14px;
  letter-spacing: 0.045em;
}
.growth-layout {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  min-height: 545px;
  align-items: stretch;
}
.growth-art {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 54%, #33242b, transparent 72%);
  position: relative;
}
.growth-stage {
  width: 100%;
  height: 440px;
  position: relative;
}
.growth-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.design-studio .growth-caption {
  color: #c5c1bf;
  padding: 0 24px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  min-height: 48px;
  margin: 0;
}
.growth-copy {
  padding: 42px 46px 38px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.growth-number {
  font:
    italic 57px/1 Instrument,
    Georgia,
    serif;
  color: #ff6689;
  margin-bottom: 25px;
  display: block;
}
.design-studio .growth-copy h3 {
  color: #f7f5f1;
  font-size: clamp(30px, 2.65vw, 42px);
  line-height: 1.17;
  letter-spacing: -0.035em;
  font-weight: 450;
  margin: 0 0 22px;
  min-height: 100px;
}
.design-studio .growth-copy > p {
  color: #ccc8c6;
  font-size: 18px;
  line-height: 1.75;
  min-height: 126px;
  margin: 0;
}
.growth-takeaway {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  border-top: 1px solid #ffffff25;
  padding-top: 23px;
  margin-top: 25px;
}
.growth-takeaway > span {
  font-size: 29px;
  line-height: 1.2;
  color: #ff6689;
}
.design-studio .growth-takeaway p {
  font-size: 16px;
  line-height: 1.65;
  color: #f0eae7;
  margin: 0;
  min-height: 54px;
}
.scene-controls {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-top: 1px solid #ffffff25;
}
.scene-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1;
}
.scene-steps > span {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 24px 22px;
  font-size: 15px;
  line-height: 1.5;
  color: #aaa6a5;
  border-right: 1px solid #ffffff20;
  transition:
    background 0.4s,
    color 0.4s;
}
.scene-steps small {
  font-size: 14px;
  color: #bcb4b6;
}
.scene-steps [aria-current="step"] {
  background: #ffffff08;
  color: #fff;
}
.scene-steps [aria-current="step"] small {
  color: #ff6689;
}
.motion-toggle {
  background: transparent;
  color: #f2e9e9;
  border: 0;
  min-width: 114px;
  min-height: 58px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font:
    500 14px/1.5 Manrope,
    Arial,
    sans-serif;
  cursor: pointer;
}
.motion-toggle:hover {
  background: #ffffff0e;
}
.motion-toggle:focus-visible {
  outline: 2px solid #ff6689;
  outline-offset: -5px;
}
.scene-progress {
  height: 3px;
  background: #ffffff0a;
}
.scene-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: #f32654;
}
.design-studio .growth-note {
  font-size: 14px;
  line-height: 1.6;
  color: #686667;
  margin: 20px 0 0;
}
.scene-fallback {
  display: none;
  position: absolute;
  inset: 18% 13% 9%;
  align-items: end;
  justify-content: space-around;
  gap: 18px;
}
[data-engine="fallback"] canvas {
  display: none;
}
[data-engine="fallback"] .scene-fallback {
  display: flex;
}
.scene-fallback > div {
  height: 100%;
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  font-size: 15px;
}
.scene-fallback i {
  display: block;
  width: 100%;
  height: 57%;
  background: linear-gradient(115deg, #f32654, #a1082b);
  border-radius: 5px;
  box-shadow: 12px 12px 24px #0005;
}
.scene-fallback > div:nth-child(2) i {
  height: 74%;
  background: linear-gradient(115deg, #fff, #b5b2ad);
}
.scene-fallback > div:nth-child(3) i {
  height: 90%;
}
@media (min-width: 1500px) {
  .design-studio .hero h1 {
    font-size: 94px;
  }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .design-studio .hero-grid {
    gap: 38px;
  }
  .design-studio .hero h1 {
    font-size: 5.75vw;
  }
  .growth-copy {
    padding-right: 28px;
  }
  .scene-steps > span {
    padding: 19px 15px;
    font-size: 14px;
    gap: 8px;
  }
}
@media (max-width: 900px) {
  .design-studio .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .design-studio .hero h1 {
    font-size: clamp(60px, 9vw, 88px);
  }
  .design-studio .hero-photo {
    max-width: 100%;
    height: 620px;
    min-height: 620px;
  }
  .design-studio .hero-photo > img {
    object-position: 50% 29%;
  }
  .growth-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .growth-stage {
    height: 430px;
  }
  .growth-copy {
    padding: 20px 35px 35px;
  }
  .design-studio .growth-copy h3 {
    font-size: 37px;
    min-height: 0;
  }
  .design-studio .growth-copy > p {
    min-height: 0;
  }
  .growth-number {
    display: none;
  }
  .growth-takeaway p {
    min-height: 0 !important;
  }
  .growth-top {
    flex-direction: column;
    gap: 10px;
  }
  .scene-steps > span {
    padding: 17px 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
  }
  .design-studio .duo-photo img {
    height: auto;
    aspect-ratio: 1.2;
    object-position: 50% 50%;
  }
}
@media (max-width: 600px) {
  .design-studio .hero h1 {
    font-size: clamp(45px, 10.9vw, 65px);
    line-height: 1.12;
    margin-bottom: 27px;
  }
  .design-studio .hero h1 em {
    font-size: 1.1em;
  }
  .design-studio .hero-grid {
    gap: 32px;
  }
  .design-studio .hero .lead {
    font-size: 19px;
  }
  .design-studio .hero .support {
    font-size: 17px;
  }
  .design-studio .hero-photo {
    height: 515px;
    min-height: 515px;
  }
  .design-studio .hero-photo > img {
    object-position: 50% 35%;
  }
  .growth-top {
    padding: 20px 22px;
  }
  .growth-top .micro:last-child {
    font-size: 14px;
  }
  .growth-stage {
    height: 305px;
  }
  .design-studio .growth-caption {
    padding: 0 22px;
    font-size: 14px;
    min-height: 56px;
  }
  .growth-copy {
    padding: 18px 23px 28px;
  }
  .design-studio .growth-copy h3 {
    font-size: 31px;
    min-height: 74px;
    margin-bottom: 18px;
  }
  .design-studio .growth-copy > p {
    font-size: 17px;
    min-height: 150px;
  }
  .growth-takeaway {
    margin-top: 21px;
    padding-top: 20px;
  }
  .design-studio .growth-takeaway p {
    font-size: 15px;
    min-height: 76px !important;
  }
  .scene-controls {
    flex-direction: column;
  }
  .scene-steps > span {
    padding: 17px 12px;
    font-size: 14px;
    line-height: 1.55;
  }
  .scene-steps > span:last-child {
    border: 0;
  }
  .motion-toggle {
    border-top: 1px solid #ffffff20;
    min-height: 52px;
    padding: 12px;
  }
  .design-studio .growth-note {
    font-size: 14px;
  }
  .design-studio .sc-growth-story {
    padding-bottom: 0;
  }
  .design-studio .duo-photo img {
    height: auto;
    aspect-ratio: 1;
    object-position: 50% 50%;
    border-radius: 45px 4px 4px 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-steps > span {
    transition: none;
  }
}
.design-studio .people-grid > *,
.design-studio .ways-grid > *,
.design-studio .people-copy .roles > div {
  min-width: 0;
}
.design-studio .duo-photo {
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 68px 4px 4px 4px;
}
.design-studio .duo-photo img {
  display: block;
  border-radius: 0 !important;
}
.design-studio .duo-photo figcaption {
  inset: auto 0 0;
  padding: 40px 25px 22px;
  background: linear-gradient(transparent, #111b);
  line-height: 1.5;
}
.design-studio .way-card h3 {
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 600px) {
  .design-studio .people-copy .roles {
    grid-template-columns: minmax(0, 1fr);
  }
  .design-studio .people-grid,
  .design-studio .ways-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .design-studio .people-copy h2 {
    overflow-wrap: break-word;
  }
  .design-studio .header .menu-toggle {
    white-space: nowrap;
    flex: none;
  }
}

/* The reader's evening is the dramatic turning point, before our experience and the solution. */
.design-studio .pressure-chapter {
  padding: 0 0 30px;
}
.pressure-panel {
  overflow: hidden;
  border-radius: 8px;
  background: #171719;
  color: #f5f2ed;
}
.pressure-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 32px;
  border-bottom: 1px solid #ffffff25;
}
.design-studio .pressure-heading .micro {
  color: #d1cbca;
  letter-spacing: 0.04em;
}
.pressure-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  padding: 50px 45px 45px;
}
.pressure-evening {
  position: relative;
  min-width: 0;
}
.evening-line {
  position: absolute;
  left: 50px;
  width: 1px;
  top: 42px;
  bottom: 42px;
  background: linear-gradient(#ff4771, #ffffff16);
}
.evening-moment {
  position: relative;
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 23px;
  align-items: start;
  padding: 20px 0 30px;
  min-height: 153px;
}
.evening-time {
  font-size: 36px;
  line-height: 1.3;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
  color: #ff7594;
  background: #171719;
  position: relative;
  padding: 0 0 9px;
}
.evening-time span {
  display: inline-block;
  padding: 0 2px;
}
.design-studio .evening-moment .micro {
  display: block;
  color: #b7adad;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.025em;
  margin-bottom: 12px;
  text-transform: none;
}
.design-studio .evening-moment h3 {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.025em;
  font-weight: 450;
  color: #eee8e5;
  margin: 0;
}
.evening-moment.moment-entered {
  animation: evening-arrives 0.8s both cubic-bezier(0.2, 0.7, 0.2, 1);
}
.evening-moment.moment-entered .evening-time {
  animation: evening-glow 1.3s both;
}
.pressure-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.design-studio .pressure-copy h2 {
  font-size: clamp(42px, 3.65vw, 59px);
  line-height: 1.1;
  margin: 0 0 25px;
  color: #f7f2ed;
}
.design-studio .pressure-copy h2 em {
  color: #ff7594;
}
.design-studio .pressure-copy > p {
  font-size: 18px;
  line-height: 1.8;
  color: #cac2c1;
  margin: 0 0 18px;
}
.pressure-question {
  font-size: 20px;
  line-height: 1.65;
  border-top: 1px solid #ffffff25;
  padding-top: 26px;
  margin-top: 9px;
  color: #d4cac7;
}
.pressure-question strong {
  font-weight: 500;
  color: #fff;
}
.pressure-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 27px 45px 31px;
  background: #ffffff04;
  border-top: 1px solid #ffffff25;
}
.design-studio .pressure-bridge p {
  font-size: 19px;
  line-height: 1.6;
  color: #c6bdbc;
  margin: 0;
}
.pressure-bridge p strong {
  font-weight: 500;
  color: #fff;
}
.design-studio .pressure-bridge .text-link {
  color: #fff;
  border-color: #897b7e;
  font-size: 16px;
  white-space: nowrap;
}
.pressure-bridge .arrow {
  color: #ff7594;
}
.design-studio #erfahrung {
  padding-top: 76px;
  padding-bottom: 65px;
}
.design-studio .solution-intro {
  padding: 35px 0 44px;
}
.design-studio .solution-intro .split-heading {
  grid-template-columns: 1.17fr 0.83fr;
  gap: 90px;
  align-items: start;
  margin: 0;
}
.design-studio .solution-intro .split-heading p {
  font-size: 18px !important;
  line-height: 1.8;
  color: #636162;
  max-width: 470px;
}
.design-studio .sc-growth-story {
  padding-bottom: 75px;
}
.design-studio #rechner .comparison,
.design-studio #rechner .input-columns {
  min-width: 0;
}
.design-studio #rechner .comparison > *,
.design-studio #rechner .input-columns > *,
.design-studio #rechner .field {
  min-width: 0;
}
.design-studio #rechner input {
  font-size: 17px;
}
.design-studio #rechner .outcome strong {
  color: #fff;
}
@keyframes evening-arrives {
  from {
    transform: translateY(13px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes evening-glow {
  0% {
    color: #fff;
    text-shadow: 0 0 24px #ff17487a;
  }
  100% {
    color: #ff7594;
    text-shadow: 0 0 0 transparent;
  }
}
@media (max-width: 1100px) {
  .pressure-layout {
    gap: 35px;
    padding: 35px 30px;
  }
  .evening-moment {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 17px;
  }
  .evening-time {
    font-size: 30px;
  }
  .design-studio .evening-moment h3 {
    font-size: 20px;
  }
  .pressure-bridge {
    padding-left: 30px;
    padding-right: 30px;
  }
  .design-studio .pressure-copy h2 {
    font-size: 43px;
  }
  .design-studio .solution-intro .split-heading {
    gap: 50px;
  }
}
@media (max-width: 900px) {
  .pressure-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .evening-moment {
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 130px;
  }
  .evening-time {
    font-size: 36px;
  }
  .design-studio .evening-moment h3 {
    font-size: 23px;
  }
  .design-studio .pressure-copy h2 {
    font-size: 51px;
  }
  .pressure-copy {
    border-top: 1px solid #ffffff25;
    padding-top: 35px;
  }
  .design-studio .solution-intro .split-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .design-studio .solution-intro .split-heading p {
    max-width: 650px;
  }
}
@media (max-width: 600px) {
  .pressure-heading {
    padding: 22px;
    flex-direction: column;
    gap: 8px;
  }
  .pressure-heading .micro {
    font-size: 14px;
  }
  .pressure-layout {
    padding: 23px;
    gap: 10px;
  }
  .evening-moment {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    min-height: 155px;
    padding: 19px 0 26px;
  }
  .evening-time {
    font-size: 29px;
  }
  .evening-line {
    left: 38px;
  }
  .design-studio .evening-moment .micro {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .design-studio .evening-moment h3 {
    font-size: 18px;
    line-height: 1.5;
  }
  .evening-moment h3 br {
    display: none;
  }
  .design-studio .pressure-copy h2 {
    font-size: 40px;
    line-height: 1.1;
  }
  .design-studio .pressure-copy > p {
    font-size: 17px;
  }
  .pressure-question {
    font-size: 18px;
    padding-top: 22px;
  }
  .pressure-bridge {
    padding: 25px 23px;
    flex-direction: column;
    align-items: start;
    gap: 24px;
  }
  .design-studio .pressure-bridge p {
    font-size: 18px;
  }
  .design-studio .pressure-bridge .text-link {
    font-size: 15px;
  }
  .design-studio #erfahrung {
    padding-top: 50px;
    padding-bottom: 38px;
  }
  .design-studio .solution-intro {
    padding: 12px 0 35px;
  }
  .design-studio .solution-intro .split-heading p {
    font-size: 17px !important;
  }
  .design-studio .sc-growth-story {
    padding-bottom: 45px;
  }
  .design-studio #rechner .intro {
    gap: 24px;
  }
  .design-studio #rechner .intro h2 {
    font-size: 42px;
  }
  .design-studio #rechner .model-heading {
    min-height: 0;
  }
  .design-studio #rechner .assumptions summary {
    flex-wrap: wrap;
    gap: 8px;
  }
  .design-studio #rechner .outcome h3 {
    overflow-wrap: break-word;
  }
}
@media (max-width: 360px) {
  .pressure-layout {
    padding: 21px 18px;
  }
  .evening-moment {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }
  .evening-time {
    font-size: 26px;
  }
  .design-studio .pressure-copy h2 {
    font-size: 36px;
  }
  .design-studio .pressure-heading {
    padding: 20px 18px;
  }
  .pressure-bridge {
    padding: 24px 18px;
  }
  .design-studio #rechner .model {
    padding: 25px 20px;
  }
  .design-studio #rechner .model h3 {
    font-size: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .evening-moment.moment-entered,
  .evening-moment.moment-entered .evening-time {
    animation: none;
  }
}
.design-studio #erfahrung > .wrap > .evidence-foot {
  margin-top: 30px;
}
.design-studio .supporting-proof {
  background: #e9e6de;
  color: #2a2829;
  --ink: #2a2829;
  --muted: #666465;
  --line: #2a282925;
  padding: 65px 0;
}
.design-studio .supporting-proof .evidence-secondary {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.design-studio .supporting-proof .evidence-secondary p,
.design-studio .supporting-proof .evidence-foot,
.design-studio .supporting-proof .evidence-secondary .micro,
.design-studio .supporting-proof .quote-row cite {
  color: #656364;
}
.design-studio .supporting-proof .evidence-secondary strong,
.design-studio .supporting-proof .quote-row blockquote {
  color: #2a2829;
}
.design-studio .supporting-proof .quote-row {
  border-color: #2a282925;
}
.design-studio .supporting-proof .quote-mark {
  color: #c81035;
}
@media (max-width: 600px) {
  .design-studio .supporting-proof {
    padding: 45px 0;
  }
}

/* The evening becomes an object: a lit dial whose free segments are displaced. */
.design-studio .evening-chapter {
  padding: 0 0 70px;
}
.evening-panel {
  background: #121215;
  color: #f5f2ed;
  border: 1px solid #30282d;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  --evening-fill: 0;
  --loop-progress: 0;
}
.evening-top {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 25px 35px;
  border-bottom: 1px solid #ffffff1c;
}
.design-studio .evening-top .micro {
  color: #ccc1c5;
  font-size: 14px;
  letter-spacing: 0.055em;
}
.evening-top .micro:first-child:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  border-radius: 50%;
  background: #fa214f;
  box-shadow: 0 0 18px #fa214f66;
}
.evening-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  min-height: 580px;
}
.evening-copy {
  padding: 55px 0 55px 45px;
  position: relative;
  z-index: 1;
}
.design-studio .evening-copy h2 {
  color: #fff8f3;
  font-size: clamp(41px, 3.75vw, 60px);
  line-height: 1.08;
  margin: 0 0 30px;
  letter-spacing: -0.045em;
}
.design-studio .evening-copy h2 em {
  color: #ff577c;
}
.design-studio .evening-copy > p {
  color: #c9c0c3;
  font-size: 18px;
  line-height: 1.8;
  margin: 0 0 17px;
  max-width: 450px;
}
.evening-question {
  font-size: 19px;
  line-height: 1.75;
  color: #c9c0c3;
  padding-top: 25px;
  margin-top: 26px;
  border-top: 1px solid #ffffff25;
  max-width: 450px;
}
.evening-question strong {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  color: #fff8f3;
  display: inline-block;
  margin-top: 3px;
}
.evening-visual {
  height: 600px;
  min-width: 0;
  position: relative;
  isolation: isolate;
}
.evening-stage {
  position: absolute;
  inset: 8px -10px 23px;
  z-index: 1;
}
.evening-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.evening-aura {
  position: absolute;
  inset: 5% -2% 10%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 51% 55%, #f51c462c, transparent 61%);
  opacity: calc(0.25 + var(--evening-fill) * 0.75);
  transition: opacity 0.3s;
}
.evening-notice {
  position: absolute;
  right: 26px;
  top: 38px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 19px;
  border: 1px solid #f080943e;
  border-radius: 11px;
  background: linear-gradient(135deg, #353035ee, #211d24ee);
  box-shadow:
    0 18px 40px #0005,
    inset 0 1px #ffffff16;
  max-width: 340px;
  transform: translateY(0);
  backdrop-filter: blur(16px);
}
.notice-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  background: #d01139;
  color: #fff;
  border-radius: 8px;
  font-size: 24px;
}
.design-studio .notice-kicker {
  display: block;
  font-size: 13px;
  color: #cabfc6;
  line-height: 1.5;
  margin-bottom: 4px;
}
.design-studio .evening-notice strong {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 450;
  color: #fff;
}
.evening-notice.notice-arrives {
  animation: notice-arrives 0.75s cubic-bezier(0.16, 0.85, 0.26, 1) both;
}
.evening-legend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  display: flex;
  justify-content: center;
  gap: 25px;
  color: #cfc6ca;
  font-size: 14px;
  z-index: 2;
  line-height: 1.6;
}
.evening-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.evening-legend i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #f2214d;
  box-shadow: 0 0 12px #f2214d45;
}
.evening-legend span + span i {
  background: #eadbc1;
  box-shadow: 0 0 12px #eadbc13d;
}
.evening-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 105px;
  border-top: 1px solid #ffffff25;
}
.evening-steps > button {
  position: relative;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid #ffffff20;
  padding: 21px 30px 25px;
  font-family: Manrope, Arial, sans-serif;
  cursor: pointer;
  color: #c8bdc3;
  overflow: hidden;
  transition: background 0.3s;
}
.evening-steps > button:hover {
  background: #ffffff07;
}
.evening-steps > button:not(.evening-play) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.evening-step-time {
  display: block;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #90848d;
  margin-bottom: 9px;
  transition: color 0.3s;
}
.evening-steps > button > span + span {
  font-size: 14px;
  line-height: 1.5;
}
.evening-steps > button .evening-step-quote {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: #e3d9de;
  margin-top: 10px;
}
.evening-steps > button[aria-pressed="true"] {
  background: #ffffff05;
  color: #fff1f5;
}
.evening-steps > button[aria-pressed="true"] .evening-step-time {
  color: #ff577c;
}
.evening-steps > button i {
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  background: #ef1c4c;
  box-shadow: 0 0 12px #ff295577;
}
.evening-steps > button[aria-pressed="true"] i {
  width: calc(var(--loop-progress) * 100%);
}
.evening-steps > button:focus-visible {
  outline: 2px solid #ff577c;
  outline-offset: -5px;
}
.evening-steps .evening-play {
  border-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px;
  font-size: 15px;
  text-align: center;
}
.evening-bottom {
  padding: 27px 44px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  border-top: 1px solid #ffffff20;
  background: linear-gradient(110deg, #28172055, #121215);
}
.design-studio .evening-bottom p {
  font-size: 18px;
  line-height: 1.7;
  color: #c4b9bf;
  margin: 0;
}
.design-studio .evening-bottom strong {
  color: #fff4f7;
  font-weight: 500;
}
.design-studio .evening-bottom .text-link {
  color: #fff5f5;
  border-color: #ad929c;
  font-size: 16px;
  white-space: nowrap;
}
.evening-bottom .arrow {
  color: #ff577c;
}
.evening-fallback {
  display: none;
  position: absolute;
  inset: 22% 10% 13%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  isolation: isolate;
}
.evening-fallback > div {
  position: absolute;
  inset: 0;
  aspect-ratio: 1;
  margin: auto;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(#ed1844 0 88%, #e8d7b7 88%);
  box-shadow:
    0 0 45px #ed18443d,
    inset 0 0 0 13px #232128;
}
.evening-fallback > div:before {
  content: "";
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  background: #141418;
}
.evening-fallback strong {
  font-size: 52px;
  font-weight: 450;
  z-index: 1;
  color: #fff;
}
.evening-fallback span {
  font-size: 14px;
  z-index: 1;
  color: #ddd;
}
[data-engine="fallback"].evening-stage canvas {
  display: none;
}
[data-engine="fallback"] .evening-fallback {
  display: flex;
}
@keyframes notice-arrives {
  from {
    opacity: 0;
    transform: translateY(-15px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 1100px) {
  .evening-copy {
    padding-left: 30px;
  }
  .design-studio .evening-copy h2 {
    font-size: 43px;
  }
  .design-studio .evening-copy > p {
    font-size: 17px;
  }
  .evening-visual {
    height: 560px;
  }
  .evening-notice {
    right: 15px;
    top: 35px;
    padding: 13px;
    max-width: 285px;
  }
  .design-studio .evening-notice strong {
    font-size: 14px;
  }
  .evening-steps > button {
    padding: 20px;
  }
  .evening-legend {
    gap: 15px;
    font-size: 13px;
  }
  .evening-question strong {
    font-size: 20px;
  }
}
@media (max-width: 900px) {
  .evening-layout {
    grid-template-columns: 1fr;
  }
  .evening-copy {
    padding: 38px 35px 15px;
  }
  .design-studio .evening-copy h2 {
    font-size: 50px;
  }
  .design-studio .evening-copy > p,
  .evening-question {
    max-width: 100%;
  }
  .evening-visual {
    height: 510px;
  }
  .evening-stage {
    inset: 0 7% 15px;
  }
  .evening-notice {
    right: 12%;
    top: 20px;
  }
  .evening-legend {
    bottom: 16px;
    font-size: 14px;
  }
  .evening-steps > button {
    padding: 20px 17px;
  }
  .evening-bottom {
    padding: 25px 30px;
  }
}
@media (max-width: 600px) {
  .design-studio .evening-chapter {
    padding-bottom: 40px;
  }
  .evening-top {
    padding: 22px;
    flex-direction: column;
    gap: 10px;
  }
  .design-studio .evening-top .micro {
    font-size: 13px;
    letter-spacing: 0.035em;
  }
  .evening-copy {
    padding: 30px 23px 5px;
  }
  .design-studio .evening-copy h2 {
    font-size: 43px;
    margin-bottom: 24px;
  }
  .design-studio .evening-copy > p {
    font-size: 17px;
    line-height: 1.75;
  }
  .evening-question {
    font-size: 17px;
    line-height: 1.7;
    margin-top: 20px;
    padding-top: 20px;
  }
  .evening-question strong {
    font-size: 20px;
  }
  .evening-visual {
    height: 390px;
  }
  .evening-stage {
    inset: 25px -10px 10px;
  }
  .evening-notice {
    right: 17px;
    top: 15px;
    max-width: 285px;
    padding: 11px 14px;
    gap: 10px;
  }
  .notice-icon {
    width: 29px;
    height: 29px;
    font-size: 21px;
  }
  .design-studio .notice-kicker {
    font-size: 12px;
    margin-bottom: 2px;
  }
  .design-studio .evening-notice strong {
    font-size: 14px;
  }
  .evening-legend {
    gap: 15px;
    bottom: 12px;
    font-size: 12px;
  }
  .evening-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .evening-steps > button {
    padding: 19px 12px 22px;
  }
  .evening-step-time {
    font-size: 24px;
  }
  .evening-steps > button > span + span {
    font-size: 13px;
    line-height: 1.55;
    display: block;
  }
  .evening-steps .evening-play {
    grid-column: 1/-1;
    min-height: 50px;
    border-top: 1px solid #ffffff20;
    padding: 12px;
  }
  .evening-bottom {
    padding: 24px 23px;
    flex-direction: column;
    align-items: start;
    gap: 22px;
  }
  .design-studio .evening-bottom p {
    font-size: 17px;
  }
  .design-studio .evening-bottom .text-link {
    font-size: 15px;
  }
  .evening-fallback strong {
    font-size: 42px;
  }
  .evening-fallback span {
    font-size: 12px;
  }
}
@media (max-width: 360px) {
  .evening-copy {
    padding-left: 19px;
    padding-right: 19px;
  }
  .design-studio .evening-copy h2 {
    font-size: 36px;
  }
  .evening-visual {
    height: 355px;
  }
  .evening-steps > button {
    padding: 17px 10px 20px;
  }
  .evening-step-time {
    font-size: 22px;
  }
  .evening-legend {
    gap: 11px;
    font-size: 11px;
  }
  .evening-legend span {
    gap: 6px;
  }
  .evening-bottom {
    padding-left: 19px;
    padding-right: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .evening-notice.notice-arrives {
    animation: none;
  }
  .evening-steps > button,
  .evening-step-time,
  .evening-aura {
    transition: none;
  }
}
.design-studio #erfahrung.proof-refined {
  padding-top: 40px;
  padding-bottom: 45px;
}
.design-studio .proof-refined .proof-heading {
  margin-bottom: 38px;
  font-size: clamp(43px, 4.2vw, 64px);
}
.design-studio .proof-refined .evidence-visual {
  min-height: 440px;
}
.design-studio .proof-refined .evidence-copy h3 {
  font-size: 36px;
}
.design-studio .proof-refined .evidence-copy p {
  font-size: 18px;
  line-height: 1.8;
}
.design-studio .proof-refined .evidence-secondary {
  margin-top: 36px;
  padding-top: 30px;
  padding-bottom: 20px;
  gap: 60px;
}
.design-studio .proof-refined .evidence-secondary strong {
  font-size: 36px;
}
.design-studio .proof-refined .evidence-secondary p {
  font-size: 16px;
  line-height: 1.8;
}
.design-studio #erfahrung.proof-refined > .wrap > .evidence-foot {
  margin-top: 15px;
}
.design-studio #kundenstimmen .quote-row {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
@media (max-width: 700px) {
  .evening-steps > button .evening-step-quote {
    display: none;
  }
  .design-studio .proof-refined .evidence-visual {
    min-height: 420px;
  }
  .design-studio .proof-refined .evidence-copy h3 {
    font-size: 32px;
  }
  .design-studio .proof-refined .evidence-copy p {
    font-size: 17px;
  }
  .design-studio .proof-refined .evidence-secondary {
    gap: 20px;
    margin-top: 28px;
    padding-top: 26px;
  }
  .design-studio .proof-refined .evidence-secondary strong {
    font-size: 32px;
  }
  .design-studio .proof-refined .evidence-secondary p {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .evening-legend {
    font-size: 14px;
    gap: 12px;
  }
  .evening-steps > button > span + span {
    font-size: 14px;
  }
  .design-studio .evening-top .micro {
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  .evening-legend {
    font-size: 13px;
    gap: 10px;
  }
  .evening-steps > button {
    padding-left: 9px;
    padding-right: 9px;
  }
}

/* The transformation follows ordinary page scrolling: no wheel interception or timer. */
.growth-scroll-track[style] {
  height: calc(var(--growth-card-height) + min(78svh, 720px));
}
.growth-scroll-track .growth-card {
  position: sticky;
  top: 24px;
  overflow: clip;
}
.growth-mobile-copy {
  display: none;
}
.scene-steps > button {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px;
  border: 0;
  border-right: 1px solid #ffffff20;
  background: transparent;
  text-align: left;
  font:
    400 15px/1.5 Manrope,
    Arial,
    sans-serif;
  color: #aaa6a5;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.scene-steps > button:hover {
  background: #ffffff0c;
  color: #fff;
}
.scene-steps > button:focus-visible {
  outline: 2px solid #ff6689;
  outline-offset: -5px;
}
.scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #d3cbce;
  font-size: 14px;
  line-height: 1.5;
  padding: 16px 22px;
  max-width: 195px;
}
.scroll-cue > span {
  font-size: 24px;
  color: #ff6689;
}
.growth-art:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #ffffff10;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 901px) and (max-height: 820px) {
  .growth-layout {
    min-height: 460px;
  }
  .growth-stage {
    height: 350px;
  }
  .growth-copy {
    padding: 28px;
  }
  .growth-number {
    font-size: 40px;
    margin-bottom: 15px;
  }
  .design-studio .growth-copy h3 {
    font-size: 33px;
    min-height: 80px;
    margin-bottom: 16px;
  }
  .design-studio .growth-copy > p {
    min-height: 120px;
    line-height: 1.65;
    font-size: 17px;
  }
  .growth-takeaway {
    padding-top: 18px;
    margin-top: 18px;
  }
  .design-studio .growth-takeaway p {
    font-size: 15px;
  }
  .growth-top {
    padding: 18px 26px;
  }
  .scene-steps > button {
    padding: 18px;
    font-size: 14px;
  }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .scene-steps > button {
    padding: 18px 14px;
    gap: 8px;
    font-size: 14px;
  }
  .scroll-cue {
    padding: 14px;
    max-width: 162px;
  }
}
@media (max-width: 900px), (max-height: 580px) {
  .growth-scroll-track[style] {
    height: auto;
  }
  .growth-scroll-track .growth-card {
    position: relative;
    top: auto;
  }
  .growth-layout {
    display: block;
    min-height: 0;
  }
  .growth-layout > .growth-copy {
    display: none;
  }
  .growth-mobile-copy {
    display: block;
  }
  .growth-art {
    position: sticky;
    top: 0;
    z-index: 2;
    background: radial-gradient(ellipse at 50% 54%, #33242b, transparent 72%), #171719;
    box-shadow: 0 12px 20px -16px #000;
  }
  .growth-art:after {
    opacity: 1;
  }
  .growth-stage {
    height: clamp(220px, 32svh, 330px);
  }
  .design-studio .growth-caption {
    height: 60px;
    min-height: 60px;
    padding: 0 22px 18px;
    font-size: 14px;
    line-height: 1.5;
  }
  .growth-mobile-copy > .growth-copy {
    min-height: max(475px, 62svh);
    padding: 30px 28px 45px;
    justify-content: center;
    border-top: 1px solid #ffffff20;
  }
  .growth-mobile-copy .growth-number {
    display: block;
    font-size: 36px;
    margin-bottom: 16px;
  }
  .design-studio .growth-mobile-copy h3 {
    font-size: 31px;
    min-height: 0;
    margin-bottom: 20px;
  }
  .design-studio .growth-mobile-copy .growth-copy > p {
    font-size: 17px;
    line-height: 1.7;
    min-height: 0;
  }
  .design-studio .growth-mobile-copy .growth-takeaway p {
    min-height: 0 !important;
    font-size: 15px;
  }
  .scene-controls {
    flex-direction: column;
  }
  .scene-steps > button {
    padding: 16px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
  }
  .scene-steps > button:last-child {
    border-right: 0;
  }
  .scroll-cue {
    border-top: 1px solid #ffffff20;
    max-width: none;
    padding: 12px;
  }
}
@media (max-width: 360px) {
  .growth-mobile-copy > .growth-copy {
    padding: 26px 22px 40px;
  }
  .design-studio .growth-mobile-copy h3 {
    font-size: 29px;
  }
  .scene-steps > button {
    padding: 15px 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-steps > button {
    transition: none;
  }
}

/* Lesbarkeitsuntergrenze: kleine Hinweistexte der Abendszene auf 14px. */
.design-studio .notice-kicker,
.design-studio .notice-line {
  font-size: 14px;
}

.design-studio .evening-fallback span {
  font-size: 14px;
}

/* Abendszene: kein Wiedergabeschalter mehr, sondern ein Scroll-Hinweis. */
.evening-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #d3cbce;
  text-align: center;
}
.evening-cue > span {
  font-size: 22px;
  color: #ff6689;
}
@media (max-width: 600px) {
  .evening-steps .evening-cue {
    grid-column: 1/-1;
    min-height: 50px;
    border-top: 1px solid #ffffff20;
    padding: 13px 12px;
    font-size: 14px;
  }
}

/* Footer: der verbleibende Zertifizierungshinweis bleibt gut lesbar. */
.design-studio .footer-qualification p {
  font-size: 16px;
  line-height: 1.7;
  color: #dcdad9;
}

/* Zentrierung der Inhaltsbreite wiederherstellen (64px + 64px Rand). */
.design-studio .wrap {
  margin-inline: auto;
}

/* Vertrauensleiste: ein gemeinsamer, zurückhaltender roter Rahmen um alle drei
   Belege. Keine Einzelkarten, keine internen Trennlinien, keine Fensterlinie. */
.design-studio .trust > .wrap {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid #c81035;
  border-radius: 19px;
  padding: 30px 32px;
}
.design-studio .trust {
  padding: 56px 0;
}
@media (max-width: 900px) {
  .design-studio .trust > .wrap {
    padding: 24px 22px;
  }
  .design-studio .trust {
    padding: 44px 0;
  }
}
@media (max-width: 600px) {
  .design-studio .trust > .wrap {
    padding: 22px 20px;
  }
  .design-studio .trust-item img {
    margin-right: 0;
  }
}

/* Three cumulative callouts follow the clock ring clockwise: top, right, left. */
.design-studio [data-evening] .evening-visual {
  --evening-clock-height: 560px;
  --evening-clock-top: 0px;
  display: block;
  height: 590px;
  padding: 0;
}
.design-studio [data-evening] .evening-stage {
  inset: var(--evening-clock-top) 0 auto;
  height: var(--evening-clock-height);
}
.design-studio [data-evening] .evening-notice-legacy {
  display: none;
}
.design-studio [data-evening] .evening-notices {
  display: contents;
}
.design-studio [data-evening] [data-evening-notice] {
  position: absolute;
  inset: auto;
  z-index: 2;
  width: calc(50% - 24px);
  max-width: 310px;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    visibility 0.28s;
  animation: none;
}
.design-studio [data-evening] [data-evening-notice="0"] {
  top: 20px;
  right: 24px;
  width: calc(100% - 48px);
  max-width: 340px;
  --notice-enter-x: 0px;
  --notice-enter-y: -10px;
}
.design-studio [data-evening] [data-evening-notice="1"] {
  top: 320px;
  right: 18px;
  --notice-enter-x: 10px;
  --notice-enter-y: 0px;
}
.design-studio [data-evening] [data-evening-notice="2"] {
  top: 385px;
  left: 18px;
  --notice-enter-x: 0px;
  --notice-enter-y: 10px;
}
.design-studio [data-evening] [data-evening-notice] .notice-kicker {
  font-size: 14px;
  line-height: 1.45;
}
.design-studio [data-evening] [data-evening-notice] strong {
  font-size: 16px;
  line-height: 1.5;
}
.design-studio [data-evening] [data-notice-visible="false"] {
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--notice-enter-x), var(--notice-enter-y));
  pointer-events: none;
}
.design-studio [data-evening] .evening-legend {
  position: absolute;
  inset: auto 18px 24px;
  z-index: 2;
  margin: 0;
}
@media (min-width: 901px) and (max-width: 1150px) {
  .design-studio [data-evening] .evening-visual {
    height: 610px;
  }
  .design-studio [data-evening] [data-evening-notice] {
    padding: 12px;
  }
  .design-studio [data-evening] [data-evening-notice]:not([data-evening-notice="0"]) .notice-icon {
    display: none;
  }
}
@media (max-width: 600px) {
  .design-studio [data-evening] .evening-visual {
    --evening-clock-height: 400px;
    --evening-clock-top: 45px;
    height: 540px;
  }
  .design-studio [data-evening] [data-evening-notice] {
    width: calc(50% - 18px);
    padding: 11px 12px;
    gap: 10px;
  }
  .design-studio [data-evening] [data-evening-notice="0"] {
    top: 28px;
    right: 18px;
    width: calc(100% - 36px);
    max-width: 310px;
  }
  .design-studio [data-evening] [data-evening-notice="1"] {
    top: 295px;
    right: 12px;
  }
  .design-studio [data-evening] [data-evening-notice="2"] {
    top: 310px;
    left: 12px;
  }
  .design-studio [data-evening] [data-evening-notice]:not([data-evening-notice="0"]) .notice-icon {
    display: none;
  }
  .design-studio [data-evening] [data-evening-notice] strong {
    font-size: 14px;
    line-height: 1.5;
  }
  .design-studio [data-evening] .evening-legend {
    gap: 14px;
    flex-wrap: wrap;
    bottom: 20px;
  }
}
@media (max-width: 360px) {
  .design-studio [data-evening] .evening-visual {
    --evening-clock-height: 340px;
    height: 515px;
  }
  .design-studio [data-evening] [data-evening-notice="1"] {
    top: 260px;
  }
  .design-studio [data-evening] [data-evening-notice="2"] {
    top: 265px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .design-studio [data-evening] [data-evening-notice] {
    transition: none;
    transform: none;
  }
}