/* Grundschau: genuine app imagery, with a scroll-driven map and parcel reveal. */
.scene-grundschau {
  --gs-reveal: var(--reveal, 1);
  --gs-detail: var(--detail, .7);
  --gs-outro: var(--outro, 0);
  position: relative;
  isolation: isolate;
  height: 100%;
  background: #e6eae0;
  color: #173c2c;
  perspective: 1100px;
}
.scene-grundschau .gs-atmosphere {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 51% 39%, #fafbf3 0%, #eff2e8 25%, #e0e6d8 64%, #cdd7c5 100%);
}
.scene-grundschau .gs-orbit {
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  border: 1px solid #335d4520;
  border-radius: 50%;
  left: 16%;
  top: 4%;
  transform: scale(calc(.88 + var(--gs-detail) * .13));
  opacity: calc(.4 + var(--gs-reveal) * .6);
}
.scene-grundschau .gs-orbit-two {width: 100%; left: 4%; top: -11%; border-color: #335d4510}
.scene-grundschau .gs-coordinate {
  position: absolute;
  z-index: 1;
  top: 25px;
  left: 29px;
  right: 27px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #57715d;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .16em;
  line-height: 1.5;
}
.scene-grundschau .gs-coordinate span:last-child {font-weight: 450; letter-spacing: .12em}
.scene-grundschau .gs-landscape {
  position: absolute;
  width: 107%;
  height: 100%;
  inset: 4% auto auto -4%;
  opacity: calc(.22 + var(--gs-detail) * .16);
  transform: translate3d(calc(var(--gs-detail) * -12px), calc(var(--gs-detail) * 7px), 0) rotate(-5deg);
}
.scene-grundschau .gs-landscape svg {display: block; width: 100%; height: 100%; stroke: #788c68; stroke-width: .8}
.scene-grundschau .gs-landscape .gs-landscape-parcel {fill: #c0cf7e; stroke: #7f9652; stroke-width: 1.2}
.scene-grundschau .gs-device {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 54%;
  height: 87%;
  max-height: 514px;
  aspect-ratio: 1320 / 2868;
  box-sizing: content-box;
  padding: 6px;
  border-radius: 39px;
  border: 1px solid #73766e;
  background: linear-gradient(115deg, #292e27, #6b7068 42%, #141a14 78%, #7d8578);
  box-shadow: 1px 0 0 1px #c9ccbd inset, -1px 0 0 1px #555d51 inset, 12px 24px 26px -15px #20301c5c, 28px 43px 65px -27px #20301c52;
  opacity: calc(.7 + var(--gs-reveal) * .3);
  transform: translate(-50%, -50%) translate3d(calc((1 - var(--gs-reveal)) * 38px), calc((1 - var(--gs-reveal)) * 42px - var(--gs-outro) * 12px), 0) rotateX(calc((1 - var(--gs-detail)) * 5deg)) rotateY(calc((1 - var(--gs-detail)) * -14deg)) rotateZ(calc((1 - var(--gs-detail)) * -7deg));
  transform-style: preserve-3d;
}
.scene-grundschau .gs-device-button {position: absolute; width: 3px; height: 34px; background: #54604f; border-radius: 2px; left: -3px; top: 23%; box-shadow: 1px 0 #bcc4b7 inset}
.scene-grundschau .gs-device-button-b {top: 33%; height: 29px}
.scene-grundschau .gs-screen {position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #48513f; isolation: isolate}
.scene-grundschau .gs-map-layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 43%;
  transform: scale(calc(1 + var(--gs-detail) * .55)) translate3d(calc(var(--gs-detail) * -2%), calc(var(--gs-detail) * 2%), 0);
}
.scene-grundschau .gs-map-layer > img,
.scene-grundschau .gs-original-chrome {display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none}
.scene-grundschau .gs-boundary {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible}
.scene-grundschau .gs-boundary-line {stroke: #fff3b2; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--gs-detail)); opacity: var(--gs-detail)}
.scene-grundschau .gs-boundary-halo {stroke: #fff5c3; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--gs-detail)); opacity: calc(var(--gs-detail) * .18)}
.scene-grundschau .gs-location-aura {fill: #b9edbc36; stroke: #f4ffde8c; stroke-width: 2; opacity: var(--gs-detail); transform-box: fill-box; transform-origin: center; transform: scale(calc(.9 + var(--gs-detail) * .75))}
.scene-grundschau .gs-location-ring {stroke: #effed6; stroke-width: 3; opacity: var(--gs-detail)}
.scene-grundschau .gs-original-chrome {z-index: 2}
.scene-grundschau .gs-chrome-top {clip-path: polygon(0 0, 100% 0, 100% 10.5%, 0 10.5%)}
.scene-grundschau .gs-chrome-controls {clip-path: polygon(81% 6.5%, 100% 6.5%, 100% 36%, 81% 36%)}
.scene-grundschau .gs-chrome-bottom {clip-path: polygon(0 80.5%, 100% 80.5%, 100% 100%, 0 100%)}
.scene-grundschau .gs-device-island {position: absolute; z-index: 4; top: 1.55%; left: 35%; width: 30%; height: 3.1%; border-radius: 30px; background: #0b100b; box-shadow: inset 0 1px 2px #4a5148}
.scene-grundschau .gs-device-glass {position: absolute; z-index: 5; inset: 0; border-radius: inherit; border: 1px solid #ffffff2b; background: linear-gradient(115deg, #ffffff12 0%, transparent 25%, transparent 72%, #ffffff06 100%); pointer-events: none}
.scene-grundschau .gs-parcel-note,
.scene-grundschau .gs-signal-note {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid #ffffffbf;
  border-radius: 16px;
  box-shadow: 0 12px 35px -21px #233d2859, 0 1px 0 #ffffffd9 inset;
  background: #f8faf2f0;
}
.scene-grundschau .gs-parcel-note {
  left: 5%;
  top: 21%;
  width: 170px;
  padding: 19px 20px 18px;
  opacity: calc(.25 + var(--gs-reveal) * .75);
  transform: translate3d(calc((1 - var(--gs-reveal)) * -24px - var(--gs-detail) * 5px), calc((1 - var(--gs-reveal)) * 16px - var(--gs-detail) * 8px), 20px);
}
.scene-grundschau .gs-parcel-symbol {width: 33px; height: 33px; stroke: #518451; stroke-width: 1.35; margin-bottom: 12px}
.scene-grundschau .gs-note-eyebrow {font-size: 7px; font-weight: 700; letter-spacing: .13em; color: #6a8069; margin-bottom: 7px}
.scene-grundschau .gs-parcel-note strong,
.scene-grundschau .gs-signal-note strong {font-size: 16px; font-weight: 600; letter-spacing: -.045em; line-height: 1.3; color: #24432e}
.scene-grundschau .gs-note-description {font-size: 9px; color: #6f7e6c; line-height: 1.4; margin-top: 9px}
.scene-grundschau .gs-signal-note {
  right: 4.5%;
  bottom: 16%;
  width: 164px;
  padding: 17px 19px 18px;
  opacity: clamp(0, calc(var(--gs-detail) * 2.6), 1);
  transform: translate3d(calc((1 - var(--gs-detail)) * 22px), calc((1 - var(--gs-detail)) * 24px), 24px);
}
.scene-grundschau .gs-signal-heading {display: flex; align-items: center; gap: 7px; font-size: 8px; font-weight: 700; letter-spacing: .14em; color: #5c775a}
.scene-grundschau .gs-signal-dot {width: 5px; height: 5px; border-radius: 50%; background: #599751; box-shadow: 0 0 0 4px #bdd6ae3d}
.scene-grundschau .gs-wave {display: flex; align-items: center; gap: 4px; height: 43px; margin: 10px 0 12px; color: #759b4f}
.scene-grundschau .gs-wave i {display: block; width: 4px; height: calc(6px + var(--bar) * 35px); border-radius: 4px; background: currentColor; opacity: calc(.5 + var(--bar) * .5); transform: scaleY(calc(.17 + var(--gs-detail) * .83)); transform-origin: center}
.scene-grundschau .gs-source-note {position: absolute; z-index: 6; bottom: 16px; left: 27px; margin: 0; font-size: 8px; font-weight: 450; letter-spacing: .035em; color: #74836c}
@media (min-width: 1101px) and (max-width: 1250px) {
  .scene-grundschau .gs-parcel-note {left: 3%; width: 145px; padding: 16px}
  .scene-grundschau .gs-signal-note {right: 3%; width: 144px; padding: 16px}
}
@media (max-width: 760px) {
  .scene-grundschau .gs-coordinate {top: 18px; left: 18px; right: 18px; font-size: 6.5px; letter-spacing: .11em; gap: 10px}
  .scene-grundschau .gs-device {height: 83%; left: 53%; padding: 4px; border-radius: 30px; transform: translate(-50%, -48%) translate3d(0, calc((1 - var(--gs-reveal)) * 25px), 0) rotateZ(calc((1 - var(--gs-detail)) * -5deg))}
  .scene-grundschau .gs-screen {border-radius: 25px}
  .scene-grundschau .gs-parcel-note {left: 3%; top: 22%; width: 125px; padding: 13px 12px; border-radius: 12px}
  .scene-grundschau .gs-parcel-symbol {width: 26px; height: 26px; margin-bottom: 8px}
  .scene-grundschau .gs-parcel-note strong,
  .scene-grundschau .gs-signal-note strong {font-size: 13px}
  .scene-grundschau .gs-note-eyebrow {font-size: 6px; letter-spacing: .09em; margin-bottom: 5px}
  .scene-grundschau .gs-note-description {font-size: 7px; margin-top: 6px}
  .scene-grundschau .gs-signal-note {right: 3%; bottom: 13%; width: 122px; padding: 13px 12px; border-radius: 12px}
  .scene-grundschau .gs-signal-heading {font-size: 6px; gap: 6px}
  .scene-grundschau .gs-wave {height: 30px; gap: 3px; margin: 7px 0 8px}
  .scene-grundschau .gs-wave i {width: 3px; height: calc(5px + var(--bar) * 24px)}
  .scene-grundschau .gs-source-note {font-size: 6.5px; left: 18px; bottom: 12px}
}
@media (prefers-reduced-motion: reduce) {
  .scene-grundschau {--gs-reveal: 1; --gs-detail: .7; --gs-outro: 0}
  .scene-grundschau .gs-device {transform: translate(-50%, -50%); opacity: 1}
  .scene-grundschau .gs-parcel-note,
  .scene-grundschau .gs-signal-note {transform: none; opacity: 1}
  .scene-grundschau .gs-map-layer {transform: scale(1.15)}
  .scene-grundschau .gs-boundary-line,
  .scene-grundschau .gs-boundary-halo {stroke-dashoffset: 0}
}