/* Nur von der Startseite benoetigt. Aus main.css ausgelagert,
   damit Unterseiten nicht die komplette Startseiten-Choreografie laden. */


.hero {
  --hero-pad: clamp(24px, 2.55vw, 50px);
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  height: 100svh;
  max-height: 1100px;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 43%, rgba(220, 232, 243, 0.25), transparent 33%),
    linear-gradient(108deg, #11161c 0%, #273039 52%, #e6ebee 100%);
}

.hero__architecture,
.hero__shade,
.hero__grain,
.hero__light,
.hero__light-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__architecture {
  z-index: -5;
  background-image: url("/assets/hero-architektur.jpg");
  background-image: image-set(url("/assets/hero-architektur.avif") type("image/avif"), url("/assets/hero-architektur.webp") type("image/webp"), url("/assets/hero-architektur.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  filter: contrast(1.035) saturate(0.92);
  transform: scale(1.055)
    translate(
      var(--architecture-x),
      var(--architecture-y)
    );
  transition: transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
  animation: architecture-in 1.8s cubic-bezier(0.17, 0.67, 0.2, 1) both;
}

.hero__shade {
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(6, 10, 15, 0.66) 0%, rgba(9, 14, 19, 0.28) 35%, transparent 67%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.32), transparent 24%, transparent 69%, rgba(7, 11, 15, 0.26));
}

.hero__grain {
  z-index: 12;
  opacity: 0.055;
  mix-blend-mode: soft-light;
  background-image: url("/assets/grain-1.svg");
}

.hero__light {
  z-index: -2;
  filter: blur(70px);
  opacity: 0.26;
  mix-blend-mode: screen;
  transition: transform 1.2s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.hero__light--violet {
  inset: auto auto -9% 31%;
  width: 53vw;
  height: 36vh;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(157, 145, 210, 0.46),
    rgba(157, 145, 210, 0.24) 44%,
    transparent 72%
  );
  transform: translateX(var(--violet-x));
}

.hero__light--ice {
  inset: -20% -8% auto auto;
  width: 42vw;
  height: 56vh;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(210, 236, 248, 0.58),
    rgba(210, 236, 248, 0.3) 46%,
    transparent 74%
  );
  transform: translate(
    var(--ice-x),
    var(--ice-y)
  );
}

.hero__light-sweep {
  z-index: -1;
  inset: -34% auto auto 47%;
  width: 20vw;
  height: 155%;
  opacity: 0.19;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(237, 246, 250, 0.78),
    transparent
  );
  filter: blur(36px);
  mix-blend-mode: screen;
  transform: rotate(16deg) translateX(var(--sweep-x));
  transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.hero__content::after {
  position: absolute;
  z-index: 1;
  right: -10%;
  bottom: -7%;
  width: 82%;
  height: 23%;
  border-top: 1px solid rgba(226, 236, 242, 0.32);
  border-radius: 50% 50% 0 0;
  content: "";
  background: radial-gradient(
    ellipse at 50% 0,
    rgba(211, 224, 233, 0.1),
    transparent 58%
  );
  box-shadow: 0 -14px 40px rgba(204, 219, 230, 0.05);
  pointer-events: none;
}

.hero__content::before {
  position: absolute;
  z-index: 2;
  right: -8%;
  bottom: -3%;
  left: 25%;
  height: 34%;
  content: "";
  background:
    repeating-linear-gradient(
      97deg,
      transparent 0 16px,
      rgba(231, 238, 241, 0.025) 17px,
      transparent 18px 34px
    ),
    radial-gradient(
      ellipse at 52% 18%,
      rgba(223, 232, 236, 0.16),
      transparent 59%
    ),
    linear-gradient(
      180deg,
      rgba(229, 236, 239, 0.03),
      rgba(35, 44, 52, 0.1)
    );
  filter: blur(0.35px);
  mix-blend-mode: soft-light;
  opacity: 0.72;
  pointer-events: none;
  transform: perspective(720px) rotateX(64deg);
  transform-origin: bottom;
}

.hero__title {
  position: absolute;
  z-index: 7;
  top: calc(clamp(48px, 6.4vh, 74px) + 1cm);
  left: var(--hero-pad);
  display: flex;
  width: auto;
  max-width: calc(100% - var(--hero-pad) * 1.12);
  align-items: center;
  margin: 0;
  color: rgba(248, 248, 246, 0.96);
  font-family: var(--font-cormorant), Georgia, "Times New Roman", serif;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 45px rgba(8, 12, 16, 0.14);
  transform: translate(
    var(--title-x),
    var(--title-y)
  );
  transition: transform 850ms cubic-bezier(0.2, 0.75, 0.2, 1);
  animation: title-reveal 1.7s 0.25s cubic-bezier(0.22, 0.61, 0.24, 1) both;
}

.hero__word {
  color: transparent;
  font-size: clamp(126px, 17.2vw, 285px);
  line-height: 0.74;
  letter-spacing: -0.073em;
  background: linear-gradient(
    104deg,
    rgba(250, 250, 247, 0.98) 10%,
    rgba(221, 230, 235, 0.92) 54%,
    rgba(249, 251, 250, 0.96) 83%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.hero__separator {
  flex: 0 0 auto;
  width: 1px;
  height: clamp(44px, 5.2vw, 82px);
  margin: clamp(2px, 0.5vw, 8px) clamp(16px, 1.45vw, 27px) 0
    clamp(18px, 1.65vw, 31px);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(247, 249, 249, 0.92) 18%,
    rgba(220, 230, 235, 0.7) 82%,
    transparent
  );
  box-shadow: 0 0 12px rgba(221, 233, 239, 0.2);
}

.hero__power {
  margin-top: clamp(-7px, -0.35vw, -3px);
  color: rgba(226, 236, 241, 0.58);
  font-size: clamp(44px, 5.25vw, 83px);
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 20px rgba(217, 233, 241, 0.28),
    0 5px 28px rgba(8, 12, 16, 0.16);
  filter: drop-shadow(0 0 12px rgba(224, 238, 245, 0.25));
}

.hero__statement {
  position: absolute;
  z-index: 6;
  top: calc(32.4% + 1.5cm);
  left: var(--hero-pad);
  width: min(44vw, 640px);
  color: rgba(248, 249, 248, 0.96);
  font-size: clamp(21px, 1.95vw, 34px);
  font-weight: 450;
  letter-spacing: -0.055em;
  line-height: 0.94;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(6, 10, 14, 0.2);
  animation: statement-in 1.1s 0.65s cubic-bezier(0.16, 0.72, 0.22, 1) both;
}

.hero__statement h1 {
  margin: 0;
  font: inherit;
}

.hero__statement-label {
  display: block;
  margin-bottom: clamp(15px, 2.2vh, 24px);
  color: rgba(239, 244, 246, 0.56);
  font-size: clamp(9px, 0.6vw, 11px);
  font-weight: 600;
  letter-spacing: 0.19em;
  line-height: 1;
  text-transform: uppercase;
}

.hero__cta {
  position: absolute;
  z-index: 8;
  top: 64.5%;
  left: var(--hero-pad);
  display: grid;
  gap: 13px;
  color: rgba(248, 249, 248, 0.86);
  font-size: clamp(9px, 0.61vw, 11px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: statement-in 1s 0.92s both;
}

.hero__cta-track {
  position: relative;
  display: block;
  width: clamp(126px, 9vw, 158px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.16)
  );
}

.hero__cta-track i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(248, 250, 250, 0.82);
  border-radius: 50%;
  background: rgba(232, 240, 244, 0.12);
  box-shadow: 0 0 12px rgba(220, 233, 240, 0.34);
  transform: translate(-1px, -50%);
  transition:
    background 450ms ease,
    box-shadow 450ms ease,
    transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero__cta:hover .hero__cta-track i {
  background: rgba(248, 250, 250, 0.95);
  box-shadow: 0 0 18px rgba(229, 240, 246, 0.75);
  transform: translate(calc(clamp(126px, 9vw, 158px) - 7px), -50%);
}

.hero__browser-wrap {
  position: absolute;
  z-index: 5;
  top: 24%;
  right: -3.2%;
  width: min(67vw, 1180px);
  perspective: 2100px;
  transform: translate(
      var(--browser-x),
      var(--browser-y)
  );
  transition: transform 750ms cubic-bezier(0.2, 0.75, 0.2, 1);
  animation: browser-enter 1.55s 0.48s cubic-bezier(0.13, 0.8, 0.22, 1) both;
}

.hero__browser-wrap::after {
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: -10%;
  left: 8%;
  height: 18%;
  border-radius: 50%;
  content: "";
  background: rgba(8, 13, 18, 0.44);
  filter: blur(28px);
  transform: rotateX(69deg);
}

.hero__browser-wrap::before {
  position: absolute;
  z-index: -2;
  right: 8%;
  bottom: -22%;
  left: 12%;
  height: 27%;
  border-radius: 48%;
  content: "";
  background:
    linear-gradient(
      180deg,
      rgba(218, 231, 238, 0.23),
      rgba(129, 149, 163, 0.08) 38%,
      transparent 76%
    );
  filter: blur(18px);
  opacity: 0.52;
  transform: rotateX(74deg) scaleY(-1);
  transform-origin: top;
  pointer-events: none;
}

.browser__halo {
  position: absolute;
  z-index: -2;
  inset: -8% -5% -14% 8%;
  border-radius: 48%;
  background:
    radial-gradient(circle at 54% 52%, rgba(225, 239, 247, 0.3), transparent 54%),
    radial-gradient(circle at 75% 55%, rgba(173, 161, 219, 0.2), transparent 47%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: 0.7;
}

.hero__browser {
  position: relative;
  aspect-ratio: 1.54;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: clamp(14px, 1.45vw, 25px);
  background:
    linear-gradient(137deg, rgba(137, 154, 169, 0.43), rgba(210, 222, 229, 0.16)),
    rgba(28, 39, 49, 0.24);
  box-shadow:
    0 58px 110px rgba(5, 10, 16, 0.32),
    0 17px 42px rgba(15, 24, 33, 0.23),
    -8px 0 26px rgba(223, 237, 245, 0.11),
    inset 2px 0 0 rgba(245, 250, 252, 0.24),
    inset -2px 0 0 rgba(140, 161, 175, 0.12),
    inset 0 3px 0 rgba(255, 255, 255, 0.24),
    inset 0 -3px 0 rgba(112, 132, 147, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(21px) saturate(0.96);
  transform: rotateY(-8deg) rotateX(2deg) rotateZ(-0.65deg);
  transform-style: preserve-3d;
  transform-origin: 54% 62%;
  animation: browser-breathe 7.5s 2.2s ease-in-out infinite;
}

.hero__browser::before {
  position: absolute;
  z-index: 7;
  top: 7%;
  left: 7%;
  content: "MORGEN";
  color: rgba(237, 244, 247, 0.045);
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(54px, 7.5vw, 126px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 1;
  text-transform: uppercase;
  filter: blur(1.4px);
  mix-blend-mode: screen;
  transform: scaleX(-1) rotate(-2deg);
  pointer-events: none;
}

.hero__browser::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 22% 44%, rgba(255, 255, 255, 0.055) 0 1.2%, transparent 3.4%),
    radial-gradient(ellipse at 28% 47%, rgba(255, 255, 255, 0.032) 0 1.4%, transparent 3.8%),
    radial-gradient(ellipse at 78% 24%, rgba(235, 244, 248, 0.05), transparent 18%),
    linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.035) 49%, transparent 61%);
  opacity: 0.72;
  mix-blend-mode: screen;
  pointer-events: none;
}
.browser__edge {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.browser__edge--top {
  top: 0;
  right: 4%;
  left: 3%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.98) 42%,
    rgba(216, 232, 241, 0.32),
    transparent
  );
  filter: blur(0.2px);
}

.browser__edge--top::after {
  position: absolute;
  top: 4px;
  right: 9%;
  left: 7%;
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgba(202, 219, 229, 0.34),
    transparent
  );
  filter: blur(0.5px);
}

.browser__edge--left {
  top: 6%;
  bottom: 8%;
  left: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.85),
    transparent
  );
}

.browser__edge--left::after {
  position: absolute;
  top: 8%;
  bottom: 11%;
  left: 4px;
  width: 1px;
  content: "";
  background: linear-gradient(
    180deg,
    transparent,
    rgba(222, 235, 242, 0.32),
    transparent
  );
  filter: blur(0.4px);
}

.browser__reflection {
  position: absolute;
  z-index: 9;
  top: -30%;
  left: -25%;
  width: 55%;
  height: 170%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  filter: blur(12px);
  transform: rotate(17deg) translateX(-120%);
  animation: reflection 8s 2.8s ease-in-out infinite;
}

.browser__topbar {
  position: relative;
  z-index: 2;
  display: flex;
  height: 12%;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.4%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(
    90deg,
    rgba(22, 31, 39, 0.24),
    rgba(219, 230, 237, 0.08)
  );
  color: rgba(249, 251, 252, 0.78);
}

.browser__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(7px, 0.71vw, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.browser__brand i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(248, 251, 252, 0.84);
  box-shadow: 0 0 9px rgba(230, 242, 248, 0.8);
}

.browser__nav {
  display: flex;
  gap: 2.2vw;
  font-size: clamp(4px, 0.42vw, 7px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.browser__body {
  display: grid;
  height: 76%;
  grid-template-columns: 48% 26% 26%;
  padding: 1.8% 2.1% 2%;
  animation: browser-content-drift 12s 3.2s ease-in-out infinite;
}

.browser__message {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 7% 7% 6% 9%;
  border-radius: 7px 0 0 7px;
  background:
    radial-gradient(circle at 78% 22%, rgba(92, 104, 116, 0.46), transparent 43%),
    linear-gradient(138deg, rgba(22, 28, 35, 0.98), rgba(8, 11, 15, 0.95));
  box-shadow:
    inset 0 0 46px rgba(164, 178, 190, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: browser-panel-in 1.1s 1.35s both;
}

.browser__eyebrow {
  margin: 0 0 7%;
  color: rgba(225, 231, 234, 0.54);
  font-size: clamp(4px, 0.37vw, 6px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.browser__message .browser__headline {
  margin: 0;
  color: rgba(247, 246, 242, 0.94);
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(16px, 1.87vw, 32px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: uppercase;
}

.browser__copy {
  max-width: 86%;
  margin: 8% 0 7%;
  color: rgba(222, 228, 231, 0.57);
  font-size: clamp(4px, 0.43vw, 7.5px);
  line-height: 1.65;
}

.browser__button {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(245, 248, 248, 0.34);
  border-radius: 999px;
  color: rgba(247, 249, 249, 0.8);
  font-size: clamp(4px, 0.36vw, 6px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.browser__portrait {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(216, 227, 233, 0.1), rgba(19, 25, 31, 0.54)),
    #64717d;
  animation: browser-panel-in 1.1s 1.5s both;
}

.browser__portrait-light {
  position: absolute;
  inset: -12% -35% 26% -70%;
  border-radius: 50%;
  background: rgba(224, 233, 239, 0.42);
  filter: blur(25px);
}

.browser__portrait-form {
  position: absolute;
  right: -18%;
  bottom: -16%;
  width: 112%;
  height: 112%;
  border-radius: 58% 42% 8% 17%;
  background:
    radial-gradient(circle at 62% 23%, rgba(205, 212, 216, 0.2) 0 8%, transparent 8.5%),
    linear-gradient(133deg, #697581, #0d1217 67%);
  box-shadow: -25px -7px 48px rgba(8, 13, 18, 0.34);
  transform: rotate(-7deg);
}

.browser__services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10% 11%;
  border-radius: 0 7px 7px 0;
  background:
    linear-gradient(146deg, rgba(250, 251, 250, 0.94), rgba(218, 226, 230, 0.86)),
    rgba(240, 243, 243, 0.9);
  color: #222a32;
  animation: browser-panel-in 1.1s 1.65s both;
}

.browser__services > p {
  margin: 0 0 14%;
  color: rgba(29, 38, 45, 0.46);
  font-size: clamp(4px, 0.42vw, 7px);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.browser__services ul {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 15px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(7px, 0.78vw, 13px);
}

.browser__services li {
  display: flex;
  align-items: baseline;
  gap: 12%;
  padding-bottom: 7%;
  border-bottom: 1px solid rgba(44, 53, 60, 0.15);
}

.browser__services li span {
  color: rgba(32, 41, 48, 0.4);
  font-family: var(--font-manrope), sans-serif;
  font-size: 0.52em;
}

.browser__footer {
  display: grid;
  height: 12%;
  grid-template-columns: 0.8fr 0.8fr 0.8fr 1.35fr;
  align-items: center;
  padding: 0 3.5%;
  color: rgba(246, 248, 248, 0.48);
  font-size: clamp(4px, 0.42vw, 7px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    rgba(18, 26, 34, 0.18),
    rgba(226, 235, 240, 0.05)
  );
}

.browser__signature {
  justify-self: end;
  color: rgba(248, 250, 250, 0.62);
  font-size: clamp(4px, 0.39vw, 6.5px);
  letter-spacing: 0.13em;
}

.hero__scroll {
  position: absolute;
  z-index: 7;
  bottom: 5.2%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(245, 247, 247, 0.62);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  animation: fade-up 1s 1.2s both;
}

.hero__scroll-line {
  position: relative;
  display: block;
  width: 38px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}

.hero__scroll > span:first-child {
  display: none;
}

.hero__scroll-line::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(-100%);
  animation: scroll-line 2.4s 1.6s ease-in-out infinite;
}

@media (max-aspect-ratio: 7 / 5) and (min-width: 761px) {
  .hero__title {
    top: 8.2%;
  }

  .hero__word {
    font-size: clamp(122px, 16.3vw, 238px);
  }

  .hero__power {
    font-size: clamp(42px, 5vw, 74px);
  }

  .hero__statement {
    top: 32.4%;
  }

  .hero__browser-wrap {
    top: 24.5%;
    right: -4%;
    width: 68vw;
  }
}

.hero {
  background:
    radial-gradient(circle at 82% 37%, rgba(226, 239, 248, 0.29), transparent 28%),
    radial-gradient(circle at 68% 78%, rgba(176, 185, 205, 0.11), transparent 31%),
    linear-gradient(108deg, #10151b 0%, #273039 52%, #e7ecef 100%);
}

.hero::after {
  position: absolute;
  z-index: 11;
  inset: 0;
  content: "";
  background: radial-gradient(
    circle 190px at var(--pointer-x) var(--pointer-y),
    rgba(220, 236, 246, .055),
    transparent 72%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position 600ms ease;
}

.hero__rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__rays {
  z-index: -1;
  inset: -18% -4% 0 46%;
  opacity: calc(.17 + var(--light-life) * .08);
  background:
    linear-gradient(107deg, transparent 16%, rgba(244, 250, 253, .26) 34%, rgba(232, 244, 250, .11) 43%, transparent 56%),
    linear-gradient(100deg, transparent 42%, rgba(208, 227, 239, .13) 49%, transparent 60%),
    linear-gradient(112deg, transparent 22%, rgba(236, 246, 251, .075) 28%, transparent 34%);
  filter: blur(32px);
  mix-blend-mode: screen;
  transform: translate(var(--ice-x), var(--ice-y));
  transition: opacity 2.8s ease, transform 1.4s cubic-bezier(.2,.75,.2,1);
}

.hero__content::before {
  opacity: .86;
  background:
    repeating-linear-gradient(96deg, transparent 0 13px, rgba(229, 237, 241, .027) 14px, transparent 15px 31px),
    repeating-linear-gradient(5deg, transparent 0 37px, rgba(238, 244, 246, .017) 38px, transparent 39px 76px),
    radial-gradient(ellipse at 55% 17%, rgba(231, 239, 243, .2), transparent 57%),
    linear-gradient(180deg, rgba(231, 238, 241, .05), rgba(30, 39, 47, .13));
  filter: blur(.25px) contrast(1.05);
}

.hero__content::after {
  box-shadow:
    0 -14px 40px rgba(204, 219, 230, .07),
    inset 0 2px 1px rgba(248, 251, 252, .08);
}

.hero__power {
  color: rgba(250, 251, 249, 1);
  font-size: clamp(40px, 4.72vw, 75px);
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 0 14px rgba(224,239,247,.22);
  filter: none;
}

.hero__statement {
  line-height: .9;
}

.hero__statement-label {
  margin-bottom: clamp(13px, 1.75vh, 19px);
}

.hero__browser-wrap {
  top: 21.5%;
  right: -5.6%;
  width: min(72.5vw, 1280px);
  perspective: 1850px;
  transform: translate(calc(var(--browser-x) + var(--camera-x)), var(--browser-y));
}

.browser__stage-reflection {
  position: absolute;
  z-index: -1;
  right: 4%;
  bottom: -24%;
  left: 12%;
  height: 35%;
  overflow: hidden;
  border-radius: 48%;
  background:
    linear-gradient(90deg, rgba(15,23,30,.2), rgba(203,219,229,.15) 54%, rgba(77,96,110,.09)),
    linear-gradient(180deg, rgba(217,231,239,.15), transparent 74%);
  filter: blur(11px);
  opacity: .54;
  transform: perspective(880px) rotateX(73deg) scaleY(-1);
  transform-origin: top;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 79%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 79%);
}

.browser__stage-reflection::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg,
      rgba(6,10,14,.38) 0 46%,
      rgba(111,128,140,.19) 46% 71%,
      rgba(232,239,241,.21) 71% 100%);
  filter: blur(5px);
  transform: scale(.94);
}

.hero__browser-wrap::after {
  right: 5%;
  bottom: -12%;
  left: 13%;
  height: 21%;
  background:
    radial-gradient(ellipse at center, rgba(3,7,11,.64), rgba(8,13,18,.32) 43%, transparent 72%);
  filter: blur(25px);
  opacity: .92;
}

.hero__browser-wrap::before {
  right: 3%;
  bottom: -25%;
  left: 9%;
  height: 31%;
  opacity: .68;
}

.browser__stand {
  position: absolute;
  z-index: -1;
  right: 34%;
  bottom: -5.8%;
  width: 25%;
  height: 13%;
  transform: perspective(900px) rotateX(68deg) rotateZ(-.6deg);
  transform-origin: center bottom;
}

.browser__stand::before {
  position: absolute;
  right: 39%;
  bottom: 18%;
  width: 22%;
  height: 105%;
  content: "";
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    linear-gradient(90deg,
      rgba(40,49,58,.74),
      rgba(150,166,177,.5) 33%,
      rgba(234,242,246,.52) 50%,
      rgba(139,155,166,.48) 67%,
      rgba(78,92,103,.46));
  border: 1px solid rgba(236,243,246,.26);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.4),
    inset -1px 0 rgba(120,140,155,.3),
    0 15px 20px rgba(5,9,13,.31);
  clip-path: polygon(25% 0, 75% 0, 92% 100%, 8% 100%);
}

.browser__stand::after {
  position: absolute;
  inset: auto 0 0;
  height: 25%;
  border: 1px solid rgba(236,243,246,.28);
  border-radius: 50%;
  content: "";
  background:
    linear-gradient(180deg, rgba(218,228,234,.42), rgba(70,82,92,.35)),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.035) 4px);
  box-shadow:
    0 17px 28px rgba(3,7,11,.5),
    inset 0 1px rgba(255,255,255,.38);
}

.hero__browser {
  border-color: rgba(228,236,241,.76);
  background:
    linear-gradient(138deg, rgba(159,177,190,.47), rgba(218,229,235,.14) 52%, rgba(75,91,105,.2)),
    rgba(27,38,48,.25);
  box-shadow:
    0 66px 128px rgba(4,9,15,.42),
    0 20px 48px rgba(11,18,25,.28),
    -11px 0 32px rgba(226,240,247,.13),
    inset 2px 0 0 rgba(251,254,255,.31),
    inset -3px 0 0 rgba(110,135,151,.16),
    inset 0 3px 0 rgba(255,255,255,.31),
    inset 0 -4px 0 rgba(91,112,128,.21),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.34);
  backdrop-filter: blur(24px) saturate(.92);
  transform: rotateY(-10.5deg) rotateX(2.7deg) rotateZ(-.75deg) translateZ(10px);
}

.hero__browser::after {
  opacity: calc(.55 + var(--light-life) * .24);
  background:
    linear-gradient(119deg, transparent 44%, rgba(255,255,255,.1) 47.6%, rgba(255,255,255,.03) 49.4%, transparent 51%),
    radial-gradient(ellipse at 19% 44%, rgba(255,255,255,.065) 0 1.1%, transparent 3.2%),
    radial-gradient(ellipse at 27% 47%, rgba(255,255,255,.04) 0 1.3%, transparent 3.6%),
    radial-gradient(ellipse at 79% 22%, rgba(239,247,250,.075), transparent 19%),
    linear-gradient(112deg, transparent 32%, rgba(255,255,255,.025) 43%, rgba(255,255,255,.075) 49%, transparent 57%),
    linear-gradient(72deg, transparent 63%, rgba(207,225,235,.05) 72%, transparent 83%);
  transition: opacity 3.2s ease;
}

.browser__glass-inner {
  position: absolute;
  z-index: 9;
  inset: 3px;
  overflow: hidden;
  border: 1px solid rgba(225,238,245,.18);
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(103,128,145,.12),
    inset 8px 0 18px rgba(240,248,252,.035),
    inset -9px 0 21px rgba(40,56,68,.08);
}

.browser__glass-inner::before,
.browser__glass-inner::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.browser__optics {
  position: absolute;
  z-index: 11;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: .9;
  pointer-events: none;
  mix-blend-mode: screen;
}

.browser__glass-inner::before {
  top: -35%;
  bottom: -35%;
  left: 55%;
  width: 13%;
  background: linear-gradient(90deg, transparent, rgba(249,253,255,.11), rgba(205,225,237,.04), transparent);
  filter: blur(8px);
  transform: skewX(-13deg) translate(var(--glass-x), var(--glass-y));
  transition: transform 1.1s cubic-bezier(.2,.75,.2,1);
}

.browser__glass-inner::after {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), transparent 2.2%, transparent 96%, rgba(196,215,226,.07)),
    linear-gradient(90deg, rgba(255,255,255,.07), transparent 1.8%, transparent 97%, rgba(107,132,149,.08));
}

.browser__edge--top {
  height: 1.5px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4),
    0 3px 0 rgba(185,207,220,.1),
    0 0 16px rgba(230,243,249,.28);
}

.browser__edge--left {
  width: 2px;
  box-shadow:
    4px 0 rgba(197,218,230,.1),
    0 0 12px rgba(233,245,250,.18);
}

.browser__reflection {
  width: 48%;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.075) 34%, rgba(255,255,255,.34) 49%, rgba(210,231,242,.08) 64%, transparent);
  filter: blur(9px);
  opacity: calc(.7 + var(--light-life) * .2);
}

.hero__cta {
  top: 70%;
  padding: 8px 10px 8px 0;
  transition: color 300ms ease, text-shadow 300ms ease;
}

.hero__cta::after {
  position: absolute;
  inset: -16px -20px -16px -24px;
  content: "";
  background: radial-gradient(circle at 20% 50%, rgba(221,237,246,.13), transparent 54%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

.hero__cta:hover {
  color: rgba(255,255,255,.98);
  text-shadow: 0 0 14px rgba(226,240,247,.48);
}

.hero__cta:hover::after {
  opacity: 1;
}

.hero__cta-track {
  overflow: visible;
  box-shadow: 0 0 0 rgba(223,238,246,0);
  transition: box-shadow 350ms ease;
}

.hero__cta:hover .hero__cta-track {
  box-shadow: 0 0 9px rgba(223,238,246,.28);
}

@media (max-aspect-ratio: 7 / 5) and (min-width: 761px) {
  .hero__browser-wrap {
    top: 22%;
    right: -6%;
    width: 72vw;
  }
}

@media (max-width: 760px) {
  .hero__browser-wrap {
    /* Tiefer als zuvor (40%), damit die Glasgrafik nicht mehr unter der
       Textspalte liegt — vorher ueberlagerten sich beide und keins war lesbar.
       Auf Wunsch 1 cm hoeher als die zuvor gesetzten 54 %. */
    top: calc(54% - 1cm);
    right: -34%;
    width: 126vw;
  }

  .hero__browser {
    animation: browser-breathe-mobile 7.5s 2.2s ease-in-out infinite;
    transform: rotateY(-9deg) rotateX(1.5deg) rotateZ(.4deg);
  }

  .browser__stand {
    bottom: -5%;
  }

  /* Die Wortmarke steht auf white-space:nowrap. Die bisherige Untergrenze von
     126px war breiter als ein Telefonbildschirm und lief rechts heraus. */
  .hero__word {
    font-size: clamp(58px, 18.5vw, 118px);
  }

  .hero__power {
    font-size: clamp(22px, 6.2vw, 29px);
  }

  /* Textspalte nutzt jetzt die Bildschirmbreite. Zuvor galt weiterhin die
     Desktop-Regel width:min(44vw,640px) — auf 412px nur 181px breit, wodurch
     die Ueberschrift auf neun Zeilen wuchs und in die Grafik lief. */
  .hero__statement {
    width: min(86vw, 480px);
    top: 25%;
    font-size: clamp(19px, 5.4vw, 27px);
  }

  /* Die festen Umbrueche sind fuer die breite Spalte am Desktop gesetzt.
     Mobil zerreissen sie die Zeilen — dort soll der Text frei fliessen. */
  .umbruch-desktop {
    display: none;
  }

  /* CTA klar UNTER den Monitor (top:auto muss die spätere top:70%-Regel schlagen) */
  .hero__cta {
    top: auto;
    bottom: 3%;
  }
}

/* ============================================================
   PREMIUM-VEREDELUNG — nur Materialität, Licht, Erdung.
   Keine neue Komposition, keine neuen Elemente.
   ============================================================ */

/* GPU-Stabilität für die dauer-animierten Ebenen */
.hero__browser,
.hero__browser-wrap,
.hero__title {
  will-change: transform;
}

/* Monitor erden: engerer, dunklerer Kontaktschatten unter dem Standfuß,
   damit er wirklich auf der Bühne steht statt nur zu schweben. */
.browser__stand::after {
  box-shadow:
    0 17px 28px rgba(3, 7, 11, .5),
    0 6px 11px rgba(2, 5, 8, .58),
    0 2px 4px rgba(1, 3, 6, .6),
    inset 0 1px rgba(255, 255, 255, .42);
}

/* Spiegelung des Monitors auf der Bühne einen Hauch präsenter/klarer */
.browser__stage-reflection {
  opacity: .61;
  filter: blur(9px);
}

/* Hinweis: God-Rays-Qualität liegt jetzt direkt in .hero__rays (Licht-Schritt). */

/* CTA: ein Lichtreflex läuft beim Hover einmal weich durch die Linie
   („Licht läuft durch"), zusätzlich zum wandernden Punkt. */
.hero__cta-track::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(238, 247, 251, .92), transparent);
  filter: blur(2px);
  opacity: 0;
  transform: translate(-42px, -50%);
  pointer-events: none;
}

.hero__cta:hover .hero__cta-track::after {
  animation: cta-light-through 920ms cubic-bezier(.36, .1, .2, 1) forwards;
}

/* ============================================================
   BREITBILD (Laptop/Desktop 16:9 und breiter)
   Auf breiten Schirmen wächst der Monitor über vw zu groß und
   sinkt aufs Podest. Hier deckeln + höher setzen, damit er
   wieder frei ÜBER dem Podest schwebt — wie im kompakten Format.
   ============================================================ */
@media (min-aspect-ratio: 7 / 5) and (min-width: 1100px) {
  .hero__browser-wrap {
    width: min(50vw, 920px);
    top: 22.5%;
    right: 6%;
  }

  /* Titel deckeln, damit „MORGEN" nicht mit dem Monitor kollidiert
     und Titel + Monitor als ein ruhiges Bild wirken. */
  .hero__word {
    font-size: clamp(132px, 11.4vw, 190px);
  }

  .hero__power {
    font-size: clamp(39px, 3vw, 50px);
  }

  .hero__statement {
    font-size: clamp(24px, 1.8vw, 32px);
    width: min(38vw, 560px);
    top: 30%;
  }

  /* Monitor-Headline mitskalieren, damit sie im jetzt schmaleren
     Display wieder als saubere 3 Zeilen sitzt statt zu brechen. */
  .browser__message .browser__headline {
    font-size: clamp(15px, 1.4vw, 22px);
  }
}

/* ============================================================
   ATELIER — 2. Sektion. Das bereitgestellte Bild ist der
   komplette, UNVERÄNDERTE Hintergrund: keine Overlays, keine
   Verläufe, keine zusätzlichen Flächen. Links Typografie,
   viel Weißraum, ruhig und zeitlos.
   ============================================================ */
.atelier {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: #eceeef;
  color: var(--graphite);
}

.atelier__bg {
  position: absolute;
  z-index: -1;
  inset: -8% 0;
  background: url("/assets/Bild2.jpg") left center / cover no-repeat;
  background-image: image-set(url("/assets/Bild2.webp") type("image/webp"), url("/assets/Bild2.jpg") type("image/jpeg"));
  transform: translate3d(0, var(--atelier-shift, 0px), 0);
  will-change: transform;
}

.atelier__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 0 clamp(24px, 6vw, 74px);
}

.atelier__content {
  max-width: min(46vw, 640px);
}

.atelier__eyebrow {
  display: block;
  margin-bottom: clamp(22px, 3.4vh, 38px);
  color: rgba(226, 236, 242, 0.52);
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Ganze Headline in Cormorant Garamond — sehr groß, sehr elegant. */
.atelier__headline {
  margin: 0 0 clamp(30px, 4vh, 52px);
  font-family: var(--font-cormorant), Georgia, serif;
  font-weight: 500;
  text-transform: uppercase;
}

.atelier__lead {
  display: block;
  margin-bottom: clamp(4px, 0.6vw, 10px);
  color: rgba(224, 233, 240, 0.5);
  font-size: clamp(27px, 3vw, 52px);
  letter-spacing: 0.005em;
  line-height: 1;
}

.atelier__accent {
  display: block;
  color: rgba(248, 250, 250, 0.97);
  font-size: clamp(46px, 5.4vw, 96px);
  letter-spacing: -0.015em;
  line-height: 0.9;
}

.atelier__text {
  max-width: 430px;
  margin: 0 0 clamp(34px, 4.4vh, 52px);
  color: rgba(224, 232, 238, 0.74);
  font-size: clamp(15px, 1.02vw, 18px);
  line-height: 1.7;
}

/* Minimalistischer Link mit kleinem Kreis-Icon. */
.atelier__link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: rgba(244, 247, 247, 0.92);
  font-size: clamp(10px, 0.66vw, 12px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.atelier__link-icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(226, 236, 242, 0.42);
  border-radius: 50%;
  transition: background 360ms ease, border-color 360ms ease;
}

.atelier__link-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  content: "";
  border-top: 1px solid rgba(244, 247, 247, 0.9);
  border-right: 1px solid rgba(244, 247, 247, 0.9);
  transform: translate(-58%, -50%) rotate(45deg);
  transition: border-color 360ms ease;
}

.atelier__link-label {
  position: relative;
}

.atelier__link-label::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 400ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.atelier__link:hover .atelier__link-icon {
  border-color: #f4f6f6;
  background: #f4f6f6;
}

.atelier__link:hover .atelier__link-icon::after {
  border-color: #171b20;
}

.atelier__link:hover .atelier__link-label::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Einschwingen — opacity 0→1, translateY 40px→0, ~1s. Nur mit JS aktiv. */
.atelier.js-anim .atelier__eyebrow,
.atelier.js-anim .atelier__headline,
.atelier.js-anim .atelier__text,
.atelier.js-anim .atelier__link {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s cubic-bezier(0.16, 0.72, 0.22, 1),
    transform 1s cubic-bezier(0.16, 0.72, 0.22, 1);
}

.atelier.js-anim.is-visible .atelier__eyebrow  { opacity: 1; transform: none; transition-delay: 0.05s; }
.atelier.js-anim.is-visible .atelier__headline { opacity: 1; transform: none; transition-delay: 0.18s; }
.atelier.js-anim.is-visible .atelier__text     { opacity: 1; transform: none; transition-delay: 0.42s; }
.atelier.js-anim.is-visible .atelier__link     { opacity: 1; transform: none; transition-delay: 0.6s; }

@media (max-width: 760px) {
  .atelier__content { max-width: 100%; }
  .atelier__inner {
    align-items: center;
    padding-top: 8vh;
    padding-bottom: 8vh;
  }
  .atelier__text { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier__bg { transform: none !important; }
}

/* ============================================================
   WAS ICH GESTALTE — digitale Ausstellung mit drei Exponaten.
   Materialwelt: satiniertes Glas, Titan, helles Aluminium,
   warmes Weiß, dezentes Grau, minimale blaugraue Lichtreflexe.
   Keine Karten-Hintergründe, keine klassischen Box-Shadows.
   ============================================================ */
.works {
  --w-ink: #1b2129;
  --w-mute: rgba(31, 39, 47, 0.6);
  --w-faint: rgba(31, 39, 47, 0.4);
  --w-glass: rgba(255, 255, 255, 0.55);
  --w-edge: rgba(255, 255, 255, 0.9);
  --w-titan: rgba(150, 167, 182, 0.5);
  --w-blue: rgba(150, 172, 194, 0.4);
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 13vh, 190px) clamp(24px, 6vw, 96px) clamp(120px, 17vh, 220px);
  /* Gesamter Bereich „Was ich gestalte" ~5 cm tiefer gesetzt (Kundenwunsch) */
  padding-top: calc(clamp(96px, 13vh, 190px) + 5cm);
  color: var(--w-ink);
  background:
    radial-gradient(88% 68% at 84% 2%, rgba(228, 238, 246, 0.62), transparent 52%),
    radial-gradient(130% 95% at 10% 104%, rgba(190, 201, 210, 0.4), transparent 60%),
    linear-gradient(168deg, #dbe1e5 0%, #e6ebed 44%, #d9e0e3 100%);
}

/* Weicher Übergang aus dem hellen Atelier — keine harte Trennlinie. */
.works::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 34vh;
  content: "";
  background: linear-gradient(180deg, #eceeef 0%, transparent 100%);
  pointer-events: none;
}

.works__intro {
  max-width: 560px;
  margin: 0;
  color: var(--w-mute);
  font-size: clamp(18px, 1.55vw, 27px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Gemeinsame Glas-Fläche der Exponate. */
.glass {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.48), rgba(228, 235, 240, 0.16) 55%, rgba(196, 208, 218, 0.2)),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(150, 167, 182, 0.22),
    0 54px 86px -50px rgba(40, 56, 72, 0.32);
}

.glass::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 42%, rgba(255, 255, 255, 0.42) 49%, transparent 57%);
  opacity: 0.5;
  pointer-events: none;
}

/* --- Eintritts-Animation --- */
.works.js-anim .works__label,
.works.js-anim .works__intro,
.works.js-anim .work {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 0.72, 0.22, 1),
    transform 1.1s cubic-bezier(0.16, 0.72, 0.22, 1);
}
.works.js-anim.is-in .works__label  { opacity: 1; transform: none; transition-delay: 0.05s; }
.works.js-anim.is-in .works__intro  { opacity: 1; transform: none; transition-delay: 0.16s; }
.works.js-anim.is-in .work          { opacity: 1; transform: none; }
.works.js-anim.is-in .work:nth-child(1) { transition-delay: 0.34s; }
.works.js-anim.is-in .work:nth-child(2) { transition-delay: 0.5s; }
.works.js-anim.is-in .work:nth-child(3) { transition-delay: 0.66s; }

/* Textlink mit Kreis-Pfeil */
.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.arrowlink__icon {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.55;
  transition: opacity 320ms ease, transform 320ms ease;
}
.arrowlink__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(-58%, -50%) rotate(45deg);
}
.arrowlink:hover .arrowlink__icon { opacity: 1; transform: translateX(3px); }

/* ============================================================
   AUSGEWÄHLTE PROJEKTE — dunkler Graphit-Raum, schwebende Exponate.
   ============================================================ */
.selected {
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 14vh, 200px) clamp(24px, 6vw, 96px);
  color: var(--pearl);
  background:
    radial-gradient(90% 60% at 82% 8%, rgba(58, 74, 92, 0.4), transparent 55%),
    linear-gradient(180deg, #11151b 0%, #171d24 60%, #10141a 100%);
}
.selected__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2.4vh, 28px);
  max-width: 1380px;
  margin: 0 auto;
}
.selected__headline {
  margin: 0;
  color: rgba(248, 250, 250, 0.96);
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.94;
}
.selected__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
  max-width: 1380px;
  margin: 0 auto;
}
.selected__layout .selected__list { margin-top: 0; }
/* main.css stapelt diese Spalten unter 1024px, aber home.css wird danach
   geladen und schlägt die Regel dort. Deshalb steht sie hier noch einmal. */
@media (max-width: 1024px) {
  .selected__layout { grid-template-columns: 1fr; gap: clamp(40px, 6vh, 64px); }
}
.selected__text {
  max-width: 40ch;
  margin: 0 0 clamp(28px, 4vh, 40px);
  color: rgba(226, 233, 238, 0.62);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.66;
}
.selected__list {
  margin-top: clamp(32px, 5vh, 56px);
  border-top: 1px solid rgba(226, 236, 242, 0.12);
}
.proj {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(16px, 2.2vh, 22px) 0;
  border-bottom: 1px solid rgba(226, 236, 242, 0.12);
  color: rgba(240, 244, 246, 0.9);
  transition: padding-left 360ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.proj:hover { padding-left: 14px; }
.proj__name { font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(21px, 1.9vw, 29px); font-weight: 500; }
.proj__tag { color: rgba(210, 222, 230, 0.42); font-size: clamp(9px, 0.6vw, 11px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.coord { color: rgba(198, 212, 222, 0.4); font-size: clamp(8px, 0.55vw, 10px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.selected .coord { color: rgba(198, 212, 222, 0.4); }
.person__cta { margin-top: clamp(20px, 3vh, 34px); }

/* Porträt-Platzhalter als Architektur-Rahmen (kein KI-Portrait) */
.person__figure { margin: 0; }
/* Rahmenlose Bildflaeche (loest den fruehreren Bogenrahmen ab) */
.person__bild {
  position: relative;
  max-width: 460px;
  margin-left: auto;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 40px 70px -44px rgba(40, 56, 72, 0.55);
}
.person__photo {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  /* „Was ich gestalte" mobil ~2,5 cm höher — am Desktop bleibt der größere Abstand (+5cm) */
  .works { padding-top: calc(clamp(96px, 13vh, 190px) + 2.5cm); }
}

/* ============================================================
   RAUM-KONTINUITÄT — eine durchgehende Atmosphäre über allen
   Sektionen: dieselbe Lichtquelle rechts oben, wiederkehrende
   Kreisöffnung, feiner Nebel, Körnung. Ändert beim Scrollen nur
   Intensität + driftet minimal (Kamera). Additiv, entfernbar.
   ============================================================ */
.world {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  overflow: hidden;
}
.world > span { position: absolute; display: block; }

.world__light {
  inset: -25% -12% auto auto;
  width: 65vw;
  height: 82vh;
  background: radial-gradient(circle at 72% 24%, rgba(206, 226, 244, 0.11), transparent 58%);
  mix-blend-mode: screen;
  opacity: var(--world-light, 0.5);
  transition: opacity 1.5s ease;
}

/* Monumentale gebogene Titanwand — Wiedererkennung über Material, nicht Form.
   Ein Lichtstreif wandert beim Scrollen über die Krümmung (Kamerafahrt). */
.world__wall {
  inset: 0;
  background:
    radial-gradient(160% 130% at 90% 12%, rgba(216, 232, 246, 0.08), transparent 54%),
    radial-gradient(130% 90% at 4% 98%, rgba(150, 170, 190, 0.055), transparent 58%),
    radial-gradient(58% 150% at var(--wall-sheen, 58%) 42%, rgba(228, 241, 250, 0.06), transparent 46%),
    radial-gradient(120% 60% at 50% 52%, transparent 60%, rgba(120, 138, 158, 0.045));
  mix-blend-mode: screen;
  opacity: var(--world-wall, 0.5);
  transform: translateY(calc(var(--world-cam, 0px) * 0.5));
  transition: opacity 1.5s ease, transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.world__fog {
  inset: 0;
  background: linear-gradient(180deg, transparent 18%, rgba(150, 168, 188, 0.03) 54%, transparent 86%);
  mix-blend-mode: screen;
}

.world__grain {
  inset: 0;
  opacity: 0.028;
  mix-blend-mode: soft-light;
  background-image: url("/assets/grain-2.svg");
}

@media (prefers-reduced-motion: reduce) {
  .world__wall, .world__glass { transform: none; transition: opacity 1.5s ease; }
}

/* ============================================================
   WEICHE ÜBERGÄNGE — die harten Section-Kanten verschmelzen.
   Die Blende sitzt in der oberen Polster-Zone (kein Text dort),
   und blendet vom Ton der vorherigen Sektion in die eigene.
   ============================================================ */
.works::before {
  height: 18vh;
  background: linear-gradient(180deg, rgba(17, 21, 27, 0.97) 0%, rgba(17, 21, 27, 0.62) 26%, rgba(17, 21, 27, 0.22) 58%, transparent 100%);
}
.selected::before { background: linear-gradient(180deg, rgba(217, 224, 227, 0.95) 0%, rgba(217, 224, 227, 0.6) 26%, rgba(217, 224, 227, 0.22) 58%, transparent 100%); }

/* ============================================================
   LEISTUNGEN NEU — kuratierte Ausstellung: drei Kapitel als
   Exponate im selben Titan-Raum. Keine Karten, keine Boxen,
   keine Icons, keine Diagramme. Riesige Nummern als Architektur.
   ============================================================ */
.works { overflow: hidden; }

.works__intro {
  max-width: 1380px;
  margin: 0 auto clamp(40px, 7vh, 110px);
}
.works__lead {
  max-width: 640px;
  margin: clamp(20px, 3vh, 34px) 0 0;
  color: rgba(31, 39, 47, 0.62);
  font-size: clamp(19px, 1.6vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.chapter {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: center;
  gap: clamp(40px, 6.5vw, 130px);
  max-width: 1380px;
  min-height: 92vh;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 120px) 0;
  perspective: 1500px;
}
.chapter--b { grid-template-columns: 1fr 1.02fr; }
.chapter--c { grid-template-columns: 1fr; justify-items: center; text-align: center; }

/* Riesige Nummer — fast Teil der Architektur */
.chapter__num {
  position: absolute;
  z-index: 0;
  top: 50%;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(240px, 37vw, 620px);
  font-weight: 500;
  line-height: 0.7;
  color: rgba(31, 39, 47, 0.045);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}
.chapter--a .chapter__num { left: -1.5%; }
.chapter--b .chapter__num { right: -1.5%; }
.chapter--c .chapter__num { left: 50%; transform: translate(-50%, -50%); }

.chapter__text { position: relative; z-index: 2; }
.chapter--c .chapter__text { max-width: 640px; }
.chapter__title {
  margin: 0 0 clamp(20px, 3vh, 34px);
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(52px, 7.6vw, 138px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #171d24;
}
.chapter__desc {
  max-width: 40ch;
  margin: 0 0 clamp(26px, 3.4vh, 42px);
  color: rgba(31, 39, 47, 0.66);
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.62;
}
.chapter--c .chapter__desc { margin-inline: auto; }
.chapter__text .arrowlink { color: #1b2129; }

.chapter__exhibit {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 0.8;
  transform-style: preserve-3d;
  animation: ex-float 11s ease-in-out infinite;
}
.chapter--b .chapter__exhibit { animation-duration: 12.5s; animation-delay: -4s; }
.chapter--c .chapter__exhibit { width: min(80%, 760px); aspect-ratio: 1 / 0.58; animation-duration: 10s; animation-delay: -2s; }
.chapter__exhibit::after {
  position: absolute;
  right: 14%; bottom: -7%; left: 14%;
  height: 13%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(110, 130, 150, 0.28), transparent 70%);
  filter: blur(14px);
}

/* 01 · Glasmonitor */
.gmon { inset: 5% 3%; overflow: hidden; border-radius: 18px; transform: rotateY(-9deg) rotateX(2deg); }
.gmon__bar { position: absolute; top: 0; right: 0; left: 0; display: flex; gap: 5px; align-items: center; height: 13%; padding: 0 7%; border-bottom: 1px solid rgba(150, 167, 182, 0.28); }
.gmon__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(120, 138, 156, 0.5); }
.gmon__screen { position: absolute; inset: 13% 0 0; padding: 8% 8% 0; }
.gmon__eyebrow { display: block; margin-bottom: 7%; font-size: clamp(7px, 0.6vw, 10px); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(70, 88, 104, 0.5); }
.gmon__h { margin: 0; font-family: var(--font-cormorant), serif; font-size: clamp(24px, 3.2vw, 52px); line-height: 0.92; text-transform: uppercase; color: rgba(40, 52, 64, 0.72); }
.gmon__line { display: block; width: 66%; height: 6px; margin-top: 7%; border-radius: 3px; background: rgba(88, 104, 120, 0.22); }
.gmon__line--sm { width: 40%; margin-top: 3.5%; }
.gmon__chip { position: absolute; right: 4%; bottom: 20%; width: 30%; height: 22%; border-radius: 12px; transform: translateZ(60px); }

/* 02 · Glasflächen + Licht */
.panels { position: absolute; inset: 0; transform-style: preserve-3d; }
.panels .glass { position: absolute; border-radius: 12px; }
.panel--1 { top: 0; left: 0; width: 63%; height: 57%; transform: translateZ(42px) rotateY(9deg); }
.panel--2 { top: 21%; right: 0; width: 59%; height: 55%; opacity: 0.96; transform: translateZ(-4px) rotateY(-7deg); }
.panel--3 { top: 41%; left: 13%; width: 57%; height: 51%; opacity: 0.9; transform: translateZ(-26px); }
.panels__beam { position: absolute; top: -16%; bottom: -16%; left: 36%; width: 28%; background: linear-gradient(90deg, transparent, rgba(226, 240, 250, 0.68), transparent); filter: blur(22px); mix-blend-mode: screen; transform: rotate(14deg); }

/* 03 · Website-Screens (editorial) */
.screens { position: absolute; inset: 0; transform-style: preserve-3d; }
.screens .glass { position: absolute; overflow: hidden; border-radius: 12px; padding: 7% 7% 0; }
.screen--1 { z-index: 2; top: 8%; left: 8%; width: 58%; height: 80%; transform: translateZ(40px) rotateY(6deg); }
.screen--2 { z-index: 1; top: 20%; right: 5%; width: 50%; height: 66%; opacity: 0.92; transform: rotateY(-6deg); }
.screen__h { margin: 0; font-family: var(--font-cormorant), serif; font-size: clamp(20px, 2.6vw, 42px); line-height: 0.9; text-transform: uppercase; color: rgba(40, 52, 64, 0.74); }
.screen__l { display: block; width: 60%; height: 5px; margin-top: 9%; border-radius: 3px; background: rgba(88, 104, 120, 0.2); }
.screen__l--sm { width: 38%; margin-top: 5%; }

@media (max-width: 900px) {
  /* Mobile-Dramaturgie: eine ruhige Spalte je Kapitel — Nummer als fahle Marke,
     Titel groß, Exponat als schwebendes Objekt mittig darunter. Kein Stapel-Gefühl. */
  .chapter, .chapter--b, .chapter--c {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
    gap: clamp(30px, 6vh, 56px);
    min-height: auto;
    padding: clamp(60px, 12vh, 108px) 0;
  }
  /* Titel/Text bei allen drei Kapiteln zuerst, Exponat darunter */
  .chapter--b .chapter__text, .chapter--c .chapter__text { order: -1; }
  .chapter__text { max-width: 100%; }
  .chapter--c .chapter__text { max-width: 100%; }
  .chapter__desc { max-width: 100%; }
  .chapter__title { margin-top: clamp(30px, 11vw, 58px); }
  /* Nummer: fahle Kapitel-Marke oben-links, hinter dem Titel */
  .chapter__num,
  .chapter--c .chapter__num {
    font-size: clamp(96px, 30vw, 176px);
    top: clamp(18px, 5vh, 40px);
    left: -2%;
    right: auto;
    bottom: auto;
    transform: none;
    color: rgba(31, 39, 47, 0.055);
  }
  /* Exponat mittig, ruhig schwebend */
  .chapter__exhibit {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    justify-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter__exhibit { animation: none; }
}
.faq__list { border-top: 1px solid rgba(31, 39, 47, 0.13); }
.faq__item { border-bottom: 1px solid rgba(31, 39, 47, 0.13); }
.faq__q { margin: 0; }
.wordmark-sep {
  display: inline-block;
  width: 1px;
  height: 0.62em;
  background: currentColor;
  opacity: 0.42;
  vertical-align: middle;
}
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  width: 100%;
  padding: clamp(24px, 3.2vh, 38px) 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.faq__q-text {
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #1b2129;
  transition: color 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.faq__trigger:hover .faq__q-text,
.faq__trigger[aria-expanded="true"] .faq__q-text { color: #4a535d; }
.faq__icon { position: relative; flex: 0 0 auto; width: 15px; height: 15px; }
.faq__icon::before,
.faq__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: rgba(31, 39, 47, 0.5);
  transition: transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1), opacity 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.faq__icon::before { width: 15px; height: 1px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 1px; height: 15px; transform: translate(-50%, -50%); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq__answer {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 480ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.faq__answer-inner {
  overflow: hidden;
  opacity: 1;
  transition: opacity 380ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
html.js .faq__answer { grid-template-rows: 0fr; }
html.js .faq__answer-inner { opacity: 0; }
html.js .faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
html.js .faq__item.is-open .faq__answer-inner { opacity: 1; }
.faq__answer-inner p {
  max-width: 62ch;
  margin: 0 0 clamp(18px, 2.4vh, 28px);
  color: rgba(31, 39, 47, 0.66);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.7;
}
.faq__answer-inner p:first-child { padding-top: clamp(2px, 1vh, 8px); }
/* ============================================================
   SELECTED WORK — Projektband.
   Ein gebogenes WebGL-Band mit den Projekten, Scroll bewegt es,
   Klick öffnet das Projektpanel. Logik in scripts/projektband.js.
   Alle Klassen mit Präfix pb. Ohne WebGL, ohne JS und bei
   prefers-reduced-motion steht ein ruhiges Raster mit denselben
   Inhalten da (.pb-flat bzw. Grundzustand).
   ============================================================ */
.pb, .pb-case, .pb-fly {
  --pb-graphite: #151a20;
  --pb-graphite-soft: #242b33;
  --pb-pearl: #f3f4f2;
  --pb-ice: #dfeaf2;
  --pb-muted: rgba(210, 222, 230, .56);
  --pb-faint: rgba(210, 222, 230, .38);
  --pb-line: rgba(223, 234, 242, .14);
  --pb-ink: #151a20;
  --pb-ink-muted: rgba(21, 26, 32, .62);
  --pb-ink-line: rgba(21, 26, 32, .12);
  --pb-serif: var(--font-cormorant), Georgia, "Times New Roman", serif;
  --pb-sans: var(--font-manrope), Arial, Helvetica, sans-serif;
  --pb-expo: cubic-bezier(.19, 1, .22, 1);
  --pb-gutter: clamp(16px, 2.55vw, 50px);
}
.pb, .pb *, .pb-case, .pb-case * { box-sizing: border-box; }
.pb { margin-inline: calc(clamp(24px, 6vw, 96px) * -1); margin-block: clamp(34px, 6vh, 84px) clamp(48px, 8vh, 104px); }
html.pb-case-open { overflow: hidden; }
.pb :focus-visible, .pb-case :focus-visible { outline: 1px solid var(--pb-ice); outline-offset: 4px; }
.pb-case__close:focus-visible { border-radius: 50%; }
.pb-card:focus-visible { border-radius: 20px; }
.pb-label { font: 600 11px/1.2 var(--pb-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pb-muted); }
.pb-case a { color: inherit; }
.pb a { color: inherit; }

/* ---------- Bühne ---------- */
.pb{position:relative}
.pb__track{position:relative}
.pb__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.pb__ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 38% 46%,rgba(203,198,223,.10),transparent 70%),
    radial-gradient(50% 45% at 70% 60%,rgba(223,234,242,.07),transparent 72%)}
.pb__gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.pb__row{position:absolute;left:0;top:50%;display:flex;gap:12px;align-items:center;will-change:transform}
.pb-card{position:relative;flex:none;height:var(--card-h,46svh);aspect-ratio:1600/911;padding:0;border:0;border-radius:20px;background:var(--pb-graphite-soft);color:inherit;cursor:pointer;text-align:left;font:inherit;overflow:hidden;display:block;text-decoration:none}
.pb-card img{width:100%;height:100%;object-fit:cover;display:block}
.pb-card__meta{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;display:grid;gap:6px;background:linear-gradient(180deg,transparent,rgba(12,16,21,.78))}
.pb-card__cat{font:600 10px/1.2 var(--pb-sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(223,234,242,.72)}
.pb-card__name{font:500 clamp(24px,2.2vw,34px)/1 var(--pb-serif)}
.pb-card--open{display:grid;place-content:center;gap:12px;background:linear-gradient(140deg,#242b33,#171c22);border:1px solid var(--pb-line)}
.pb-card--open .pb-card__name{font-size:clamp(34px,4vw,60px);text-transform:uppercase}
.pb.pb-gl .pb-card img,.pb.pb-gl .pb-card__meta,.pb.pb-gl .pb-card--open>*{opacity:0}
.pb.pb-gl .pb-card{background:transparent;border-color:transparent}
.pb.pb-gl .pb-card:focus-visible{outline:1px solid rgba(223,234,242,.5);outline-offset:8px;border-radius:22px}

/* Rahmen-Beschriftung wie bei der Referenz in den vier Ecken */
.pb__chrome{position:absolute;inset:0;pointer-events:none;padding:96px var(--pb-gutter) 32px;display:grid;grid-template:auto 1fr auto/1fr auto}
.pb__chrome a,.pb__chrome button{pointer-events:auto}
.pb__count{justify-self:end;font:500 13px/1 var(--pb-sans);letter-spacing:.12em;color:var(--pb-faint);font-variant-numeric:tabular-nums}
.pb__count b{color:var(--pb-pearl);font-weight:600}
.pb-now{grid-column:1;grid-row:3;align-self:end;display:grid;gap:10px;min-width:0}
.pb-now__mask{position:relative;overflow:hidden;display:grid}
.pb-now__mask>span{grid-area:1/1;transition:transform 1s var(--pb-expo),opacity .6s ease;white-space:nowrap}
.pb-now__mask>span.is-out{transform:translateY(-105%);opacity:0}
.pb-now__mask>span.is-wait{transform:translateY(105%);opacity:0;transition:none}
.pb-now__name{font:500 clamp(30px,3.2vw,52px)/1.02 var(--pb-serif)}
.pb-now__line{font:400 14px/1.5 var(--pb-sans);color:var(--pb-muted)}
.pb-ask{grid-column:2;grid-row:3;align-self:end;margin-right:max(0px,calc(112px - var(--pb-gutter)));display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:600 11px/1 var(--pb-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pb-pearl)}
.pb-ask__icon{width:30px;height:30px;border:1px solid rgba(243,244,242,.42);border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--pb-expo),background .3s}
.pb-ask:hover .pb-ask__icon{transform:rotate(45deg);background:rgba(243,244,242,.08)}
.pb__chrome>*{transition:opacity .6s ease}
html.pb-case-open .pb__chrome>*{opacity:0}

/* Einblenden: Chrome erscheint, wenn die Bühne erreicht ist */
.pb.pb-gl .pb__chrome>*{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform 1.1s var(--pb-expo)}
.pb.pb-gl.is-in .pb__chrome>*{opacity:1;transform:none}
.pb.pb-gl.is-in .pb__chrome>*:nth-child(2){transition-delay:.08s}
.pb.pb-gl.is-in .pb__chrome>*:nth-child(3){transition-delay:.16s}
.pb.pb-gl.is-in .pb__chrome>*:nth-child(4){transition-delay:.24s}

/* ---------- Projektpanel ---------- */
.pb-case{position:fixed;inset:0;z-index:70}
.pb-case__veil{position:absolute;inset:0;background:rgba(10,13,17,.0);transition:background .8s ease}
.pb-case.is-open .pb-case__veil{background:rgba(10,13,17,.55)}
.pb-case__sheet{position:absolute;inset:16px;border-radius:20px;background:var(--pb-pearl);color:var(--pb-ink);overflow:auto;overscroll-behavior:contain;will-change:clip-path}
.pb-case__close{position:sticky;top:24px;float:right;margin:24px 24px 0 0;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--pb-ink);color:var(--pb-pearl);cursor:pointer;display:grid;place-items:center;transition:transform .5s var(--pb-expo)}
.pb-case__close:hover{transform:rotate(90deg)}
.pb-case__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,96px);padding:clamp(28px,4vw,64px)}
.pb-case__text{position:sticky;top:clamp(28px,4vw,64px);align-self:start;display:grid;gap:22px;min-width:0}
.pb-case__kicker{font:600 11px/1.2 var(--pb-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pb-ink-muted)}
.pb-case__name{margin:0;font:500 clamp(40px,4.3vw,80px)/.95 var(--pb-serif);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.pb-case__lead{margin:0;font:500 clamp(20px,1.6vw,26px)/1.3 var(--pb-serif)}
.pb-case__body{margin:0;font-size:15px;line-height:1.7;color:var(--pb-ink-muted);max-width:44ch}
.pb-pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.pb-pills li{padding:8px 14px;border-radius:99px;background:rgba(21,26,32,.06);font:500 12px/1.2 var(--pb-sans)}
.pb-pills li span{color:var(--pb-ink-muted);margin-right:6px}
.pb-visit{display:inline-flex;align-items:center;gap:12px;justify-self:start;text-decoration:none;font:600 11px/1 var(--pb-sans);letter-spacing:.16em;text-transform:uppercase}
.pb-visit i{width:34px;height:34px;border-radius:50%;background:var(--pb-ink);color:var(--pb-pearl);display:grid;place-items:center;font-style:normal;transition:transform .5s var(--pb-expo)}
.pb-visit:hover i{transform:rotate(45deg)}
.pb-case__media{display:grid;gap:clamp(40px,7vh,88px);min-width:0;padding-top:clamp(0px,4vh,40px)}
.pb-case__media figure{margin:0;display:grid;gap:12px}
.pb-case__media img{width:100%;height:auto;display:block;background:#e3e6e8}
.pb-case__media figcaption{font:600 10px/1.2 var(--pb-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pb-ink-muted)}
.pb-case__next{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:clamp(24px,6vh,72px);padding:28px 0 8px;border-top:1px solid var(--pb-ink-line);background:none;border-left:0;border-right:0;border-bottom:0;color:inherit;cursor:pointer;text-align:left}
.pb-case__next b{font:500 clamp(30px,3.4vw,56px)/1 var(--pb-serif);transition:transform .6s var(--pb-expo)}
.pb-case__next:hover b{transform:translateX(12px)}
.pb-fly{position:fixed;z-index:80;pointer-events:none;transform-origin:0 0;will-change:transform;overflow:hidden;display:block}
.pb-fly img{width:100%;height:100%;object-fit:cover;display:block}

/* Text im Panel: Zeilen steigen aus einer Maske (expo.out, 75 ms Versatz) */
.pb-rv{display:block;overflow:hidden}
.pb-rv>p,.pb-rv>h2,.pb-rv>span{display:block}
.pb-rv>*{transform:translateY(105%);opacity:0;transition:transform 1.1s var(--pb-expo),opacity .5s ease}
.pb-case.is-in .pb-rv>*{transform:none;opacity:1}
.pb-case.is-in .pb-rv:nth-of-type(2)>*{transition-delay:.075s}
.pb-case.is-in .pb-rv:nth-of-type(3)>*{transition-delay:.15s}
.pb-case.is-in .pb-rv:nth-of-type(4)>*{transition-delay:.225s}
.pb-case.is-in .pb-rv:nth-of-type(5)>*{transition-delay:.3s}
.pb-case.is-in .pb-rv:nth-of-type(6)>*{transition-delay:.375s}
.pb-case__media figure{opacity:0;transition:opacity .9s ease}
.pb-case.is-in .pb-case__media figure{opacity:1}
.pb-case.is-in .pb-case__media figure:first-child{transition:none}
.pb-case.is-flying .pb-case__media figure:first-child img{visibility:hidden}

/* ---------- Mobil: senkrechte Spalte, natives Scrollen ---------- */
@media (max-width:1000px){
  .pb-case__grid{grid-template-columns:1fr}
  .pb-case__text{position:static}
}
@media (max-width:760px){
  .pb__stage{position:relative;height:auto;overflow:visible}
  .pb__glwrap{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;pointer-events:none;z-index:0}
  .pb__gl{position:absolute}
  .pb__row{position:relative;top:auto;flex-direction:column;gap:16px;padding:8px 16px 40px;transform:none!important;z-index:1}
  .pb-card{width:100%;height:auto;border-radius:15px}
  .pb__chrome{position:relative;padding:0 16px 20px;grid-template:auto/1fr auto}
  .pb-now{display:none}
  .pb-ask{grid-row:1;grid-column:1/-1;margin-top:8px;order:3}
  .pb__chrome .pb-ask{display:none}
  .pb-case__sheet{inset:8px;border-radius:15px}
  .pb-case__grid{grid-template-columns:1fr;padding:22px 18px 28px}
  .pb-case__text{position:static}
  .pb-case__close{top:12px;margin:12px 12px 0 0;width:40px;height:40px}
}
@media (min-width:761px){.pb__glwrap{position:absolute;inset:0;pointer-events:none}}

/* Ohne WebGL oder mit reduzierter Bewegung: ruhiges Raster, gleiche Inhalte */
.pb.pb-flat .pb__track{height:auto!important}
.pb.pb-flat .pb__stage{position:relative;height:auto;overflow:visible}
.pb.pb-flat .pb__gl{display:none}
.pb.pb-flat .pb__row{position:relative;top:auto;transform:none!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;padding:0 var(--pb-gutter) 40px}
.pb.pb-flat .pb-card{height:auto;width:100%}
.pb.pb-flat .pb__chrome{position:relative;grid-template:auto/1fr auto;padding:0 var(--pb-gutter) 24px}
.pb.pb-flat .pb-now{display:none}
.pb.pb-flat .pb__count{display:none}
.pb.pb-flat .pb-ask{margin-right:0}
@media (prefers-reduced-motion:reduce){
  .pb-rv>*,.pb-now__mask>span,.pb-case__media figure,.pb-case__veil{transition:none!important}
}
/* ============================================================
   TABLET HOCHFORMAT (761–900 px)
   Zwischen dem Mobil-Block (bis 760px) und dem Breitbild-Layout
   klaffte eine Luecke: Es galt die Desktop-Textspalte mit 44vw,
   waehrend die Glasgrafik bereits weit nach links reichte. Text
   und Grafik lagen dadurch uebereinander (auf iPad-Hochformat
   rund 250 px Ueberdeckung). Gleiche Logik wie im Mobil-Block:
   Textspalte verbreitern, Grafik nach unten.
   ============================================================ */
@media (min-width: 761px) and (max-width: 900px) and (max-aspect-ratio: 7 / 5) {
  .hero__statement {
    top: 24%;
    width: min(78vw, 580px);
    font-size: clamp(21px, 3.4vw, 30px);
  }

  .hero__browser-wrap {
    top: 50%;
    width: 96vw;
    right: -12%;
  }

  .hero__cta {
    top: auto;
    bottom: 4%;
  }
}

/* ============================================================
   ATELIER-UEBERSCHRIFT AUF DEM TELEFON
   "Unverwechselbar." stand auf clamp(46px, ...). Die Untergrenze
   von 46px ergibt rund 444px Wortbreite — mehr als ein Telefon
   breit ist, das Wort wurde ab dem "b" abgeschnitten. Untergrenze
   gesenkt und an die Bildschirmbreite gekoppelt.
   ============================================================ */
@media (max-width: 760px) {
  .atelier__accent {
    /* 7.6vw statt 8.2vw: bei 390px passte das Wort exakt auf den Pixel,
       ohne jede Reserve. Jetzt bleiben rund 25px Luft. */
    font-size: clamp(25px, 7.6vw, 46px);
  }

  .atelier__lead {
    font-size: clamp(18px, 5.4vw, 27px);
  }
}