/* =============================================================================
   JDL MEDIA — Basel
   Monochromes Editorial-Layout. Farbe existiert ausschliesslich an den
   Standort-Markern (--accent).
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  color-scheme: light;

  --paper:      #f2f2f0;
  --paper-hi:   #fbfbfa;
  --paper-lo:   #e6e6e2;
  --ink:        #0b0b0b;
  --ink-soft:   #2a2a28;
  --gray:       #6b6b66;   /* 4.8:1 auf Papier — WCAG AA */
  --gray-lo:    #8d8d87;   /* nur dekorativ, nie fuer Fliesstext */
  --line:       rgba(11, 11, 11, .16);
  --line-soft:  rgba(11, 11, 11, .09);

  /* Signalfarben — der einzige Farbeinsatz der Seite */
  --c-friseur:     #ff3b30;
  --c-restaurant:  #ff7a1a;
  --c-cafe:        #00bf98;
  --c-gym:         #2e7bff;
  --c-fotografie:  #9a5cff;
  --c-mode:        #ff2f96;
  --c-immobilien:  #ffbe0b;
  --c-agentur:     #93d500;
  --c-gastgeber:   #1ecb5a;

  --font-display: "Helvetica Neue", HelveticaNeue, Helvetica, "Inter", Arial,
                  "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
               "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --pad: clamp(16px, 3.2vw, 44px);
  --head-h: clamp(56px, 8vw, 78px);
  --ease: cubic-bezier(.16, .84, .28, 1);
  --ease-zoom: cubic-bezier(.62, .02, .16, 1);

  --scene-size: 190px;
}

[data-cat="friseur"]    { --accent: var(--c-friseur); }
[data-cat="restaurant"] { --accent: var(--c-restaurant); }
[data-cat="cafe"]       { --accent: var(--c-cafe); }
[data-cat="gym"]        { --accent: var(--c-gym); }
[data-cat="fotografie"] { --accent: var(--c-fotografie); }
[data-cat="mode"]       { --accent: var(--c-mode); }
[data-cat="immobilien"] { --accent: var(--c-immobilien); }
[data-cat="agentur"]    { --accent: var(--c-agentur); }
[data-cat="gastgeber"]  { --accent: var(--c-gastgeber); }

[data-scene="friseur"]    { --accent: var(--c-friseur); }
[data-scene="restaurant"] { --accent: var(--c-restaurant); }
[data-scene="cafe"]       { --accent: var(--c-cafe); }
[data-scene="gym"]        { --accent: var(--c-gym); }
[data-scene="fotografie"] { --accent: var(--c-fotografie); }
[data-scene="mode"]       { --accent: var(--c-mode); }
[data-scene="immobilien"] { --accent: var(--c-immobilien); }
[data-scene="agentur"]    { --accent: var(--c-agentur); }
[data-scene="gastgeber"]  { --accent: var(--c-gastgeber); }

/* ------------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor;
       stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------ UTILITY-TYPOGRAFIE */
.kicker,
.head-meta,
.eyebrow,
.hero__scroll,
.hero__loc,
.panel__head,
.panel__hint,
.panel__flag,
.map__legend,
.entry__kicker,
.entry__meta,
.entry__btn,
.site-foot p,
.site-foot a,
.menu__kicker,
.menu__foot,
.burger__text,
.cta__label,
.brand,
.noscript {
  font-family: var(--font-mono);
  /* Untergrenze 11px statt 9.5: unter 1200px Fensterbreite gewann immer das
     Minimum, also stand auf dem Handy — wo diese Labels Knöpfe beschriften —
     der kleinste Text der Seite. */
  font-size: clamp(11px, .78vw, 11.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.55;
  font-weight: 400;
}

/* --------------------------------------------------------------- KORN/GRAIN */
/* ------------------------------------------------------- DAUER-CTA MOBIL */
.stickycta { display: none; }
/* Die Leiste schwebt über dem Inhalt. Ohne Platz am Fuss lagen darunter
   dauerhaft Impressum und Datenschutz — Pflichtangaben, die man nicht
   antippen konnte. */
@media (max-width: 720px) {
  body { padding-bottom: 86px; }
  .stickycta {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 890;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 16px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
    transform: translateY(140%);
    opacity: 0;
    transition: transform .42s var(--ease), opacity .42s var(--ease);
  }
  .stickycta__text {
    grid-column: 1;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
  }
  .stickycta__sub {
    grid-column: 1;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    opacity: .66;
  }
  .stickycta__arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; }
  /* Erst nach dem Hero, und nie über dem geöffneten Karten-Panel */
  body.zeig-cta .stickycta { transform: none; opacity: 1; }
  body.karte-offen .stickycta,
  body.menu-offen .stickycta { transform: translateY(140%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stickycta { transition: none; }
}

.cfg__serie {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.6;
}
.cfg__serie strong { font-weight: 700; }
.cfg__serie a { text-decoration: underline; }

.cta-band__note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  opacity: .62;
}

.preisanker {
  max-width: 62ch;
  margin: 28px auto 0;
  padding: 0 var(--pad);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.preisanker strong { color: var(--ink); font-weight: 700; }

.ablauf { padding: clamp(64px, 9vw, 120px) 0; }
.ablauf__list {
  list-style: none;
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  padding: 0 var(--pad);
  margin-top: clamp(28px, 4vw, 48px);
}
.ablauf__step { border-top: 1px solid var(--line); padding-top: 18px; }
.ablauf__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  opacity: .45;
}
.ablauf__step h3 {
  margin: 10px 0 8px;
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: -.01em;
}
.ablauf__step p { font-size: clamp(14px, 1.35vw, 16px); line-height: 1.65;
                  color: color-mix(in srgb, var(--ink) 76%, transparent); }
.ablauf__note {
  margin: clamp(24px, 3vw, 36px) auto 0;
  max-width: 54ch;
  padding: 0 var(--pad);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.stage__sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}

/* ------------------------------------------------------------------ KORN --
   Zwei Lagen: dunkle Körner auf hellen Flächen (multiply), helle Körner auf
   dunklen (screen). Beide als SVG-Rauschen statt als Rasterkachel — eine
   512er WebP-Kachel wird auf jedem Bildschirm anders skaliert und wirkt
   dann klobig. Der Browser rendert den Filter in Gerätepixeln, das Korn
   bleibt fein, egal bei welcher Pixeldichte.

   Wichtig: der Mischmodus muss auf dem Element selbst sitzen — auf einem
   Pseudo-Element in einem Container mit z-index mischt er sich nur mit
   dessen leerem Inhalt und läge dann deckend über der Seite. */
.grain {
  position: fixed;
  inset: -6%;
  z-index: 900;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .5;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='k' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .58'/></feComponentTransfer></filter><rect width='300' height='300' filter='url(%23k)'/></svg>") repeat;
  background-size: 150px 150px;
}
.grain--light {
  z-index: 901;
  mix-blend-mode: screen;
  opacity: .1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='1' seed='23' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .8'/></feComponentTransfer></filter><rect width='300' height='300' filter='url(%23n)'/></svg>") repeat;
  background-size: 150px 150px;
}

.dust {
  position: fixed;
  inset: 0;
  z-index: 902;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: multiply;
  background: url("../img/dust.svg") center / cover no-repeat;
}

/* Korn IN der Schrift, invertiert: helle Körner in der dunklen Type. Die
   Fläche wird durch die Buchstaben beschnitten, das Rauschen im Screen-Modus
   über die Tinte gelegt. Ohne Unterstützung für background-clip bleibt die
   Schrift schlicht schwarz — deshalb steckt alles in @supports. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .korn-type {
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='t' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .5'/></feComponentTransfer></filter><rect width='300' height='300' filter='url(%23t)'/></svg>"),
      linear-gradient(var(--ink), var(--ink));
    background-size: 150px 150px, 100% 100%;
    background-repeat: repeat, no-repeat;
    /* Am Viewport verankert: so liegt über allen Überschriften ein
       durchgehendes Kornfeld statt pro Element ein eigener Anschnitt — und
       bei bewegter Type wandert das Korn nicht mit, wie bei echtem Film. */
    background-attachment: fixed, fixed;
    background-blend-mode: screen, normal;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  body.theme-dark .korn-type {
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='t2' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .55'/></feComponentTransfer></filter><rect width='300' height='300' filter='url(%23t2)'/></svg>"),
      linear-gradient(var(--ink), var(--ink));
    background-blend-mode: multiply, normal;
  }
}

/* --------------------------------------------------------------- SITE HEAD */
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  height: var(--head-h);
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  padding: 0 var(--pad);
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(12px) saturate(.8);
  -webkit-backdrop-filter: blur(12px) saturate(.8);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: -1;
}
.site-head.is-stuck::before { opacity: 1; }
.site-head.is-stuck { border-bottom-color: var(--line-soft); }

.brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  flex-direction: column;
  line-height: 1.25;
}
.brand__name { letter-spacing: .16em; }
.brand__mark {
  background: var(--ink);
  color: var(--paper);
  padding: 1px 4px 2px;
  letter-spacing: .16em;
  font-size: .92em;
}

.head-meta { color: var(--ink); justify-self: center; white-space: nowrap; }
.head-cta {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: letter-spacing .3s var(--ease);
}
.head-cta:hover { letter-spacing: .2em; }
.head-meta--a { grid-column: 3; }
.head-meta--b { grid-column: 5; }
.head-meta--c { grid-column: 7; justify-self: end; }

.burger {
  grid-column: 8;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px 8px 10px;
}
.burger__text { color: var(--ink); }
.burger__bars { display: grid; gap: 5px; width: 22px; }
.burger__bars i {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), width .3s var(--ease);
  width: 22px;
}
.burger:hover .burger__bars i:last-child { width: 14px; }
.burger[aria-expanded="true"] .burger__bars i:first-child { transform: translateY(3.25px) rotate(12deg); }
.burger[aria-expanded="true"] .burger__bars i:last-child  { transform: translateY(-3.25px) rotate(-12deg); width: 22px; }

@media (max-width: 900px) {
  .site-head { grid-template-columns: auto 1fr auto auto; }
  .head-meta { display: none; }
  /* Der Anfrage-Link ist der wichtigste Klick der Seite —
     er bleibt auch auf dem Handy sichtbar */
  .head-cta {
    /* War 132 x 19 Pixel — der wichtigste Klick der Seite und kleiner als
       jedes Tippziel sein darf. Padding macht die Fläche, ohne die Zeile
       optisch wachsen zu lassen. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    grid-column: 3;
    justify-self: end;
    font-size: 11px;
  }
  .burger { grid-column: 4; }
}

/* ------------------------------------------------------------------- MENÜ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--paper);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }

.menu__inner {
  width: min(1100px, 100%);
  padding: calc(var(--head-h) + 24px) var(--pad) var(--pad);
}
.menu__kicker { color: var(--gray); margin-bottom: 24px; }
.menu__list { border-top: 1px solid var(--line); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 4vw, 60px);
  padding: clamp(10px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(2rem, 7vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
  transition: padding-left .35s var(--ease), color .3s var(--ease);
}
.menu__list a span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--gray);
}
.menu__list a:hover { padding-left: clamp(10px, 2vw, 28px); }
.menu__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  color: var(--gray);
  flex-wrap: wrap;
}
.menu__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------- HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(24px, 4vh, 56px);
  padding: calc(var(--head-h) + clamp(16px, 4vh, 46px)) var(--pad) var(--pad);
  overflow: hidden;
  isolation: isolate;
}

.hero__haze {
  /* Der Rauch liegt ÜBER der Typografie, nicht dahinter: dort wo er dicht ist,
     werden die schwarzen Buchstaben grau — genau dieser Effekt macht den
     analogen Andruck-Look aus. Mittelgrau dunkelt zugleich das Papier ab. */
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: 47%;
  left: 52%;
  translate: -50% -50%;
  width: clamp(520px, 72vw, 1240px);
  aspect-ratio: 1 / 1.18;
  background: url("../img/haze.svg") center / contain no-repeat;
  opacity: .66;
  will-change: transform;
  animation: hazeDrift 38s ease-in-out infinite alternate;
}
@keyframes hazeDrift {
  from { transform: rotate(-9deg) scale(1) translateY(0); }
  to   { transform: rotate(-5deg) scale(1.05) translateY(-1.5%); }
}

.eyebrow {
  color: var(--ink);
  max-width: 30ch;
  width: max-content;
  position: relative;
  z-index: 4;                 /* bleibt über dem Rauch lesbar */
  padding: 10px 14px;
  margin-left: -14px;         /* optisch bündig mit dem Seitenrand */
  background: color-mix(in srgb, var(--paper-hi) 82%, transparent);
}

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: end;
  align-content: center;
  column-gap: clamp(24px, 3.5vw, 56px);
  row-gap: clamp(26px, 4vh, 52px);
}

/* Die Schriftgrösse richtet sich nach der Spaltenbreite, nicht nach dem
   Viewport — nur so bleiben die drei Zeilen unter allen Breiten intakt. */
.hero__titlewrap { grid-column: 1; container-type: inline-size; }

.hero__title {
  font-size: min(15.4cqw, 12.6rem);
  font-weight: 900;
  line-height: .83;
  letter-spacing: -.045em;
  text-transform: uppercase;
  margin: 0;
}
.hero__line { display: block; white-space: nowrap; }
.hero__dot { margin-left: -.02em; }

.hero__aside {
  grid-column: 2;
  justify-self: end;
  width: 100%;
  display: grid;
  gap: 22px;
  padding-bottom: clamp(0px, 4vh, 54px);
}
.hero__desc {
  font-family: var(--font-mono);
  font-size: clamp(11px, .92vw, 13px);
  line-height: 1.72;
  letter-spacing: .01em;
  color: var(--gray);
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}
.cta__label {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: letter-spacing .3s var(--ease);
}
.cta:hover .cta__label { letter-spacing: .2em; }
.cta__box {
  display: grid;
  place-items: center;
  width: 42px;
  height: 26px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  transition: transform .3s var(--ease);
}
.cta:hover .cta__box { transform: translateX(5px); }

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.hero__scroll { display: grid; gap: 10px; }
.hero__scroll-arrow {
  font-family: var(--font-mono);
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.hero__loc { text-align: right; color: var(--ink); }

@media (max-width: 900px) {
  .hero__body { grid-template-columns: minmax(0, 1fr); }
  .hero__titlewrap { grid-column: 1; }
  .hero__aside {
    grid-column: 1;
    justify-self: stretch;
    max-width: 46ch;
    padding-bottom: 0;
  }
}

/* -------------------------------------------------------- KARTE / SEKTION */
.places {
  position: relative;
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--head-h);
}

.places__head,
.index__head {
  display: grid;
  gap: 10px;
  padding: clamp(28px, 5vw, 56px) var(--pad) clamp(20px, 3vw, 34px);
}
.kicker { color: var(--gray); }
.places__title {
  font-size: clamp(1.35rem, 3.1vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-transform: uppercase;
  max-width: 22ch;
}

/* --------------------------------------------------------------- KARTE UI */
.map {
  position: relative;
  height: clamp(560px, 92svh, 1020px);
  overflow: hidden;
  background: #dcdcd7;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  container-type: size;
  isolation: isolate;
  cursor: default;
}

/* Bildfläche mit festem Seitenverhältnis, die den Rahmen immer ausfüllt.
   Dadurch beziehen sich die Marker-Prozente exakt auf die Grafik — egal wie
   das Fenster proportioniert ist. --map-ar wechselt mit dem Bildformat. */
.map {
  --map-ar: 1.6;
}
.map__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, calc(100cqh * var(--map-ar)));
  height: max(calc(100cqw / var(--map-ar)), 100cqh);
  transform: translate(-50%, -50%);
  transition: transform .78s var(--ease-zoom);
}
@media (prefers-reduced-motion: reduce) {
  .map__canvas { transition: none; }
}
@media (max-width: 720px) {
  .map { --map-ar: 0.714286; }   /* 4000 × 5600 */
}

/* Die Bühne bewegt sich nicht mehr: der Zoom animiert die viewBox des
   Stadtmodells direkt (siehe zoomFahrt in main.js), damit jedes Einzelbild
   scharf bleibt. Sie ist nur noch der gemeinsame Rahmen für Modell und
   Marker. Ein Transform in CSS-Variablen stand hier einmal — vererbte
   Eigenschaften machten dabei alle 30 000 Modellknoten stilungültig,
   gemessene 72 bis 135 ms pro Bild. */
.map__stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

/* Das Stadtmodell (aus OpenStreetMap-Daten gerendert) bringt seine eigenen
   Farben mit — die Seite bleibt dadurch monochrom. */
.map__artwrap { position: absolute; inset: 0; }
.map__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------- MARKER */
/* Die Marker liegen ausserhalb des SVG und fahren darum selbst mit: JS
   setzt hier pro Bild denselben Transform, den der Kartenausschnitt zeigt.
   `--counter` hält sie dabei gleich gross. Beides sitzt auf diesem Rahmen
   und nicht auf der Bühne — dort hingen 30 000 Modellknoten mit dran. */
.markers {
  position: absolute;
  inset: 0;
  --counter: 1;
  transform-origin: 0 0;
}

.marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%) scale(var(--counter, 1));
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  transition: opacity .45s var(--ease), filter .45s var(--ease);
  /* Die Schaltfläche reicht von der Pille bis hinunter zum Punkt. Dieser
     Halm-Streifen ist unsichtbar, fing aber Tipps ab: auf dem Handy lag der
     Halm des Gastgebers über der Restaurant-Pille — wer «Restaurant» tippte,
     landete beim Gastgeber. Klickbar ist darum nur, was man auch sieht. */
  pointer-events: none;
}
.marker__pill, .marker__dot { pointer-events: auto; }

.marker__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper-hi);
  padding: 8px 13px 8px 11px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .75);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.marker__pill .ico {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
  stroke-width: 2;
  flex: none;
}
.marker__stem {
  width: 1.5px;
  height: 46px;
  background: linear-gradient(var(--ink) 0 45%, var(--accent) 100%);
}
.marker__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid rgba(11, 11, 11, .72);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: box-shadow .35s var(--ease);
}
.marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 34px;
  translate: -50% 50%;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: markerPing 2.8s var(--ease) infinite;
  animation-delay: var(--ping-delay, 0s);
  pointer-events: none;
}
.map.is-zoomed { cursor: zoom-out; }
.map.is-zoomed .panel,
.map.is-zoomed .stepper,
.map.is-zoomed .marker { cursor: default; }
.entry.is-current { background: color-mix(in srgb, var(--paper-hi) 90%, transparent); }
.entry.is-current::after { transform: scale(1.5); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
@keyframes markerPing {
  0%   { transform: scale(.25); opacity: .85; }
  70%  { opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

.marker:hover .marker__pill,
.marker:focus-visible .marker__pill { transform: translateY(-4px); }
.marker:hover .marker__dot { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }

/* Zoom-Modus: nur der aktive Marker bleibt */
/* Im Zuschnitt zeigt kein Marker mehr etwas Sinnvolles: sein Anker steht
   über dem Dach, bei fünfzigfachem Zoom also weit ausserhalb des Bildes.
   Beschriftet wird jetzt vom Fassadenschild und vom Panel. */
.map.is-zoomed .marker { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------- SZENEN */
/* Die Szenen-Ebene liegt über den Markern — ohne pointer-events:none fängt
   sie jeden echten Mausklick ab und kein Marker ist mehr wählbar. */
.scenes { position: absolute; inset: 0; pointer-events: none; }

.scene {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--scene-size);
  height: var(--scene-size);
  /* Der Fusspunkt des Objekts sitzt auf dem markierten Haus, nicht dessen Mitte */
  transform: translate(-50%, -72%) scale(calc(var(--counter, 1) * .84));
  transform-origin: 50% 88%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .6s;
  pointer-events: none;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -72%) scale(var(--counter, 1));
  transition: opacity .55s var(--ease) .35s, transform .7s var(--ease) .35s, visibility 0s;
}
.scene__art { width: 100%; height: 100%; overflow: visible; }

/* Materialsprache der Szenen — dieselben drei Töne wie das Stadtmodell:
   Deckfläche hell, Ostseite mittel, Südseite dunkel. Farbe trägt nur das
   Objekt selbst, damit die Vignette wie ein Modellbauteil im Stadtmodell
   sitzt und nicht wie ein aufgeklebtes Icon. */
.scene .o-shadow { fill: rgba(11, 11, 11, .16); }

.scene .m-top { fill: #fbfbf9; }
.scene .m-lit { fill: #dcdcd5; }
.scene .m-dim { fill: #9a9a92; }

.scene .o-top      { fill: color-mix(in srgb, var(--accent) 34%, #fff); }
.scene .o-topfill  { fill: color-mix(in srgb, var(--accent) 62%, #fff); }
.scene .o-lit      { fill: var(--accent); }
.scene .o-dim      { fill: color-mix(in srgb, var(--accent) 68%, #000); }
.scene .o-shade    { fill: color-mix(in srgb, var(--accent) 55%, #000); }
.scene .o-screen   { fill: color-mix(in srgb, var(--accent) 22%, #14140f); }

.scene .s-lit  { fill: none; stroke: var(--accent); stroke-width: 3.4;
                 stroke-linecap: round; stroke-linejoin: round; }
.scene .s-dim  { fill: none; stroke: color-mix(in srgb, var(--accent) 62%, #000);
                 stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.scene .s-edge { fill: none; stroke: #6f6f68; stroke-width: 2.2;
                 stroke-linecap: round; stroke-linejoin: round; }
.scene .s-truss { fill: none; stroke: var(--accent); stroke-width: 2.2;
                  stroke-linecap: round; stroke-linejoin: round; }
.scene .s-thin  { fill: none; stroke: color-mix(in srgb, var(--accent) 60%, #000);
                  stroke-width: 2; stroke-linecap: round; }
.scene .s-cable { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, #000);
                  stroke-width: 2.6; stroke-linecap: round; }
.scene .s-pulse{ fill: none; stroke: var(--accent); stroke-width: 3;
                 stroke-linecap: round; }
.scene .s-scan { fill: none; stroke: color-mix(in srgb, var(--accent) 70%, #fff);
                 stroke-width: 2.5; stroke-linecap: round; }

/* ---------------------------------------------------- Loop-Animationen -- */
@keyframes a-pole    { to { transform: translateY(26px); } }
@keyframes a-rise    { 0%   { opacity: 0; transform: translateY(14px) scaleY(.8); }
                       22%  { opacity: 1; }
                       100% { opacity: 0; transform: translateY(-30px) scaleY(1.15); } }
@keyframes a-toss    { 0%, 100% { transform: translateY(0) rotate(0deg); }
                       45%      { transform: translateY(-6px) rotate(-3deg); } }
@keyframes a-lift    { 0%, 100% { transform: translateY(6px) rotate(-2deg); }
                       50%      { transform: translateY(-8px) rotate(2deg); } }
@keyframes a-pulse   { 0%   { transform: scaleX(.35); opacity: 0; }
                       35%  { opacity: .85; }
                       100% { transform: scaleX(1); opacity: 0; } }
@keyframes a-spin    { to { transform: rotate(360deg); } }
@keyframes a-eye     { 0%, 100% { transform: scale(1); }
                       50%      { transform: scale(.42); } }
@keyframes a-flash   { 0%, 88%, 100% { opacity: .35; } 92% { opacity: 1; } }
@keyframes a-swing   { 0%, 100% { transform: rotate(-4deg); }
                       50%      { transform: rotate(4deg); } }
@keyframes a-hem     { 0%, 100% { transform: skewX(-2deg); }
                       50%      { transform: skewX(2deg); } }
@keyframes a-trolley { 0%, 100% { transform: translateX(124px); }
                       50%      { transform: translateX(172px); } }
@keyframes a-cable   { 0%, 100% { transform: scaleY(1); }
                       50%      { transform: scaleY(1.55); } }
@keyframes a-hook    { 0%, 100% { transform: translateY(0); }
                       50%      { transform: translateY(17px); } }
@keyframes a-jib     { 0%, 100% { transform: rotate(-.9deg); }
                       50%      { transform: rotate(.9deg); } }
@keyframes a-bar     { 0%, 100% { transform: scaleY(.22); }
                       50%      { transform: scaleY(1); } }
@keyframes a-scan    { 0%   { transform: translateX(0); opacity: 0; }
                       12%  { opacity: .9; }
                       88%  { opacity: .9; }
                       100% { transform: translateX(96px); opacity: 0; } }

.a-pole { animation: a-pole 1.6s linear infinite; }

.a-heat > *, .a-steam > * { animation: a-rise 2.8s ease-out infinite; }
.a-heat > *:nth-child(2), .a-steam > *:nth-child(2) { animation-delay: .93s; }
.a-heat > *:nth-child(3), .a-steam > *:nth-child(3) { animation-delay: 1.86s; }

.a-pan { animation: a-toss 2.8s ease-in-out infinite; transform-origin: 104px 132px; }

.a-lift   { animation: a-lift 2.2s ease-in-out infinite; transform-origin: 102px 112px; }
.a-pulse1 { animation: a-pulse 2.4s ease-out infinite; transform-origin: 102px 168px; }
.a-pulse2 { animation: a-pulse 2.4s ease-out infinite 1.2s; transform-origin: 102px 176px; }

.a-iris__blades { animation: a-spin 14s linear infinite; transform-origin: 102px 95px; }
.a-iris__eye    { animation: a-eye 3.6s ease-in-out infinite; transform-origin: 102px 95px; }
.a-flash        { animation: a-flash 4.2s steps(1, end) infinite; }

.a-swing  { animation: a-swing 3.8s ease-in-out infinite; transform-origin: 102px 60px; }
.a-swing2 { animation: a-swing 3.8s ease-in-out infinite .6s; transform-origin: 74px 60px; }
.a-hem    { animation: a-hem 3.8s ease-in-out infinite; transform-origin: 102px 118px; }
.a-hem2   { animation: a-hem 3.8s ease-in-out infinite; transform-origin: 102px 118px; }

.a-jib     { animation: a-jib 9s ease-in-out infinite; transform-origin: 100px 40px; }
/* Ruheposition mitten auf dem Ausleger — wichtig für reduced-motion:
   ohne Animation stünde die Laufkatze sonst bei x=0 neben dem Kran */
.a-trolley { transform: translateX(148px); animation: a-trolley 6.4s ease-in-out infinite; }
.a-cable   { animation: a-cable 6.4s ease-in-out infinite; transform-origin: 0 65px; }
.a-hook    { animation: a-hook 6.4s ease-in-out infinite; }

.a-bars rect { animation: a-bar 1.3s ease-in-out infinite; transform-origin: 0 110px; }
.a-bars rect:nth-child(1) { animation-delay: -.10s; }
.a-bars rect:nth-child(2) { animation-delay: -.58s; }
.a-bars rect:nth-child(3) { animation-delay: -.31s; }
.a-bars rect:nth-child(4) { animation-delay: -.80s; }
.a-bars rect:nth-child(5) { animation-delay: -.19s; }
.a-bars rect:nth-child(6) { animation-delay: -.65s; }
.a-scan { animation: a-scan 3.4s ease-in-out infinite; }

/* --------------------------------------------------------------- PANEL */
.panel {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 20;
  width: min(360px, calc(100% - var(--pad) * 2));
}
.panel__view { display: grid; gap: 10px; }
.panel__view[hidden] { display: none; }

.panel__box {
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper-hi) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px 18px 18px;
  display: grid;
  gap: 10px;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray);
}
.panel__num { color: var(--ink); }
.panel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, var(--ink));
  flex: none;
}
.panel__lead,
.panel__title {
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -.028em;
  line-height: 1.06;
  text-transform: uppercase;
}
.panel__text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.68;
  color: var(--ink-soft);
}
.panel__meta { display: grid; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.panel__meta > div { display: flex; gap: 10px; align-items: baseline; }
.panel__meta dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  color: var(--gray);
  width: 62px;
  flex: none;
}
.panel__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
}
.panel__flag {
  color: var(--gray);
  font-size: 9px;
  letter-spacing: .16em;
}

.panel__hint,
.panel__back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper-hi) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 16px;
  text-align: left;
}
.panel__hint .ico { width: 16px; height: 16px; }
.panel__back {
  transition: background .3s var(--ease), color .3s var(--ease);
}
.panel__back:hover { background: var(--ink); color: var(--paper); }

/* -------------------------------------------------------------- STEPPER */
.stepper {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  z-index: 20;
  display: grid;
}
.stepper__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper-hi) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 15px;
  line-height: 1;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.stepper__btn + .stepper__btn { border-top: 0; }
.stepper__btn:hover { background: var(--ink); color: var(--paper); }

.map__legend {
  position: absolute;
  right: var(--pad);
  top: calc(var(--head-h) + 14px);
  z-index: 20;
  color: var(--ink-soft);
}

/* Nutzungsbedingung der Kartendaten (ODbL) */
.map__credit {
  position: absolute;
  left: var(--pad);
  top: calc(var(--head-h) + 14px);
  z-index: 20;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
}
.map__credit a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 640px) {
  /* unten sitzt das Panel — die Attribution weicht nach oben aus */
  .map__credit { top: 10px; left: var(--pad); }
  .map__legend { display: none; }
  .places__note { font-size: 13px; }
}

@media (max-width: 720px) {
  :root { --scene-size: 150px; }
  .map { height: clamp(560px, 86svh, 820px); }
  .panel { width: calc(100% - var(--pad) * 2); }

  /* Der Stepper wandert nach oben rechts — unten sitzt das Panel */
  .stepper {
    top: calc(var(--head-h) + 10px);
    bottom: auto;
    grid-auto-flow: column;
  }
  .stepper__btn { width: 40px; height: 40px; }
  .stepper__btn + .stepper__btn { border-top: 1px solid var(--ink); border-left: 0; }

  /* kompaktere Marker, damit sich acht Standorte nicht überlagern */
  .marker__pill { padding: 6px 9px 6px 8px; font-size: 9.5px; letter-spacing: .1em; gap: 5px; }
  .marker__pill .ico { width: 12px; height: 12px; }
  .marker__stem { height: 30px; }
  .map.is-zoomed .marker.is-active .marker__stem { height: 46px; }
}

.noscript {
  padding: 18px var(--pad);
  color: var(--gray);
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------- BRANCHEN */
.index {
  padding-bottom: clamp(40px, 6vw, 90px);
  scroll-margin-top: var(--head-h);
}
.index__title {
  font-size: clamp(2.1rem, 6.6vw, 5.6rem);
  font-weight: 900;
  letter-spacing: -.042em;
  line-height: .92;
  text-transform: uppercase;
}
.index__intro {
  font-family: var(--font-mono);
  font-size: clamp(11px, .92vw, 13px);
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-top: 8px;
}

.index__list { border-top: 1px solid var(--line); }

.entry {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1.5fr) minmax(150px, .85fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: clamp(14px, 2.4vw, 34px);
  row-gap: 8px;
  padding: clamp(20px, 2.6vw, 34px) var(--pad);
  border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease);
}
.entry::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gray);
  padding-top: .55em;
}
.entry::after {
  content: "";
  position: absolute;
  left: calc(var(--pad) + 2.1rem);
  top: calc(clamp(20px, 2.6vw, 34px) + .78em);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.entry:hover { background: color-mix(in srgb, var(--paper-hi) 70%, transparent); }
.entry:hover::after {
  transform: scale(1.5);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
}

.entry__title {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
}
.entry__ico { width: .78em; height: .78em; stroke: var(--accent); stroke-width: 2; flex: none; }
.entry__kicker { grid-column: 2; grid-row: 2; color: var(--gray); align-self: start; }
.entry__desc {
  grid-column: 3;
  grid-row: 1 / 3;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.entry__meta {
  grid-column: 4;
  grid-row: 1;
  display: grid;
  gap: 4px;
  color: var(--gray);
  letter-spacing: .08em;
}
.entry__btn {
  grid-column: 4;
  grid-row: 2;
  justify-self: start;
  align-self: end;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color .3s var(--ease), letter-spacing .3s var(--ease);
}
.entry__btn:hover { border-color: var(--ink); letter-spacing: .18em; }

@media (max-width: 1080px) {
  .entry {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto auto;
  }
  .entry__meta { grid-column: 2; grid-row: 3; }
  .entry__btn  { grid-column: 3; grid-row: 3; align-self: start; }
  .entry__desc { grid-row: 1 / 3; }
}

@media (max-width: 760px) {
  .entry {
    grid-template-columns: 3rem minmax(0, 1fr);
    row-gap: 10px;
  }
  .entry::after { left: calc(var(--pad) + 1.35rem); }
  .entry__desc { grid-column: 2; grid-row: 3; }
  .entry__meta { grid-column: 2; grid-row: 4; }
  .entry__btn  { grid-column: 2; grid-row: 5; justify-self: start; }
}

/* --------------------------------------------------------------- FOOTER */
.site-foot {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(18px, 3vw, 44px);
  padding: clamp(22px, 3vw, 34px) var(--pad);
  scroll-margin-top: var(--head-h);
}
.site-foot__role { margin-right: auto; }
.site-foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(16px, 2.4vw, 36px);
}
.site-foot a {
  position: relative;
  padding-bottom: 3px;
}
.site-foot a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.site-foot a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-foot a[aria-current="page"]::after { transform: scaleX(1); }
.site-foot__legal a { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.site-foot :focus-visible { outline-color: var(--paper); }
body.theme-dark .site-foot { background: #000; border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------- REDUZIERTE BEWEGUNG */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------------- PRINT */
@media print {
  .grain, .map, .site-head, .menu, .hero__haze, .stepper { display: none !important; }
  body { background: #fff; }
}

/* =============================================================================
   UNTERSEITEN
   ========================================================================== */

/* --------------------------------------------------------- SEITENKOPF ---- */
.page-hero {
  position: relative;
  min-height: 86svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(24px, 4vh, 56px);
  padding: calc(var(--head-h) + clamp(16px, 4vh, 46px)) var(--pad) var(--pad);
  overflow: hidden;
  isolation: isolate;
}
.page-hero--short { min-height: 62svh; }

.page-hero__haze {
  position: absolute;
  z-index: -1;
  top: 46%;
  left: 66%;
  translate: -50% -50%;
  width: clamp(400px, 60vw, 900px);
  aspect-ratio: 1 / 1.24;
  background: url("../img/haze.svg") center / contain no-repeat;
  opacity: .55;
  will-change: transform;
  animation: hazeDrift 40s ease-in-out infinite alternate;
}

.page-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: end;
  align-content: center;
  column-gap: clamp(24px, 3.5vw, 56px);
  row-gap: clamp(26px, 4vh, 52px);
}
@media (max-width: 900px) {
  .page-hero__body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- KIT ---- */
.kit { border-top: 1px solid var(--line); padding-bottom: clamp(40px, 6vw, 90px); }
.kit__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border-top: 1px solid var(--line);
}
.kit__item {
  padding: clamp(20px, 2.4vw, 32px) var(--pad);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 10px;
  align-content: start;
}
.kit__item h3 {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.kit__item p {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------- CTA-BAND ---- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(36px, 6vw, 80px) var(--pad);
}
.cta-band__title {
  font-size: clamp(1.6rem, 4.6vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .96;
  text-transform: uppercase;
  max-width: 18ch;
}
.cta-band__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--paper);
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.cta-band__link .ico { width: 18px; height: 18px; }
.cta-band__link:hover { background: var(--paper); color: var(--ink); }
.cta-band :focus-visible { outline-color: var(--paper); }

/* ------------------------------------------------------------ KONTAKT ---- */
.contact { border-top: 1px solid var(--line); }
.contact__list { border-top: 1px solid var(--line); }
.contact__row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(20px, 3vw, 38px) var(--pad);
  border-bottom: 1px solid var(--line);
}
.contact__big {
  font-size: clamp(1.4rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: none;
  word-break: break-word;
}
a.contact__big { border-bottom: 2px solid transparent; transition: border-color .3s var(--ease); }
a.contact__big:hover { border-bottom-color: var(--ink); }
.contact__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--gray);
}
@media (max-width: 760px) {
  .contact__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---------------------------------------------------------------- FAQ ---- */
.faq { padding-bottom: clamp(40px, 6vw, 90px); }
.faq__list { border-top: 1px solid var(--line); }
.faq__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(20px, 2.6vw, 34px) var(--pad);
  border-bottom: 1px solid var(--line);
}
.faq__item h3 {
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-transform: uppercase;
}
.faq__item p {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .faq__item { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .stage { min-height: 0 !important; }
  .stage__pin { position: static; height: auto; padding-block: clamp(50px, 10vh, 110px); }
  .stage__obj img { transform: none; }
  .stage__ghost { opacity: .35 !important; transform: none; }
  .stage__note, .stage__id, .stage__use { opacity: 1 !important; transform: none !important; }
}

/* =============================================================================
   DUNKLE SEITE
   Eigener Auftritt für die Ausrüstung: dieselben Bausteine, invertierte
   Tokens. Die Studioaufnahmen sitzen auf Schwarz, wo sie hingehören.
   ========================================================================== */
body.theme-dark {
  --paper:      #0c0c0b;
  --paper-hi:   #171715;
  --paper-lo:   #131312;
  --ink:        #f2f2f0;
  --ink-soft:   #cfcfca;
  --gray:       #93938c;
  --gray-lo:    #6e6e68;
  --line:       rgba(242, 242, 240, .2);
  --line-soft:  rgba(242, 242, 240, .1);
  color-scheme: dark;
}
/* Auf Schwarz muss das Korn aufhellen statt abdunkeln */
body.theme-dark .grain { mix-blend-mode: screen; opacity: .09; }
body.theme-dark .grain--light { mix-blend-mode: multiply; opacity: .16; }
body.theme-dark .dust { mix-blend-mode: screen; opacity: .14; }
body.theme-dark .site-head::before { background: color-mix(in srgb, #0c0c0b 82%, transparent); }
body.theme-dark .brand__mark { background: var(--ink); color: #0c0c0b; }
body.theme-dark .cta-band { background: var(--paper-hi); }
body.theme-dark .cta-band__link { border-color: var(--ink); }
body.theme-dark .cta-band__link:hover { background: var(--ink); color: #0c0c0b; }
body.theme-dark .site-foot { background: #000; color: var(--ink); border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------- KONTAKT ALS SATZBILD */
.mail-hero {
  padding: calc(var(--head-h) + clamp(40px, 10vh, 120px)) var(--pad) clamp(30px, 6vh, 70px);
  border-bottom: 1px solid var(--line);
}
.mail-hero__kicker { color: var(--gray); margin-bottom: clamp(20px, 4vh, 40px); }
.mail-hero__link {
  display: block;
  font-size: clamp(1.9rem, 8.4vw, 8rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .88;
  word-break: break-word;
}
.mail-hero__link span { display: inline-block; transition: transform .4s var(--ease); }
.mail-hero__link:hover span { transform: translateX(clamp(6px, 1.4vw, 22px)); }
.mail-hero__note {
  font-family: var(--font-mono);
  font-size: clamp(11px, .92vw, 13px);
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 48ch;
  margin-top: clamp(22px, 4vh, 44px);
}


/* ------------------------------------------------------------ RECHTSSEITEN */
.legal {
  max-width: 76ch;
  padding: calc(var(--head-h) + clamp(36px, 8vh, 90px)) var(--pad) clamp(50px, 8vw, 110px);
}
.legal h1 {
  font-size: clamp(2rem, 6vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .92;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 4vh, 44px);
}
.legal h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin: clamp(26px, 4vh, 40px) 0 10px;
}
.legal p, .legal li {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.legal ul { list-style: none; display: grid; gap: 6px; margin-top: 6px; }
.legal li::before { content: "— "; color: var(--gray); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal .legal__stand { color: var(--gray); margin-top: clamp(26px, 4vh, 40px); }

/* -------------------------------------------------------------- LEISTUNGEN */
.svc { border-top: 1px solid var(--line); }
.svc__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1.45fr);
  align-items: start;
  column-gap: clamp(14px, 2.4vw, 34px);
  row-gap: 10px;
  padding: clamp(24px, 3vw, 42px) var(--pad);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--head-h) + 10px);
}
.svc__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gray);
  padding-top: .6em;
}
.svc__title {
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .95;
  text-transform: uppercase;
}
.svc__body { display: grid; gap: 14px; }
.svc__desc {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc__tags li {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 5px 10px;
}
@media (max-width: 820px) {
  .svc__row { grid-template-columns: 3rem minmax(0, 1fr); }
  .svc__body { grid-column: 2; }
}

/* Ablauf-Schritte */
.steps { counter-reset: step; border-top: 1px solid var(--line); }
.steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.steps__item {
  counter-increment: step;
  padding: clamp(20px, 2.4vw, 32px) var(--pad);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  align-content: start;
}
.steps__item::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--gray);
}
.steps__item h3 {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.steps__item p {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* =============================================================================
   BEWEGUNG
   Alles hinter der .js-Klasse: ohne JavaScript bleibt jeder Inhalt sichtbar.
   ========================================================================== */

/* ------------------------------------------------- HERO-EINFAHRT (einmalig) */
.hero__line { display: block; overflow: hidden; }
.hero__line-in { display: block; }
.js .hero__line-in {
  transform: translateY(112%);
  transition: transform .95s cubic-bezier(.19, .82, .16, 1);
  transition-delay: var(--ad, 0s);
}
.js.is-loaded .hero__line-in { transform: none; }

.js .hero .eyebrow,
.js .hero__aside,
.js .hero__foot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;
}
.js.is-loaded .hero .eyebrow,
.js.is-loaded .hero__aside,
.js.is-loaded .hero__foot { opacity: 1; transform: none; }

/* Unterseiten: grosse Titel fahren weich ein */
.js .mail-hero > *, .js .legal > h1, .js .stagehead > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .mail-hero > :nth-child(2), .js .legal > h1, .js .stagehead > :nth-child(2) { transition-delay: .08s; }
.js .mail-hero > :nth-child(3), .js .stagehead > :nth-child(3) { transition-delay: .16s; }
.js.is-loaded .mail-hero > *, .js.is-loaded .legal > h1, .js.is-loaded .stagehead > * { opacity: 1; transform: none; }

/* ------------------------------------------------------- SCROLL-REVEALS --- */
.js .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--rd, 0s);
}
.js .rv.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------ MENÜ-CHOREOGRAFIE - */
.menu__list li { --i: 0; }
.menu__list li:nth-child(2) { --i: 1; }
.menu__list li:nth-child(3) { --i: 2; }
.menu__list li:nth-child(4) { --i: 3; }
.menu__list li:nth-child(5) { --i: 4; }
.menu__list li:nth-child(6) { --i: 5; }
.js .menu__list li,
.js .menu__foot {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.js .menu.is-open .menu__list li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * .05s + .1s);
}
.js .menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: .42s; }

/* ----------------------------------------------------------------- TICKER - */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: clamp(14px, 2vw, 24px) 0;
  user-select: none;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: tickerRun 42s linear infinite;
}
.ticker__track span {
  flex: none;
  white-space: nowrap;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ink);
  paint-order: stroke;
}
@keyframes tickerRun { to { transform: translateX(-50%); } }

/* -------------------------------------------- REDUZIERTE BEWEGUNG: alles an */
@media (prefers-reduced-motion: reduce) {
  .js .hero__line-in,
  .js .hero .eyebrow, .js .hero__aside, .js .hero__foot,
  .js .mail-hero > *, .js .legal > h1,
  .js .rv,
  .js .menu__list li, .js .menu__foot {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ticker__track { animation: none; }
}

/* =============================================================================
   KONFIGURATOR
   ========================================================================== */
.cfg {
  min-height: 86svh;
  padding: calc(var(--head-h) + clamp(30px, 7vh, 80px)) var(--pad) clamp(50px, 8vh, 100px);
  max-width: 1200px;
}
.cfg__kicker { color: var(--gray); }
.cfg__title {
  font-size: clamp(2.2rem, 7vw, 5.6rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .9;
  text-transform: uppercase;
  margin: 14px 0 12px;
}
.cfg__sub {
  font-family: var(--font-mono);
  font-size: clamp(11px, .92vw, 13px);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 52ch;
}
.cfg__progress {
  display: flex;
  gap: clamp(14px, 3vw, 34px);
  margin-top: clamp(24px, 4vh, 40px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cfg__progress li {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--gray-lo);
  transition: color .3s var(--ease);
}
.cfg__progress li.is-on { color: var(--ink); }

.cfg__viewport { position: relative; margin-top: clamp(26px, 5vh, 48px); }

.cfg__step[hidden] { display: none; }
.js .cfg__step { animation: cfgIn .45s var(--ease) both; }
/* Senkrecht statt waagrecht: eine Verschiebung nach rechts schob den Schritt
   auf schmalen Schirmen über den Rand und erzeugte Querscrollen. */
@keyframes cfgIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.cfg__q {
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
  outline: none;
}
.cfg__hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--gray);
  margin-top: 6px;
  text-transform: uppercase;
}

.cfg__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vh, 32px);
}
.cfg__grid--big { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.cfg__chip {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 14px 20px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.cfg__chip:hover { transform: translateY(-2px); }
.cfg__chip.is-sel { background: var(--ink); color: var(--paper); }

.cfg__card {
  border: 1px solid var(--ink);
  padding: clamp(16px, 2vw, 24px);
  display: grid;
  gap: 8px;
  text-align: left;
  align-content: start;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.cfg__card:hover { transform: translateY(-3px); }
.cfg__card strong {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.cfg__card span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--gray);
}
.cfg__card.is-sel { background: var(--ink); color: var(--paper); }
.cfg__card.is-sel span { color: color-mix(in srgb, var(--paper) 70%, transparent); }

.cfg__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: clamp(22px, 4vh, 36px);
}
.cfg__back, .cfg__next, .cfg__copy, .cfg__again {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cfg__back { color: var(--gray); }
.cfg__back:hover { color: var(--ink); }
.cfg__next {
  border: 1px solid var(--ink);
  padding: 13px 22px;
  transition: background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.cfg__next:not(:disabled):hover { background: var(--ink); color: var(--paper); }
.cfg__next:disabled { opacity: .32; cursor: not-allowed; }

.cfg__result {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(20px, 3vh, 32px);
}
.cfg__resultbox {
  border: 1px solid var(--ink);
  padding: clamp(20px, 3vw, 36px);
  display: grid;
  gap: 14px;
  background: var(--paper-hi);
}
.cfg__resumee {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray);
}
.cfg__price {
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  display: grid;
  gap: 8px;
}
.cfg__price-pre {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--gray);
}
.cfg__pricenote {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.cfg__actions { display: grid; gap: 12px; align-content: start; }
.cfg__send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .13em;
  transition: transform .25s var(--ease);
}
.cfg__send:hover { transform: translateY(-2px); }
.cfg__copy {
  border: 1px solid var(--ink);
  padding: 14px 22px;
  text-align: left;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.cfg__copy:hover { background: var(--ink); color: var(--paper); }
.cfg__again { color: var(--gray); text-align: left; padding: 6px 0; }
.cfg__again:hover { color: var(--ink); }

@media (max-width: 820px) {
  .cfg__result { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .js .cfg__step { animation: none; }
}

/* Richtpreise in den Leistungszeilen */
.svc__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  flex-wrap: wrap;
}
.svc__price strong {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.svc__price span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
}
.svc__legalnote {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 68ch;
  padding: clamp(18px, 3vw, 30px) var(--pad) clamp(24px, 4vw, 40px);
}
.svc__legalnote a { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   SERIE EINS (Arbeiten)
   ========================================================================== */
.serie { border-top: 1px solid var(--line); }
.serie__list { counter-reset: none; }
.serie__slot {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.6fr) auto;
  align-items: start;
  gap: clamp(14px, 2.4vw, 34px);
  padding: clamp(24px, 3vw, 44px) var(--pad);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .35s var(--ease);
}
.serie__slot:hover { background: color-mix(in srgb, var(--paper-hi) 70%, transparent); }
.serie__num {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--paper-lo);
  -webkit-text-stroke: 1.2px var(--ink);
}
.serie__body { display: grid; gap: 10px; max-width: 60ch; }
.serie__name {
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.serie__desc {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.serie__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--gray);
}
.serie__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  border: 1px solid var(--ink);
  padding: 8px 12px;
  align-self: start;
  white-space: nowrap;
}
.serie__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--gray);
  max-width: 62ch;
  padding: clamp(18px, 3vw, 30px) var(--pad) clamp(26px, 4vw, 46px);
}
@media (max-width: 720px) {
  .serie__slot { grid-template-columns: 3rem minmax(0, 1fr); }
  .serie__status { grid-column: 2; justify-self: start; }
}

/* Über-mich */
.about { border-top: 1px solid var(--line); padding-bottom: clamp(30px, 5vw, 70px); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 70px);
  padding: 0 var(--pad);
  align-items: start;
}
.about__text {
  font-family: var(--font-mono);
  font-size: clamp(11.5px, 1vw, 13.5px);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 58ch;
}
.about__facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.about__facts > div {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.about__facts dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  color: var(--gray);
  width: 96px;
  flex: none;
}
.about__facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .03em;
}
@media (max-width: 820px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   FEINHEITEN — die kleinen Dinge, die Freude machen
   ========================================================================== */

/* Markierter Text im Markenlook */
::selection { background: var(--ink); color: var(--paper); }
body.theme-dark ::selection { background: var(--paper); color: #0c0c0b; }

/* Seitenübergänge: weiches Blenden statt Weiss-Blitz. Browser ohne
   View-Transitions ignorieren den Block einfach. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .26s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .38s var(--ease) both; }
@keyframes vtOut { to   { opacity: 0; } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Magnetische Elemente: ziehen sich sanft zum Zeiger (nur feine Zeiger,
   gesetzt per JS). translate statt transform — kollidiert nicht mit Hovers. */
.mag {
  translate: var(--mx, 0) var(--my, 0);
  transition: translate .22s cubic-bezier(.2, .8, .3, 1);
}

/* Taktiles Drücken */
.cfg__chip:active, .cfg__card:active, .cta-band__link:active,
.cfg__send:active, .entry__btn:active, .stepper__btn:active,
.burger:active, .cfg__next:active, .panel__back:active {
  scale: .965;
}
.cfg__chip, .cfg__card, .cta-band__link, .cfg__send, .entry__btn,
.stepper__btn, .burger, .cfg__next, .panel__back {
  transition-property: scale, background, color, transform, translate, opacity, border-color, letter-spacing;
  transition-duration: .18s;
}

/* Letter-Roll: Text rollt beim Überfahren eine Zeile nach oben */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.roll > span {
  display: block;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
.roll::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
a:hover .roll > span, a:focus-visible .roll > span { transform: translateY(-100%); }
a:hover .roll::after,  a:focus-visible .roll::after  { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .roll > span, .roll::after { transition: none; }
}

/* Ticker hält an, wenn man ihn liest */
.ticker:hover .ticker__track { animation-play-state: paused; }

/* Lesefortschritt: haarfeine Linie unter der Kopfzeile */
.pageline {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 950;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
  pointer-events: none;
}
body.theme-dark .pageline { background: var(--paper); }

/* ----------------------------------------------------- TAG/NACHT-KARTE --- */
.map__mode {
  position: absolute;
  right: var(--pad);
  top: calc(var(--head-h) + 42px);
  z-index: 20;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper-hi) 92%, transparent);
  padding: 8px 14px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.map__mode:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 640px) {
  .map__mode { top: 10px; }
}

/* Die Karte kippt in die Nacht: Interface invertiert mit */
.map.is-night { background: #16161a; }
.map.is-night .map__legend { color: #b9b9b4; }
.map.is-night .map__credit { color: #84847f; }
.map.is-night .map__credit a { color: #b9b9b4; }
.map.is-night .map__mode {
  border-color: #f2f2f0;
  color: #f2f2f0;
  background: color-mix(in srgb, #16161a 88%, transparent);
}
.map.is-night .map__mode:hover { background: #f2f2f0; color: #16161a; }
.map.is-night .marker__pill {
  background: #f2f2f0;
  color: #0b0b0b;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
}
.map.is-night .marker__stem {
  background: linear-gradient(#f2f2f0 0 45%, var(--accent) 100%);
}
.map.is-night .panel__box,
.map.is-night .panel__hint,
.map.is-night .panel__back,
.map.is-night .stepper__btn {
  background: color-mix(in srgb, #1b1b20 92%, transparent);
  border-color: #f2f2f0;
  color: #f2f2f0;
}
.map.is-night .panel__lead, .map.is-night .panel__title { color: #f2f2f0; }
.map.is-night .panel__text, .map.is-night .panel__meta dd { color: #cfcfca; }
.map.is-night .panel__head, .map.is-night .panel__meta dt,
.map.is-night .panel__flag { color: #93938c; }
.map.is-night .panel__num { color: #f2f2f0; }
.map.is-night .panel__back:hover,
.map.is-night .stepper__btn:hover { background: #f2f2f0; color: #16161a; }

/* =============================================================================
   GERÄTE-BÜHNE (Ausrüstung)
   Ein Gerät pro Viewport, vor riesiger Outline-Typo. Der Scrollfortschritt
   (--p aus JS) steuert Objekt, Geist-Typo und die vier Spec-Notizen.
   ========================================================================== */
.stagehead {
  min-height: 64svh;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: calc(var(--head-h) + clamp(30px, 7vh, 70px)) var(--pad) clamp(30px, 6vh, 60px);
}
.stagehead__kicker { color: var(--gray); }
.stagehead__title {
  font-size: clamp(2.6rem, 9vw, 8rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .88;
  text-transform: uppercase;
}
.stagehead__note {
  font-family: var(--font-mono);
  font-size: clamp(11px, .92vw, 13px);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 44ch;
}
.stagehead__hint {
  font-family: var(--font-mono);
  font-size: 16px;
  animation: nudge 2.4s ease-in-out infinite;
  width: max-content;
}

.stage {
  position: relative;
  min-height: 330svh;
  border-top: 1px solid var(--line);
}
.stage--alt { background: var(--paper-hi); }

.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Geist-Typo: riesig, nur Kontur, wandert langsam gegen die Scrollrichtung */
.stage__ghost {
  position: absolute;
  z-index: 0;
  font-size: clamp(6rem, 24vw, 20rem);
  font-weight: 900;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 22%, transparent);
  user-select: none;
  opacity: clamp(0, calc(var(--p, .5) * 5), 1);
  transform: translateX(calc((var(--p, .5) - .5) * -10vw));
  will-change: transform, opacity;
}

.stage__obj {
  position: relative;
  z-index: 1;
  margin: 0;
}
.stage__obj img {
  width: min(66vw, 560px);
  height: auto;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .55));
  transform:
    translateY(calc((0.52 - min(var(--p, .5), .52)) * 24svh))
    scale(calc(.78 + min(var(--p, .5), .55) * .48))
    rotate(calc((var(--p, .5) - .5) * 6deg));
  will-change: transform;
}
.stage__obj--wide img { width: min(80vw, 720px); }

.stage__id {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  top: calc(var(--head-h) + clamp(16px, 4vh, 44px));
  opacity: clamp(0, calc((var(--p, .5) - .04) * 7), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p, .5) - .04) * 7), 1)) * 16px));
}
.stage__index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gray);
}
.stage__name {
  font-size: clamp(1.8rem, 4.6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .92;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Die vier Notizen: erscheinen nacheinander an den Bildrändern */
.stage__grid { display: contents; }
.stage__note {
  position: absolute;
  z-index: 2;
  width: min(200px, 26vw);
  border-top: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  padding-top: 10px;
  display: grid;
  gap: 4px;
  opacity: var(--n, 0);
  transform: translateY(calc((1 - var(--n, 0)) * 16px));
}
.stage__note strong {
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.stage__note span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--gray);
}
.stage__note--1 { left: var(--pad); top: 30%; --n: clamp(0, calc((var(--p, 0) - .3) * 7), 1); }
.stage__note--2 { right: var(--pad); top: 36%; text-align: right; justify-items: end;
                  --n: clamp(0, calc((var(--p, 0) - .44) * 7), 1); }
.stage__note--3 { left: calc(var(--pad) + 2vw); bottom: 22%;
                  --n: clamp(0, calc((var(--p, 0) - .58) * 7), 1); }
.stage__note--4 { right: calc(var(--pad) + 1vw); bottom: 17%; text-align: right; justify-items: end;
                  --n: clamp(0, calc((var(--p, 0) - .72) * 7), 1); }

.stage__use {
  position: absolute;
  z-index: 2;
  bottom: clamp(18px, 4vh, 40px);
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: clamp(0, calc((var(--p, 0) - .84) * 9), 1);
}

@media (max-width: 860px) {
  .stage { min-height: 280svh; }
  .stage__pin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 2.5vh, 22px);
    padding: calc(var(--head-h) + 12px) var(--pad) 56px;
  }
  .stage__ghost {
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(4.4rem, 21vw, 8rem);
  }
  .stage__id { position: static; order: 1; transform: none; }
  .stage__obj { order: 2; align-self: center; }
  .stage__obj img { width: min(74vw, 420px); }
  .stage__grid {
    display: grid;
    order: 3;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .stage__note { position: static; width: auto; transform: none; text-align: left; justify-items: start; }
  .stage__use { position: static; order: 4; translate: none; align-self: start; }
}

/* --------------------------------------------------------- 3D-MODELL ----- */
.stage__mv {
  display: block;
  width: min(80vw, 720px);
  height: min(52vw, 460px);
  --poster-color: transparent;
  background: transparent;
  cursor: grab;
  /* dieselbe Scroll-Choreografie wie das Standbild */
  transform:
    translateY(calc((0.52 - min(var(--p, .5), .52)) * 24svh))
    scale(calc(.82 + min(var(--p, .5), .55) * .38));
  will-change: transform;
}
.stage__mv:active { cursor: grabbing; }
.stage__mv img { width: 100%; height: 100%; object-fit: contain; }

.stage__mv-hint {
  position: absolute;
  z-index: 2;
  bottom: clamp(52px, 9vh, 84px);
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--gray);
  opacity: clamp(0, calc((var(--p, 0) - .35) * 6), 1);
}
@media (max-width: 860px) {
  .stage__mv { width: min(88vw, 460px); height: min(58vw, 300px); }
  .stage__mv-hint { position: static; translate: none; order: 5; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__mv { transform: none; }
}

/* Nachzügler aus dem Review */
.entry__btn--solo { display: inline-block; }
.index__head--tight { padding-top: 0; }
@media print {
  .stage { min-height: 0 !important; }
  .stage__pin { position: static !important; height: auto !important; }
  .stage__mv, .stage__ghost, .ticker, .pageline { display: none !important; }
}

/* Direkter Weg vom Karten-Panel in den Konfigurator */
.panel__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: letter-spacing .3s var(--ease);
}
.panel__cta:hover { letter-spacing: .2em; }
.map.is-night .panel__cta { background: #f2f2f0; color: #16161a; }

/* «DEIN BETRIEB»-Marker: bewusst leer — gestrichelt statt gefüllt */
.marker--self { --accent: var(--ink); }
.marker--self .marker__pill {
  background: color-mix(in srgb, var(--paper-hi) 86%, transparent);
  color: var(--ink);
  border: 1px dashed var(--ink);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.marker__plus {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.marker--self .marker__stem {
  background: none;
  border-left: 1.5px dashed var(--ink);
  width: 0;
}
.marker--self .marker__dot {
  background: transparent;
  border: 1.5px dashed var(--ink);
  box-shadow: none;
}
.marker--self::after { display: none; }
.map.is-night .marker--self .marker__pill {
  background: color-mix(in srgb, #16161a 80%, transparent);
  color: #f2f2f0;
  border-color: #f2f2f0;
}
.map.is-night .marker--self .marker__stem { border-color: #f2f2f0; }
.map.is-night .marker--self .marker__dot { border-color: #f2f2f0; }

/* Rezeptionsklingel (Gastgeber-Szene): Knopfdruck + auslaufende Klangringe */
@keyframes a-ding {
  0%, 86%, 100% { transform: translateY(0); }
  90%           { transform: translateY(3px); }
}
@keyframes a-dingring {
  0%   { transform: scale(.35); opacity: 0; }
  6%   { opacity: .9; }
  55%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
.a-ding { animation: a-ding 3.4s ease-in-out infinite; transform-origin: 100px 150px; }
.a-dingring circle {
  animation: a-dingring 3.4s ease-out infinite .12s;
  transform-origin: 100px 108px;
}
.a-dingring circle:nth-child(2) { animation-delay: 1.82s; }


.places__note {
  margin-top: 14px;
  max-width: 46ch;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

/* =============================================================================
   GEBACKENE LADENFRONTEN
   Die Läden stecken als Geometrie im Karten-SVG (echte Projektion).
   Farben erben --accent über data-cat; die Choreografie feuert, sobald
   data-zoom-cat am Kartencontainer die Kategorie nennt.
   ========================================================================== */
.shop[data-cat="friseur"]    { --accent: var(--c-friseur); }
.shop[data-cat="restaurant"] { --accent: var(--c-restaurant); }
.shop[data-cat="cafe"]       { --accent: var(--c-cafe); }
.shop[data-cat="gym"]        { --accent: var(--c-gym); }
.shop[data-cat="fotografie"] { --accent: var(--c-fotografie); }
.shop[data-cat="mode"]       { --accent: var(--c-mode); }
.shop[data-cat="immobilien"] { --accent: var(--c-immobilien); }
.shop[data-cat="agentur"]    { --accent: var(--c-agentur); }
.shop[data-cat="gastgeber"]  { --accent: var(--c-gastgeber); }

/* Fassade — sie gehört zum Haus und ist immer da. Nur Markise, Schild und
   Requisiten warten auf den Zoom. */
.shop .shop-walk    { fill: #d9d9d3; }
.shop .shop-step    { fill: #c9c9c2; }
.shop .shop-glass   { fill: color-mix(in srgb, var(--accent) 26%, #1b1f24); }
.shop .shop-refl    { fill: #fff; opacity: .12; }
.shop .shop-matte   { fill: color-mix(in srgb, var(--accent) 40%, #3a3a34); }
.shop .shop-kasten2 { fill: #6d6d64; }
.shop .shop-blumen  { fill: #7d9a63; }
.shop .shop-upglass { fill: color-mix(in srgb, var(--accent) 26%, #2b2d32);
                      stroke: color-mix(in srgb, var(--accent) 25%, #fff);
                      stroke-width: .3; opacity: .82; }
.shop .shop-frame   { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, #fff);
                      stroke-width: .22; opacity: .55; }
.shop .shop-door    { fill: color-mix(in srgb, var(--accent) 45%, #000); }
.shop .shop-handle  { fill: none; stroke: #e8e8e2; stroke-width: .5;
                      stroke-linecap: round; }
.shop .shop-fascia  { fill: color-mix(in srgb, var(--accent) 62%, #0d0d0c); }
.shop .shop-awntop  { fill: color-mix(in srgb, var(--accent) 24%, #fff);
                      stroke: color-mix(in srgb, var(--accent) 55%, #000); stroke-width: .5; }
.shop .shop-awn-a   { fill: var(--accent);
                      stroke: color-mix(in srgb, var(--accent) 55%, #000); stroke-width: .5; }
.shop .shop-awn-b   { fill: #f6f6f2;
                      stroke: color-mix(in srgb, var(--accent) 55%, #000); stroke-width: .5; }
.shop .shop-sign    { font-family: var(--font-mono); font-weight: 700;
                      letter-spacing: .07em; fill: #fbfbf9; }
.shop .shop-boxside { fill: color-mix(in srgb, var(--accent) 40%, #77776f); }
.shop .shop-boxtop  { fill: color-mix(in srgb, var(--accent) 18%, #f2f2ee); }
.shop .shop-proptop { fill: #f4f4ef; stroke: #6d6d65; stroke-width: .2; }
.shop .shop-propline{ fill: none; stroke: #7c7c74; stroke-width: .35; stroke-linecap: round; }
.shop .shop-chair-s { fill: #7f7f77; }
.shop .shop-chair-t { fill: #a3a39a; }
.shop .shop-chair-l { fill: #8e8e85; }
.shop .shop-schirm-a{ fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 60%, #000);
                      stroke-width: .18; }
.shop .shop-schirm-b{ fill: #f6f6f2; stroke: color-mix(in srgb, var(--accent) 60%, #000);
                      stroke-width: .18; }
.shop .shop-kuebel-s{ fill: #5d5d56; }
.shop .shop-kuebel-t{ fill: #77776e; }
.shop .shop-gruen   { fill: #6f8a5c; stroke: #4c5c40; stroke-width: .2; }
.shop .shop-board   { fill: #74746b; stroke: #4a4a43; stroke-width: .18; }
.shop .shop-boardtext { fill: #e8e8e0; opacity: .8; }
.shop .shop-pole    { fill: #f4f4ef; stroke: #55554f; stroke-width: .2; }
.shop .shop-polewendel { fill: none; stroke: var(--accent); stroke-width: .34;
                      stroke-dasharray: 1.6 1.6; }
.shop .shop-case-s  { fill: color-mix(in srgb, var(--accent) 45%, #000); }
.shop .shop-case-t  { fill: color-mix(in srgb, var(--accent) 60%, #000); }
.shop .shop-kastenrahmen { fill: #23252a; stroke: #f2f2ee; stroke-width: .22; }
.shop .shop-expose  { fill: #fbfbf6; }
.shop .shop-icon    { fill: none; stroke: #fbfbf9; stroke-width: .7; stroke-linecap: round; }
.shop .shop-iconb   { fill: #fbfbf9; }
.shop .shop-arm     { fill: none; stroke: #2c2c28; stroke-width: .5; stroke-linecap: round; }
.shop .shop-plate   { fill: color-mix(in srgb, var(--accent) 70%, #0d0d0c);
                      stroke: #f2f2ee; stroke-width: .3; }
.shop .shop-person-b{ fill: #454852; }
.shop .shop-person-k{ fill: #6b5a4c; }
.shop .shop-person-s{ fill: #000; opacity: .12; }
/* Lichtschein: bei Tag gibt es keinen, nachts trägt er den halben Zauber */
.shop .shop-schein  { fill: #ffd894; opacity: 0; }
.map.is-night .shop .shop-schein { opacity: .16; }
.shop .shop-steam   { fill: none; stroke: color-mix(in srgb, var(--accent) 30%, #8b8b85);
                      stroke-width: .9; stroke-linecap: round; }

/* Dampf, Blitz und Bildschirm laufen als SMIL im SVG (siehe Generator).
   Eine CSS-Animation würde den Knoten in eine eigene Compositing-Ebene
   heben — und die rastert Chrome beim Zuschnitt in der Auflösung der
   Totale, womit das ganze Modell matschig wird. */

/* Nachtmodus: Glas leuchtet warm, Trottoir wird dunkel */
.map.is-night .shop .shop-walk    { fill: #303038; }
.map.is-night .shop .shop-step    { fill: #3a3a42; }
.map.is-night .shop .shop-glass   { fill: color-mix(in srgb, var(--accent) 12%, #ffd894); }
.map.is-night .shop .shop-upglass { fill: color-mix(in srgb, var(--accent) 14%, #f6c96f); opacity: .7; }
.map.is-night .shop .shop-frame   { stroke: color-mix(in srgb, var(--accent) 55%, #2a2a26); }
.map.is-night .shop .shop-awntop  { fill: color-mix(in srgb, var(--accent) 40%, #3a3a40); }
.map.is-night .shop .shop-awn-b   { fill: #cfcfc8; }
.map.is-night .shop .shop-proptop { fill: #45454a; }
.map.is-night .shop .shop-schirm-b { fill: #cfcfc8; }
.map.is-night .shop .shop-gruen    { fill: #3f4a36; }
.map.is-night .shop .shop-blumen   { fill: #46553a; }
.map.is-night .shop .shop-kasten2  { fill: #33333a; }
.map.is-night .shop .shop-refl     { opacity: .05; }
.map.is-night .shop .shop-matte    { fill: #2f2f36; }
.map.is-night .shop .shop-kuebel-s { fill: #2e2e34; }
.map.is-night .shop .shop-kuebel-t { fill: #3c3c42; }
.map.is-night .shop .shop-chair-s  { fill: #3a3a40; }
.map.is-night .shop .shop-chair-t  { fill: #4a4a50; }
.map.is-night .shop .shop-chair-l  { fill: #424248; }
.map.is-night .shop .shop-person-b { fill: #6a6e78; }
.map.is-night .shop .shop-person-k { fill: #b09a86; }
.map.is-night .shop .shop-person-s { opacity: 0; }
.map.is-night .shop .shop-pole     { fill: #d8d8d0; }
.map.is-night .shop .shop-expose   { fill: #ffe9a8; }
.map.is-night .shop .shop-boxtop  { fill: color-mix(in srgb, var(--accent) 30%, #4a4a50); }

/* Der Dunstverlauf über der Ferne ist für die Totale gedacht. Steht man
   beim Zoom mitten im Quartier, nimmt er dem Modell nur die Zeichnung. */
.map__artwrap .dunst { transition: opacity .8s var(--ease); }
.map__artwrap[data-zoom-cat] .dunst { opacity: .18; }
@media (prefers-reduced-motion: reduce) {
  .map__artwrap .dunst { transition: none; }
}

/* --------------------------------------------- ZOOM-CHOREOGRAFIE -------- */
/* Ruhezustand: Details vorhanden, aber zurückhaltend (bei Zoom 1 ohnehin
   winzig). Beim Zoom auf die Kategorie poppen sie gestaffelt auf. */
/* In der Totale ist eine Ladenfront vierzig Einheiten breit — das
   Fenstergitter wird dort zu einem dunklen Fleck, der wie aufgeklebt
   aussieht («die Fenster schweben»). Das farbige Haus allein genügt als
   Marke; der Laden erscheint erst beim Hineinzoomen. */
.shop { --an: 0; opacity: 0; transition: opacity .45s var(--ease); }
/* In der Totale ist keine Ladenfront zu sehen — ihre Dampfwolken, Figuren
   und Blinklichter liefen aber trotzdem und liessen den Browser jedes Bild
   neu zeichnen: gemessen 24 statt 16 ms pro Bild im Leerlauf. Was man nicht
   sieht, wird darum gar nicht erst gerendert. Aufgedeckt wird eine Front
   erst, wenn die Karte im Zuschnitt steht. */
.map:not(.is-zoomed) .shop { display: none; }
.map__artwrap[data-zoom-cat="friseur"]    .shop[data-cat="friseur"],
.map__artwrap[data-zoom-cat="restaurant"] .shop[data-cat="restaurant"],
.map__artwrap[data-zoom-cat="cafe"]       .shop[data-cat="cafe"],
.map__artwrap[data-zoom-cat="gym"]        .shop[data-cat="gym"],
.map__artwrap[data-zoom-cat="fotografie"] .shop[data-cat="fotografie"],
.map__artwrap[data-zoom-cat="mode"]       .shop[data-cat="mode"],
.map__artwrap[data-zoom-cat="immobilien"] .shop[data-cat="immobilien"],
.map__artwrap[data-zoom-cat="agentur"]    .shop[data-cat="agentur"],
.map__artwrap[data-zoom-cat="gastgeber"]  .shop[data-cat="gastgeber"] {
  --an: 1;
  opacity: 1;
}

/* Im Zuschnitt steht alles still, was eine eigene Ebene erzwingen würde.
   Die Mal-Animationen (Dampf, Blitz, Bildschirm) laufen weiter.
   Hier stand einmal `.shop *`. Ein solcher Nachfahren-Stern zwingt Chrome,
   beim Umschalten von `is-crisp` den Stil des GANZEN Modellbaums neu zu
   rechnen — gemessen 45 bis 111 ms. Darum die Teile einzeln benennen. */
.map__artwrap.is-crisp .shop,
.map__artwrap.is-crisp .shop-awning,
.map__artwrap.is-crisp .shop-sign,
.map__artwrap.is-crisp .shop-proptop,
.map__artwrap.is-crisp .shop-propline,
.map__artwrap.is-crisp .shop-board,
.map__artwrap.is-crisp .shop-boardtext,
.map__artwrap.is-crisp .shop-chair-s,
.map__artwrap.is-crisp .shop-chair-t,
.map__artwrap.is-crisp .shop-chair-l,
.map__artwrap.is-crisp .shop-pole,
.map__artwrap.is-crisp .shop-polewendel,
.map__artwrap.is-crisp .shop-case-s,
.map__artwrap.is-crisp .shop-case-t,
.map__artwrap.is-crisp .shop-bracket,
.map__artwrap.is-crisp .shop-schirm,
.map__artwrap.is-crisp .shop-kuebel-s,
.map__artwrap.is-crisp .shop-kuebel-t,
.map__artwrap.is-crisp .shop-gruen,
.map__artwrap.is-crisp .shop-person,
.map__artwrap.is-crisp .shop-fahne { transition: none !important; }

.shop .shop-awning {
  transform: scaleY(var(--an));
  transform-box: fill-box;
  transform-origin: top;
  transition: transform .55s cubic-bezier(.2, 1.35, .4, 1) .55s;
}
.shop .shop-sign {
  opacity: var(--an);
  transition: opacity .4s var(--ease) .75s;
}
.shop .shop-proptop, .shop .shop-propline, .shop .shop-board,
.shop .shop-chair-s, .shop .shop-chair-t, .shop .shop-chair-l,
.shop .shop-pole, .shop .shop-polewendel,
.shop .shop-case-s, .shop .shop-case-t,
.shop .shop-bracket, .shop .shop-schirm, .shop .shop-kuebel-s,
.shop .shop-kuebel-t, .shop .shop-gruen, .shop .shop-person,
.shop .shop-fahne, .shop .shop-boardtext {
  opacity: var(--an);
  transition: opacity .4s var(--ease) .9s;
}

@media (prefers-reduced-motion: reduce) {
  .shop .shop-awning, .shop .shop-sign,
  .shop .shop-proptop, .shop .shop-propline, .shop .shop-board,
  .shop .shop-chair-s, .shop .shop-chair-t, .shop .shop-chair-l,
  .shop .shop-pole, .shop .shop-polewendel,
  .shop .shop-case-s, .shop .shop-case-t,
  .shop .shop-bracket, .shop .shop-schirm, .shop .shop-kuebel-s,
  .shop .shop-kuebel-t, .shop .shop-gruen, .shop .shop-person,
  .shop .shop-fahne {
    transition: none;
  }
}

/* ================================================= VORHER / NACHHER ==== */
/* Zwei Zeichnungen übereinander; die obere wird per clip-path beschnitten.
   Der Griff ist ein echtes <input type="range">: damit funktionieren Maus,
   Finger und Tastatur ohne eine Zeile eigenen Ereigniscode, und die Sache
   bleibt bedienbar, wenn JS ausfällt (dann steht sie bei 50 %). */
.verg { padding: clamp(64px, 9vw, 120px) 0; }

.verg__lead {
  margin: 18px auto 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--ink-3, #6e6e69);
}

.verg__box {
  position: relative;
  margin: clamp(32px, 4vw, 56px) auto 0;
  width: min(1180px, calc(100% - clamp(24px, 6vw, 80px)));
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2, #e9e6dd);
  isolation: isolate;
  touch-action: pan-y;
}
.verg__bild { position: absolute; inset: 0; }
/* contain, nicht cover: cover schnitt auf dem Handy je Seite acht Prozent
   weg — ausgerechnet den Knopf und das Ende der Mailadresse. */
.verg__bild img { width: 100%; height: 100%; display: block; object-fit: contain; }
.verg__bild picture { display: block; width: 100%; height: 100%; }

/* Die Vorher-Zeichnung liegt oben und wird von links her freigegeben */
.verg__bild--vorher { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

/* Die Beschriftung stand einmal IM Bild und lag dort auf der Mailadresse
   bzw. der Fusszeile des Entwurfs. Jetzt steht sie darüber, wo sie nichts
   verdeckt — und sagt gleich mit, worin sich die beiden unterscheiden. */
.verg__marken {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 10px;
  width: min(1180px, calc(100% - clamp(24px, 6vw, 80px)));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-3, #6e6e69);
}
.verg__marken span:last-child { text-align: right; }

/* Trennlinie samt Knopf — rein dekorativ, der Griff darüber tut die Arbeit */
.verg__linie {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(11, 11, 11, .22);
  pointer-events: none;
}
.verg__knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 14px rgba(11, 11, 11, .28);
}
.verg__knopf::before,
.verg__knopf::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -6px;
  border: 6px solid transparent;
}
.verg__knopf::before { left: 9px;  border-right-color: var(--ink); }
.verg__knopf::after  { right: 9px; border-left-color: var(--ink); }

/* Der Regler liegt unsichtbar über dem ganzen Bild */
.verg__griff {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.verg__griff::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px;
  height: 100%;
  cursor: ew-resize;
}
.verg__griff::-moz-range-thumb {
  width: 56px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
}
.verg__griff:focus-visible { outline: none; }
.verg__box:has(.verg__griff:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Der Hinweis stand einmal im Bild und verschwand unter der Kopfzeile.
   Als Bildunterschrift steht er da, wo er hingehört — und er bleibt lesbar. */
.verg__figur { margin: 0; }
.verg__hinweis {
  margin: 14px auto 0;
  width: min(1180px, calc(100% - clamp(24px, 6vw, 80px)));
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ink-3, #6e6e69);
  max-width: 78ch;
}

.verg__cta { margin-top: clamp(26px, 3vw, 40px); text-align: center; }

@media (max-width: 720px) {
  /* Auf dem Handy wird nicht gewischt, sondern gestapelt. Zwei Hochformate
     und ein waagrechter Regler heisst: von jedem Entwurf sieht man eine halbe
     Bildschirmseite — also von keinem etwas Ganzes. Untereinander steht jeder
     vollständig da, in eigener Zeichnung mit doppelter Schriftgrösse
     (siehe <picture>), und niemand muss auf einem 390er Schirm zielen. */
  .verg__box {
    aspect-ratio: auto;
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    background: none;
  }
  .verg__bild {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--line);
    background: var(--paper-2, #e9e6dd);
  }
  .verg__bild--vorher { clip-path: none; order: 1; }
  .verg__bild--nachher { order: 2; }
  .verg__bild::before {
    content: attr(data-marke);
    position: absolute;
    left: 0; top: -18px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--ink-3, #6e6e69);
  }
  .verg__bild--nachher::before { top: -18px; }
  .verg__box { padding-top: 18px; }
  .verg__griff, .verg__linie { display: none; }
  .verg__marken { display: none; }
  .verg__knopf { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .verg__marke { font-size: 10px; padding: 6px 9px; }
}

/* ------------------------------------------- KONFIGURATOR: ERGÄNZUNGEN --- */
/* Der Kombivorteil wird ausgewiesen, statt still abgezogen zu werden. */
.cfg__kombi {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-3, #6e6e69);
}
/* Ein Schritt zurück, ohne die ganze Auswahl zu verlieren. */
.cfg__back--result {
  background: none;
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-3, #6e6e69);
  cursor: pointer;
}
.cfg__back--result:hover { color: var(--ink); }

/* Zweitlink unter dem Hero-Knopf: leise, aber vorhanden. */
.hero__zweit {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
}
.hero__zweit a { color: var(--ink-3, #6e6e69); text-decoration: underline; text-underline-offset: 3px; }
.hero__zweit a:hover { color: var(--ink); }

/* --------------------------------------------------- TIPPZIELE ---------- */
/* Textlinks in Mono waren 11 bis 19 Pixel hohe Trefferflächen — auf dem
   Handy trifft man das nicht. Die Fläche wächst über Padding, die Zeile
   bleibt optisch gleich gross. */
.entry__btn,
.map__credit a,
.site-foot__nav a,
.hero__zweit a,
.verg__cta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 720px) {
  .site-foot__nav { row-gap: 2px; }
  .site-foot__nav a { padding-right: 14px; }
}