/* ============================================================
   nomm — Schaufenster-Straße (Arbeiten)
   Eine Straße, durch die man seitwärts scrollt. Jedes Schaufenster zeigt
   eine Website; ein Klick auf das Schaufenster öffnet sie.
   Maße im Gebäude in cqw (Container-Einheiten), damit jedes Haus mit seiner
   Breite mitskaliert; die Website im Fenster ist echtes HTML/CSS (.ms).
   Ohne JavaScript / bei „Bewegung reduzieren": die Häuser stehen als Raster
   untereinander, ohne Szenerie. Mit html.scrub-on läuft die Straße.
   ============================================================ */

.street { --road: clamp(7.5rem, 24svh, 12rem); --sw: min(84vw, 30rem, calc((100svh - var(--hh)) * .6)); background: var(--cream); }
.street .hs-stick { padding-block: clamp(3.5rem, 8vw, 7rem); }
.street .hs-rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); align-items: start; }
.street-hint { margin-top: 1.4rem; color: var(--copper-dark); font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.street-hint::before { content: ""; display: inline-block; width: 2.6rem; height: 1px; margin-right: .8rem; vertical-align: middle; background: currentColor; }
.street-bg, .street-road, .lamp { display: none; }

/* ---------- Haus ---------- */

.shop {
  --b: var(--espresso); --aw1: var(--copper); --aw2: #F9F3EE; --win: #EADBCB; --door: var(--copper); --tx: var(--cream);
  position: relative; display: block; container-type: inline-size; width: 100%; color: var(--ink); text-decoration: none;
}
.shop--b { --b: var(--copper); --aw1: var(--espresso); --aw2: #F9F3EE; --door: var(--espresso); }
.shop--d { --b: var(--sage); --aw1: #F9F3EE; --aw2: var(--espresso); --door: var(--espresso); --win: #EADBCB; }
.shop--c { --b: var(--apricot); --aw1: var(--copper); --aw2: #fff; --win: #fff; --door: var(--espresso); --tx: var(--ink); }
.shop--e { --b: transparent; --aw1: var(--cream-2); --aw2: #fff; --win: transparent; --door: transparent; --tx: var(--ink); }

.sh-body { position: relative; display: block; background: var(--b); color: var(--tx); border-bottom: 1.4cqw solid rgba(20, 12, 8, .45); }
.shop--e .sh-body { outline: 2px dashed var(--copper); outline-offset: -2px; border-bottom-color: transparent; }
/* Dachkante: ein Balken in Hausfarbe, der seitlich übersteht, damit das Haus oben abgeschlossen wirkt */
.sh-body::before { content: ""; display: block; height: 6cqw; margin: 0 -4cqw; background: var(--b); box-shadow: inset 0 -1.2cqw 0 rgba(20, 12, 8, .22); }
.shop--e .sh-body::before { border: .5cqw dashed var(--copper); border-bottom: 0; background: transparent; box-shadow: none; }
.sh-sign { display: grid; gap: .9cqw; margin: 6cqw 8cqw 0; padding: 2.6cqw 3cqw; background: #fff; color: var(--ink); text-align: center; }
.sh-sign span { font: 700 5.4cqw/1.1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sh-sign small { color: #5E4B3F; font: 600 2.9cqw/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sh-awning {
  display: block; height: 13cqw; margin-top: 4cqw; transform-origin: top; transition: transform .5s var(--ease);
  background: repeating-linear-gradient(90deg, var(--aw1) 0 6.25cqw, var(--aw2) 6.25cqw 12.5cqw);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 8cqw no-repeat, radial-gradient(circle 3.2cqw at 50% 0, #000 98%, #0000 100%) 0 8cqw / 6.25cqw 5cqw repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% 8cqw no-repeat, radial-gradient(circle 3.2cqw at 50% 0, #000 98%, #0000 100%) 0 8cqw / 6.25cqw 5cqw repeat-x;
}
.sh-front { display: grid; grid-template-columns: minmax(0, 1fr) 20cqw; grid-template-rows: auto auto; column-gap: 5cqw; padding: 2cqw 8cqw 0; }
.sh-screen { grid-column: 1; grid-row: 1; position: relative; container-type: size; aspect-ratio: 16 / 11; overflow: hidden; background: var(--cream-2); border: 1.4cqw solid #17100B; box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .18); }
.sh-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0 14%, transparent 14% 24%, rgba(255, 255, 255, .1) 24% 30%, transparent 30%); }
.sh-screen .ms { transition: transform 7s cubic-bezier(.45, .05, .3, 1); }
.sh-door { grid-column: 2; grid-row: 1 / 3; position: relative; display: block; background: var(--door); transform-origin: left center; transition: transform .7s var(--ease); }
.sh-door::before { content: ""; position: absolute; left: 18%; right: 18%; top: 9%; height: 34%; background: rgba(255, 255, 255, .22); }
.sh-door::after { content: ""; position: absolute; right: 12%; top: 62%; width: 7%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.sh-door em { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: .5cqw 1.2cqw; background: #fff; color: var(--ink); font: 700 2.4cqw/1.2 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; width: max-content; white-space: nowrap; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; }
.sh-tag { grid-column: 1; grid-row: 2; display: block; padding: 3cqw 0 4cqw; font: 600 2.7cqw/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sh-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 1.4cqw; padding: 4cqw; color: var(--ink); text-align: center; font: 800 6.4cqw/1.05 var(--font-display); letter-spacing: -.03em; }
.sh-empty b { font: 400 16cqw/1 var(--font-display); color: var(--copper); }
.shop--e .sh-screen { background: #fff; border-color: var(--copper); border-style: dashed; box-shadow: none; }
.shop--e .sh-screen::after { display: none; }

.sh-info { display: grid; gap: .5rem; margin-top: 1.2rem; }
.sh-idea { max-width: 24rem; color: var(--muted); font-size: .98rem; }
.sh-go { display: inline-flex; align-items: center; gap: .6rem; color: var(--copper-dark); font-weight: 700; }
.sh-go svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }

.shop:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; border-radius: 2px; }
@media (hover: hover) {
  .shop:hover .sh-awning { transform: scaleY(1.1); }
  .shop:hover .sh-door { transform: perspective(60cqw) rotateY(-24deg); }
  .shop:hover .sh-screen .ms { transform: translateY(calc(-100% + 100cqh)); }
  .shop:hover .sh-go svg { transform: translateX(.35rem); }
  .shop:hover .sh-go { text-decoration: underline; text-underline-offset: .25em; }
}
.shop:focus-visible .sh-awning { transform: scaleY(1.1); }
.shop:focus-visible .sh-screen .ms { transform: translateY(calc(-100% + 100cqh)); }

/* Die Beispielseiten im Fenster (.ms) stehen in ms.css — vorher einbinden. */
.street-skip { display: inline-flex; align-items: center; min-height: 2.5rem; margin-top: .4rem; color: var(--copper-dark); font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }

/* Unternehmensviertel: höhere, breitere Häuser mit Glasfassade (ohne einzelne Fenster) und Wegweiser */
.shop--tower { --tw: 1.3; }
.sh-tower { height: 46cqw; margin: 0 6cqw; background:
  linear-gradient(115deg, rgba(255, 255, 255, .2) 0 12%, transparent 12% 26%, rgba(255, 255, 255, .1) 26% 32%, transparent 32%),
  repeating-linear-gradient(90deg, rgba(244, 210, 176, .22) 0 .5cqw, transparent .5cqw 9cqw),
  repeating-linear-gradient(0deg, rgba(244, 210, 176, .16) 0 .4cqw, transparent .4cqw 8cqw),
  linear-gradient(170deg, #5A463A, #2A1C14); }
.shop--tower .sh-awning { height: 4cqw; margin-top: 3cqw; background: var(--aw1); -webkit-mask: none; mask: none; }
.shop--tower .sh-sign { margin-top: 3cqw; }
.district { display: none; }
.ms-util { display: flex; justify-content: space-between; padding: 1.4em 4.5em; background: var(--dark); color: var(--dark-ink); font-size: 1.3em; }
.ms-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2em; padding: 3.2em 4.5em; border-block: 1px solid var(--line); }
.ms-kpi b { display: block; font: var(--dw) 4.2em/1 var(--disp); letter-spacing: var(--dl); }
.ms-kpi i { display: block; margin-top: .5em; color: var(--mut); font-size: 1.4em; font-style: normal; }
.ms-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4em; padding: 2em 4.5em 6em; background: var(--tint); }
.ms-fields div { padding-top: 1.2em; border-top: .6em solid var(--acc); }
.ms-fields b { font-size: 2.2em; line-height: 1.2; }
.ms-ent .ms-h { font-size: 4.4em; overflow-wrap: break-word; hyphens: auto; }
.ms-ent .ms-hero { min-height: 56em; }
.ms-ent .ms-art { min-height: 56em; }

/* ---------- Mit Bühne: die Straße läuft ---------- */

.scrub-on .street { height: calc(100svh - var(--hh) + var(--hs-dist, 900px) * .5 + 40svh); }
.scrub-on .street .hs-stick { position: sticky; top: var(--hh); display: block; height: calc(100svh - var(--hh)); padding: 0; overflow: hidden; }
.scrub-on .street .hs-rail {
  position: absolute; z-index: 1; left: 0; bottom: var(--road); display: flex; align-items: flex-end; gap: clamp(2.5rem, 5vw, 5rem); width: max-content; margin: 0; padding-inline: var(--edge);
}
.scrub-on .street .hs-intro { flex: none; align-self: flex-start; width: min(84vw, 29rem); margin: clamp(.5rem, 4svh, 3rem) clamp(.5rem, 4vw, 3rem) 0 0; }
.scrub-on .street .hs-intro h2 { font-size: clamp(2rem, min(4vw, 7.5svh), 3.6rem); }
.scrub-on .shop { flex: none; width: var(--sw); }
.scrub-on .shop--tower { width: calc(var(--sw) * var(--tw, 1)); }
.scrub-on .district { display: grid; flex: none; align-self: flex-end; width: 11rem; margin-inline: .5rem; justify-items: center; }
.district b { padding: .6rem .9rem; background: var(--ink); color: var(--cream); font: 700 .78rem/1.25 var(--mono); letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.district i { width: 3px; height: clamp(8rem, 30svh, 13rem); background: var(--ink); }
.scrub-on .sh-info { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2.4svh; }

.scrub-on .street-bg { display: block; position: absolute; inset: 0 0 var(--road) 0; pointer-events: none; }
.sk-clouds, .sk-city { position: absolute; left: 0; width: calc(100% + var(--hs-dist, 0px) * .5); }
.sk-clouds { top: 0; height: 40%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='160'%3E%3Cg fill='%23EEE0D0'%3E%3Crect x='80' y='40' width='230' height='44' rx='22'/%3E%3Crect x='150' y='72' width='150' height='34' rx='17'/%3E%3Crect x='700' y='16' width='270' height='48' rx='24'/%3E%3Crect x='790' y='52' width='160' height='36' rx='18'/%3E%3Crect x='1130' y='70' width='210' height='44' rx='22'/%3E%3C/g%3E%3C/svg%3E") 0 30% / 1400px 160px repeat-x; translate: calc(var(--k, 0) * var(--hs-dist, 0px) * -.12) 0; }
.sk-city { bottom: 0; height: 66%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300' preserveAspectRatio='none'%3E%3Cg fill='%23F2E6D9'%3E%3Crect x='0' y='140' width='120' height='160'/%3E%3Crect x='130' y='80' width='100' height='220'/%3E%3Crect x='240' y='170' width='90' height='130'/%3E%3Crect x='340' y='110' width='130' height='190'/%3E%3Crect x='480' y='150' width='80' height='150'/%3E%3Crect x='570' y='60' width='110' height='240'/%3E%3Crect x='690' y='130' width='100' height='170'/%3E%3Crect x='800' y='180' width='100' height='120'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 900px 100% repeat-x; translate: calc(var(--k, 0) * var(--hs-dist, 0px) * -.4) 0; }
.sun { position: absolute; right: clamp(1.5rem, 6vw, 6rem); top: clamp(1rem, 6svh, 3rem); width: clamp(3.4rem, 8vw, 6.2rem); aspect-ratio: 1; border: clamp(.35rem, .9vw, .6rem) solid var(--copper); border-radius: 50%; }
.sun::after { content: ""; position: absolute; left: -14%; right: -14%; top: 50%; height: clamp(.35rem, .9vw, .6rem); background: var(--copper); transform: rotate(-45deg); }

.scrub-on .street-road { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: var(--road); background: #EBDDCB; border-top: 3px solid var(--ink); }
.street-road::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18%; height: .35rem; opacity: .55; background: repeating-linear-gradient(90deg, var(--ink) 0 3.5rem, transparent 3.5rem 7rem); background-position: calc(var(--k, 0) * var(--hs-dist, 0px) * -1) 0; }

.scrub-on .lamp { display: block; position: relative; flex: none; align-self: flex-end; width: 1.5rem; height: clamp(10rem, 40svh, 17rem); margin-inline: -1rem; background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 3px 100% no-repeat; }
.lamp::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5rem; height: 1.2rem; translate: -50% 0; background: var(--copper); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.lamp::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1.4rem; height: .5rem; translate: -50% 0; background: var(--ink); }

@media (max-width: 899px) {
  .scrub-on .street { --road: clamp(8.5rem, 27svh, 12rem); }
  .scrub-on .sh-info { margin-top: 1.8svh; }
}

@media (forced-colors: active) {
  .shop { border: 2px solid LinkText; }
}

/* ---------- Haus "Ihr Auftritt": das freie Grundstück als echtes Haus mit Schild SALE im Fenster, Klick öffnet eine E-Mail-Anfrage ---------- */
.shop--sale .sh-tag { text-transform: none; letter-spacing: .03em; }
.ms-sale { height: 100cqh; background: radial-gradient(ellipse 80% 70% at 50% 28%, #FFF4E6, #F6DDC2 68%, #EBC9A6); }
.ms-sale::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15cqh; background: linear-gradient(180deg, rgba(20, 12, 8, .06), rgba(20, 12, 8, .2)); }
.ms-sale .sa-t { position: absolute; left: 50%; top: 34cqh; width: 52cqw; margin-left: -26cqw; transform-origin: 50% -72%; animation: sale-sw 5.4s ease-in-out infinite; }
.ms-sale .sa-t::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 100%; height: 24cqh; background: linear-gradient(to top right, transparent calc(50% - .35cqw), #6B4B33 calc(50% - .35cqw) calc(50% + .35cqw), transparent calc(50% + .35cqw)) left / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - .35cqw), #6B4B33 calc(50% - .35cqw) calc(50% + .35cqw), transparent calc(50% + .35cqw)) right / 50% 100% no-repeat; }
.ms-sale .sa-t::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + 23cqh); width: 4cqw; height: 4cqw; margin-left: -2cqw; border: .8cqw solid #6B4B33; border-radius: 50%; }
.ms-sale .sa-t b { position: relative; display: block; padding: 5.5cqw 0 2.4cqw; background: #C8401B; color: #fff; border-radius: 3cqw 3cqw 0 0; font: 900 19cqw/1 "Avenir Next", "Segoe UI", system-ui, sans-serif; letter-spacing: .03em; text-align: center; outline: .5cqw dashed rgba(255, 255, 255, .7); outline-offset: -2cqw; box-shadow: 0 2.4cqw 3cqw -1.6cqw rgba(60, 20, 8, .55); }
.ms-sale .sa-t span { display: block; padding: 2.2cqw 0; background: #F9F3EE; color: #7A2A10; border-radius: 0 0 3cqw 3cqw; font: 700 4.2cqw/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-align: center; text-transform: uppercase; box-shadow: 0 2.4cqw 3cqw -1.6cqw rgba(60, 20, 8, .55); }
@keyframes sale-sw { 0%, 100% { transform: rotate(-3.2deg); } 50% { transform: rotate(3.2deg); } }
@media (prefers-reduced-motion: reduce) { .ms-sale .sa-t { animation: none; transform: rotate(-2deg); } }