/* ==========================================================================
   JDL MEDIA — V4 / STUDIO-INSTRUMENT
   Eine einzige Idee trägt die Fassung: vier Medienformate, eine Hand.
   ========================================================================== */

@font-face {
  font-family: "Uncut Sans";
  src: url("/assets/fonts/UncutSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Uncut Sans";
  src: url("/assets/fonts/UncutSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sligoil Micro";
  src: url("/assets/fonts/Sligoil-MicroMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #0a0a09;
  --black-soft: #151513;
  --graphite: #292926;
  --steel: #85857f;
  --silver: #c8c8c1;
  --paper: #ecece7;
  --white: #f8f8f4;
  --line-dark: rgba(248, 248, 244, .18);
  --line-light: rgba(10, 10, 9, .18);
  --friseur: #b82e38;
  --restaurant: #c66600;
  --gastgeber: #188a43;
  --immobilien: #b58b14;
  --display: "Uncut Sans", Helvetica, Arial, sans-serif;
  --mono: "Sligoil Micro", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: clamp(20px, 3.3vw, 56px);
  --max: 1680px;
  --ease: cubic-bezier(.76, 0, .18, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--black); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--black);
  color: var(--white);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
button, input { font: inherit; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--white); color: var(--black); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }

.skip {
  position: fixed; z-index: 1000; top: 12px; left: 12px;
  padding: 10px 14px; background: var(--white); color: var(--black);
  transform: translateY(-160%); transition: transform .2s;
}
.skip:focus { transform: none; }
.sprite { position: absolute; overflow: hidden; }

.grain {
  position: fixed; z-index: 900; inset: 0; pointer-events: none; opacity: .055;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='1' seed='19'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>") repeat;
  background-size: 170px 170px;
}

.intro {
  position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center;
  background: var(--white); color: var(--black);
  transition: clip-path .85s var(--ease) .5s;
  clip-path: inset(0 0 0 0);
}
.intro.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.intro__mark { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: clamp(3rem, 8vw, 8rem); line-height: .8; letter-spacing: -.08em; font-weight: 500; }
.intro__mark span { font-family: var(--mono); font-size: .12em; letter-spacing: .12em; }
.intro__line { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--black); animation: introLine .62s var(--ease-out) forwards; }
@keyframes introLine { to { width: 100%; } }

.progress { position: fixed; z-index: 850; right: 0; top: 0; bottom: 0; width: 2px; background: transparent; }
.progress span { display: block; width: 100%; height: 100%; background: var(--silver); transform: scaleY(0); transform-origin: top; will-change: transform; }

.wipe {
  position: fixed; z-index: 1050; inset: 0; display: grid; place-items: center;
  background: var(--white); color: var(--black); transform: translateY(101%);
  transition: transform .62s var(--ease); pointer-events: none;
}
.wipe span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.wipe.is-active { transform: none; }

.head {
  position: fixed; z-index: 800; top: 0; left: 0; right: 0; height: 76px;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(20px, 3vw, 52px);
  padding: 0 var(--pad); color: var(--white); background: var(--black);
  border-bottom: 1px solid var(--line-dark);
  transition: transform .45s var(--ease-out), background .3s;
}
.head.is-hidden { transform: translateY(-105%); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand__main { font-size: 27px; line-height: .8; font-weight: 500; letter-spacing: -.075em; }
.brand__sub { font-family: var(--mono); font-size: 7.5px; line-height: 1.15; letter-spacing: .11em; }
.head__clock { margin: 0 auto 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--silver); }
.head__nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.head__nav a { position: relative; font-size: 13px; text-decoration: none; color: var(--silver); }
.head__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .35s var(--ease-out); }
.head__nav a:hover::after { right: 0; }
.head__cta { min-width: 132px; height: 42px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 22px; border: 1px solid var(--white); text-decoration: none; font-size: 13px; transition: color .25s, background .25s, transform .2s; }
.head__cta:hover { color: var(--black); background: var(--white); }
.head__menu { display: none; width: 48px; height: 42px; padding: 0; border: 1px solid var(--line-dark); color: inherit; background: none; cursor: pointer; }
.head__menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.head__menu i, .head__menu i::after { position: absolute; width: 18px; height: 1px; background: currentColor; content: ""; transition: transform .3s var(--ease-out); }
.head__menu i::after { transform: translate(-9px, 6px); }
.head__menu[aria-expanded="true"] i { transform: rotate(45deg); }
.head__menu[aria-expanded="true"] i::after { transform: translate(-9px, 0) rotate(-90deg); }

.mobile-nav {
  position: fixed; z-index: 790; inset: 76px 0 0; padding: 28px var(--pad) 48px;
  background: var(--black); color: var(--white); flex-direction: column;
}
.mobile-nav:not([hidden]) { display: flex; }
.mobile-nav a { padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-size: clamp(2rem, 9vw, 4rem); line-height: 1; letter-spacing: -.045em; text-decoration: none; }
.mobile-nav a:last-child { margin-top: auto; border: 1px solid var(--white); padding: 18px; font-size: 18px; display: flex; justify-content: space-between; }

.eyebrow { margin: 0; font-family: var(--mono); font-size: 10px; line-height: 1.3; letter-spacing: .11em; text-transform: uppercase; }
.button {
  min-height: 54px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: space-between; gap: 38px;
  border: 1px solid currentColor; text-decoration: none; font-size: 14px; transition: background .25s, color .25s, transform .2s;
}
.button b { font-weight: 400; font-size: 18px; }
.button--light { background: var(--white); color: var(--black); border-color: var(--white); }
.button--light:hover { background: transparent; color: var(--white); }
.button--dark { background: var(--black); color: var(--white); border-color: var(--black); }
.button--dark:hover { background: transparent; color: var(--black); }
.button--large { min-width: min(100%, 360px); min-height: 68px; padding-inline: 24px; font-size: 17px; }
.text-link { font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--line-dark); padding-bottom: 4px; }

/* HERO ==================================================================== */
.hero {
  position: relative; min-height: 100svh; max-width: var(--max); margin: 0 auto;
  padding: clamp(128px, 16vh, 190px) var(--pad) clamp(70px, 9vh, 100px);
  display: grid; grid-template-columns: minmax(560px, .92fr) minmax(560px, 1.08fr); gap: clamp(40px, 4vw, 70px); align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
.hero__eyebrow { color: var(--silver); margin-bottom: clamp(22px, 4vh, 42px); }
.hero h1 { margin: 0; font-size: clamp(3.7rem, 6.4vw, 7.4rem); line-height: .84; letter-spacing: -.067em; font-weight: 500; }
.hero h1 span { display: block; overflow: hidden; padding-right: .08em; white-space: nowrap; }
.js .hero h1 span { transform: translateY(112%); transition: transform 1.05s var(--ease-out); }
.js .is-ready .hero h1 span { transform: none; }
.js .is-ready .hero h1 span:nth-child(2) { transition-delay: .07s; }
.js .is-ready .hero h1 span:nth-child(3) { transition-delay: .14s; }
.hero__lead { max-width: 49ch; margin: clamp(26px, 4vh, 42px) 0 0; color: var(--silver); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; }
.hero__actions { margin-top: clamp(28px, 4vh, 44px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero__truth { margin: 24px 0 0; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--steel); }
.hero__truth span { width: 6px; height: 6px; border: 1px solid var(--steel); border-radius: 50%; }
.hero__scroll { position: absolute; left: var(--pad); bottom: 23px; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--steel); }
.hero__scroll i { position: relative; display: block; width: 78px; height: 1px; overflow: hidden; background: var(--graphite); }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--silver); transform: translateX(-100%); animation: scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine { 50%, 100% { transform: translateX(100%); } }

/* FORMATMONITOR ----------------------------------------------------------- */
.format { position: relative; min-width: 0; border: 1px solid var(--line-dark); background: #0d0d0c; box-shadow: 0 40px 90px rgba(0,0,0,.38); }
.format__top { height: 38px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-dark); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: var(--steel); }
.format__status { display: flex; align-items: center; gap: 7px; }
.format__status i { width: 5px; height: 5px; border: 1px solid var(--silver); border-radius: 50%; animation: statusPulse 2.4s ease-in-out infinite; }
.format__status b { font-weight: 500; }
@keyframes statusPulse { 50% { background: var(--silver); } }
.format__viewport { position: relative; aspect-ratio: 1.42; overflow: hidden; background: #11110f; isolation: isolate; }
.format__viewport::before {
  content: ""; position: absolute; z-index: 0; inset: 0; opacity: .2;
  background-image: linear-gradient(rgba(248,248,244,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(248,248,244,.07) 1px, transparent 1px);
  background-size: 8.333% 12.5%;
}
.format__viewport::after { content: ""; position: absolute; z-index: 8; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(0,0,0,.7); }
.format__scene {
  --sx: 7%; --sy: 12%;
  position: absolute; z-index: 2; inset: var(--sy) var(--sx); overflow: hidden;
  border: 1px solid rgba(248,248,244,.28); opacity: 0; transform: scale(.96);
  transition: opacity .48s ease, transform .75s var(--ease-out), inset .75s var(--ease);
}
.format[data-format="film"] .format__scene--film,
.format[data-format="foto"] .format__scene--foto,
.format[data-format="web"] .format__scene--web,
.format[data-format="rundgang"] .format__scene--rundgang { opacity: 1; transform: none; }
.format:not([data-format="film"]) .format__scene--film *,
.format:not([data-format="foto"]) .format__scene--foto *,
.format:not([data-format="web"]) .format__scene--web *,
.format:not([data-format="rundgang"]) .format__scene--rundgang *,
.format.is-paused * { animation-play-state: paused !important; }
.format[data-format="foto"] .format__scene { --sx: 25%; --sy: 7%; }
.format[data-format="web"] .format__scene { --sx: 9%; --sy: 12%; }
.format[data-format="rundgang"] .format__scene { --sx: 5%; --sy: 7%; }
.format__gate { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.gate { position: absolute; width: 17px; height: 17px; transition: inset .75s var(--ease); }
.gate::before, .gate::after { content: ""; position: absolute; background: var(--white); }
.gate::before { width: 100%; height: 1px; }
.gate::after { width: 1px; height: 100%; }
.gate--tl { top: 12%; left: 7%; }.gate--tr { top: 12%; right: 7%; transform: rotate(90deg); }
.gate--bl { bottom: 12%; left: 7%; transform: rotate(-90deg); }.gate--br { bottom: 12%; right: 7%; transform: rotate(180deg); }
.format[data-format="foto"] .gate--tl { top: 7%; left: 25%; }.format[data-format="foto"] .gate--tr { top: 7%; right: 25%; }
.format[data-format="foto"] .gate--bl { bottom: 7%; left: 25%; }.format[data-format="foto"] .gate--br { bottom: 7%; right: 25%; }
.format[data-format="web"] .gate--tl { top: 12%; left: 9%; }.format[data-format="web"] .gate--tr { top: 12%; right: 9%; }
.format[data-format="web"] .gate--bl { bottom: 12%; left: 9%; }.format[data-format="web"] .gate--br { bottom: 12%; right: 9%; }
.format[data-format="rundgang"] .gate--tl { top: 7%; left: 5%; }.format[data-format="rundgang"] .gate--tr { top: 7%; right: 5%; }
.format[data-format="rundgang"] .gate--bl { bottom: 7%; left: 5%; }.format[data-format="rundgang"] .gate--br { bottom: 7%; right: 5%; }
.format__coords, .format__number { position: absolute; z-index: 7; bottom: 10px; margin: 0; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; color: var(--steel); }
.format__coords { left: 12px; }.format__number { right: 12px; }.format__number span { color: var(--white); }
.format__modes { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-dark); }
.format__modes button { min-width: 0; padding: 13px 10px 14px; border: 0; border-right: 1px solid var(--line-dark); background: none; color: var(--steel); text-align: left; cursor: pointer; font-size: 12px; transition: color .25s, background .25s; }
.format__modes button:last-child { border-right: 0; }
.format__modes button span { margin-right: 8px; font-family: var(--mono); font-size: 8px; }
.format__modes button[aria-selected="true"] { background: var(--white); color: var(--black); }

.format__scene--film { background: #e9e9e4; color: var(--black); }
.scene__take { position: absolute; z-index: 2; top: 12px; left: 14px; right: 14px; margin: 0; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.film-word { position: absolute; inset: 0; display: grid; align-content: center; font-size: clamp(2.2rem, 5.5vw, 6.2rem); line-height: .72; font-weight: 500; letter-spacing: -.07em; transform: translateX(calc(var(--mx, 0) * 8px)); transition: transform .15s linear; }
.film-word span { display: block; }
.film-word span:nth-child(2) { text-align: center; }.film-word span:nth-child(3) { text-align: right; }
.film-track { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 15px; display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
.film-track i { border: 1px solid var(--black); opacity: .25; }.film-track i:nth-child(2) { background: var(--black); opacity: 1; }
.film-track b { position: absolute; top: -4px; bottom: -4px; left: 0; width: 1px; background: var(--black); animation: playhead 4s linear infinite; }
@keyframes playhead { to { left: 100%; } }

.format__scene--foto { background: #171715; color: var(--white); }
.iris { position: absolute; width: 118%; max-width: none; left: -9%; top: 50%; transform: translateY(-50%) rotate(calc(var(--mx,0) * 2deg)); fill: none; stroke: var(--steel); stroke-width: 1; transition: transform .2s linear; }
.iris path { opacity: .28; }
.foto-word { position: absolute; z-index: 2; inset: auto 8% 8%; margin: 0; font-size: clamp(1rem, 2.4vw, 2.4rem); line-height: .88; letter-spacing: -.05em; }
.focus { position: absolute; width: 18px; height: 18px; border-color: var(--white); opacity: .8; }
.focus--tl { left: 8%; top: 8%; border-left: 1px solid; border-top: 1px solid; }
.focus--tr { right: 8%; top: 8%; border-right: 1px solid; border-top: 1px solid; }
.focus--bl { left: 8%; bottom: 8%; border-left: 1px solid; border-bottom: 1px solid; }
.focus--br { right: 8%; bottom: 8%; border-right: 1px solid; border-bottom: 1px solid; }

.format__scene--web { background: #d8d8d2; padding: 5%; }
.web-shell { height: 100%; background: var(--white); color: var(--black); border: 1px solid var(--black); transform: translate(calc(var(--mx,0) * 3px), calc(var(--my,0) * 3px)); transition: transform .2s linear; }
.web-bar { height: 26px; padding: 0 9px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--black); font-family: var(--mono); font-size: 7px; }
.web-bar i { width: 5px; height: 5px; border: 1px solid var(--black); border-radius: 50%; }.web-bar span { margin-left: auto; }
.web-layout { height: calc(100% - 26px); padding: 8%; display: grid; grid-template-columns: 1.5fr .5fr; grid-template-rows: 1fr 18px; gap: 9px; }
.web-layout p { margin: 0; align-self: center; font-size: clamp(.95rem, 2vw, 2rem); line-height: .9; letter-spacing: -.04em; }
.web-layout p b { font-weight: 500; }.web-layout i { border: 1px solid var(--black); }.web-layout i:nth-of-type(1) { grid-row: 1; grid-column: 2; background: var(--black); }.web-layout i:nth-of-type(2) { grid-column: 1; }.web-layout i:nth-of-type(3) { grid-column: 2; }
.web-cursor { position: absolute; z-index: 2; top: 43%; left: 64%; width: 25px; height: 25px; display: grid; place-items: center; background: var(--black); color: var(--white); font-size: 12px; animation: cursorMove 3.6s var(--ease) infinite; }
@keyframes cursorMove { 50% { transform: translate(26px, 14px); } }

.format__scene--rundgang { background: #121211; perspective: 600px; }
.room { position: absolute; inset: 8%; transform-style: preserve-3d; transform: rotateX(calc(58deg + var(--my,0) * 2deg)) rotateZ(calc(-40deg + var(--mx,0) * 3deg)); transition: transform .2s linear; }
.room i { position: absolute; border: 1px solid rgba(248,248,244,.45); background: rgba(248,248,244,.025); }
.room__back { left: 24%; top: 10%; width: 50%; height: 54%; transform: translateZ(-35px); }
.room__left { left: 9%; top: 18%; width: 36%; height: 54%; transform: rotateY(62deg); }
.room__right { right: 7%; top: 15%; width: 36%; height: 58%; transform: rotateY(-62deg); }
.room__floor { left: 19%; bottom: 6%; width: 62%; height: 46%; transform: rotateX(70deg); }
.room b { position: absolute; left: 48%; top: 45%; width: 8px; height: 8px; background: var(--white); border-radius: 50%; box-shadow: 0 0 0 8px rgba(248,248,244,.1); }
.room-word { position: absolute; z-index: 3; left: 5%; bottom: 6%; margin: 0; font-size: clamp(.9rem, 1.9vw, 1.8rem); line-height: .9; letter-spacing: -.04em; }
.orbit { position: absolute; right: 5%; top: 7%; width: 48px; height: 48px; border: 1px solid var(--steel); border-radius: 50%; }
.orbit i { position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; background: var(--white); border-radius: 50%; transform-origin: 0 27px; animation: orbit 4s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* GENERELLE ABSCHNITTE ==================================================== */
.services, .proof, .basel, .numbers, .series, .closing { position: relative; padding: clamp(92px, 13vw, 190px) var(--pad); }
.services, .proof, .numbers, .series { color: var(--black); background: var(--paper); }
.section-head { max-width: var(--max); margin: 0 auto clamp(60px, 9vw, 120px); display: grid; grid-template-columns: 1fr 2fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: start; }
.section-head .eyebrow { padding-top: 12px; color: var(--steel); }
.section-head h2, .proof h2, .basel h2, .series h2, .closing h2 { margin: 0; font-size: clamp(3rem, 6.8vw, 8rem); line-height: .88; font-weight: 500; letter-spacing: -.065em; }
.section-head > p:last-child, .proof__intro > p:last-child, .basel__head > p:last-child { margin: 11px 0 0; max-width: 42ch; color: #5c5c56; line-height: 1.55; }

/* LEISTUNGEN -------------------------------------------------------------- */
.service-list { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--black); }
.service { position: relative; min-height: clamp(260px, 28vw, 430px); padding: clamp(30px, 4vw, 64px) 0; display: grid; grid-template-columns: .55fr 1.1fr 1.3fr 1.7fr .8fr; gap: clamp(18px, 2.8vw, 48px); align-items: start; border-bottom: 1px solid var(--line-light); overflow: hidden; }
.js .service { opacity: .22; transition: opacity .8s ease; }
.js .service.is-visible { opacity: 1; }
.service__num, .service__price { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.service h3 { margin: -.11em 0 0; font-size: clamp(2.8rem, 5.4vw, 6.7rem); line-height: .9; font-weight: 500; letter-spacing: -.065em; }
.service__claim { margin: 0; max-width: 16ch; font-size: clamp(1.2rem, 2vw, 2.15rem); line-height: 1.1; letter-spacing: -.035em; }
.service__copy { margin: 0; max-width: 42ch; color: #5c5c56; }
.service__price { align-self: end; white-space: nowrap; }
.service__mark { position: absolute; right: 0; bottom: 24px; width: clamp(90px, 12vw, 190px); height: clamp(52px, 7vw, 110px); pointer-events: none; opacity: .12; transition: opacity .35s, transform .55s var(--ease-out); }
.service:hover .service__mark { opacity: .75; transform: translateX(-12px); }
.service__mark--film { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.service__mark--film span { border: 1px solid var(--black); }.service__mark--film span:nth-child(2) { background: var(--black); }
.service__mark--film i { position: absolute; left: 0; top: -8px; bottom: -8px; width: 1px; background: var(--black); transition: left .8s var(--ease); }.service:hover .service__mark--film i { left: 100%; }
.service__mark--foto i, .service__mark--foto b { position: absolute; border: 1px solid var(--black); border-radius: 50%; inset: 0; }.service__mark--foto b { inset: 22%; }
.service__mark--web { border: 1px solid var(--black); padding: 12px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 5px; }.service__mark--web span { border: 1px solid var(--black); }.service__mark--web span:first-child { grid-row: span 2; }
.service__mark--360 { border: 1px solid var(--black); border-radius: 50%; display: grid; place-items: center; }.service__mark--360 i { position: absolute; width: 110%; height: 34%; border: 1px solid var(--black); border-radius: 50%; }.service__mark--360 b { position: absolute; width: 34%; height: 110%; border: 1px solid var(--black); border-radius: 50%; }.service__mark--360 span { font-family: var(--mono); font-size: 9px; }

/* BEWEIS ------------------------------------------------------------------ */
.proof { padding-top: 0; }
.proof__intro { max-width: var(--max); margin: 0 auto clamp(50px, 7vw, 90px); display: grid; grid-template-columns: 1fr 2.35fr .9fr; gap: clamp(24px, 4vw, 70px); align-items: start; }
.proof__intro .eyebrow { padding-top: 11px; color: var(--steel); }
.compare { max-width: var(--max); margin: 0 auto; }
.compare__box { --pos: 52%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--black); background: var(--white); }
.compare__image { position: absolute; inset: 0; }
.compare__image img { width: 100%; height: 100%; object-fit: cover; }
.compare__image--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__line { position: absolute; z-index: 4; left: var(--pos); top: 0; bottom: 0; width: 1px; background: var(--black); pointer-events: none; }
.compare__line span { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; display: grid; place-items: center; transform: translate(-50%,-50%); color: var(--white); background: var(--black); border: 1px solid var(--white); border-radius: 50%; }
.compare input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; appearance: none; cursor: ew-resize; }
.compare__label { position: absolute; z-index: 3; top: 14px; margin: 0; padding: 6px 9px; background: var(--black); color: var(--white); font-family: var(--mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.compare__label--before { left: 14px; }.compare__label--after { right: 14px; }
.compare figcaption { max-width: 90ch; margin-top: 14px; color: #66665f; font-family: var(--mono); font-size: 9px; line-height: 1.5; letter-spacing: .025em; }

/* BASEL / KARTE =========================================================== */
.basel { color: var(--white); background: var(--black-soft); }
.basel__head { max-width: var(--max); margin: 0 auto clamp(50px, 7vw, 90px); display: grid; grid-template-columns: 1fr 2.35fr .9fr; gap: clamp(24px, 4vw, 70px); align-items: start; }
.basel__head .eyebrow { padding-top: 11px; color: var(--steel); }
.basel__head > p:last-child { color: var(--silver); }
.map-shell { max-width: var(--max); margin: 0 auto; min-height: clamp(610px, 65vw, 920px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); border: 1px solid var(--line-dark); }
.map { --map-ar: 1.6; position: relative; min-height: 610px; overflow: hidden; container-type: size; isolation: isolate; background: #dcdcd7; cursor: default; }
.map::before { content: "BASEL / MODELL WIRD GELADEN"; position: absolute; z-index: 0; inset: 50% auto auto 50%; transform: translate(-50%,-50%); color: #777772; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; white-space: nowrap; transition: opacity .25s ease; }
.map.is-model-ready::before { opacity: 0; }
.map__canvas { position: absolute; inset: 0; transition: transform .78s var(--ease); }
.map__stage { position: absolute; inset: 0; transform-origin: 0 0; }
.map__artwrap { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.map__artwrap.is-belichtet { opacity: 1; }
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.markers { position: absolute; z-index: 4; inset: 0; transform-origin: 0 0; --cx: 1; --cy: 1; }
.marker { --c: var(--white); position: absolute; left: var(--x); top: var(--y); padding: 0; border: 0; background: none; color: var(--black); cursor: pointer; transform: translate(-50%,-100%) scale(var(--cx,1),var(--cy,1)); transform-origin: 50% 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.marker__pill { min-height: 28px; padding: 0 9px; display: flex; align-items: center; gap: 6px; background: var(--black); color: var(--white); white-space: nowrap; border: 1px solid rgba(255,255,255,.25); pointer-events: auto; }
.marker__pill svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.marker__label { font-family: var(--mono); font-size: 8px; letter-spacing: .07em; }
.marker__stem { width: 1px; height: 18px; background: var(--black); }
.marker__dot { width: 9px; height: 9px; border: 1px solid var(--black); border-radius: 50%; background: var(--akzent, var(--white)); pointer-events: auto; }
.marker[aria-pressed="true"] .marker__pill { background: var(--white); color: var(--black); border-color: var(--black); }
.marker--self .marker__pill { background: transparent; color: var(--black); border-color: var(--black); }
.marker__plus { font-size: 14px; }
[data-cat="friseur"] { --akzent: var(--friseur); }
[data-cat="restaurant"] { --akzent: var(--restaurant); }
[data-cat="gastgeber"] { --akzent: var(--gastgeber); }
[data-cat="immobilien"] { --akzent: var(--immobilien); }
.map__mode { position: absolute; z-index: 7; top: 14px; right: 14px; min-width: 66px; height: 34px; border: 1px solid var(--black); background: var(--white); color: var(--black); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.map__credit { position: absolute; z-index: 7; left: 14px; bottom: 12px; margin: 0; padding: 5px 7px; background: rgba(248,248,244,.9); color: var(--black); font-family: var(--mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.map.is-night { background: #16161a; }
.map.is-night .marker__pill { background: var(--white); color: var(--black); border-color: var(--black); }
.map.is-night .marker__stem { background: var(--white); }.map.is-night .marker__dot { border-color: var(--white); }
.panel { position: relative; min-width: 0; padding: clamp(28px, 3.2vw, 50px); display: flex; flex-direction: column; background: var(--black); border-left: 1px solid var(--line-dark); }
.panel__view { display: grid; gap: 18px; }
.panel__kicker { margin: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.panel__lead { margin: clamp(48px, 8vw, 120px) 0 0; font-size: clamp(1.7rem, 2.6vw, 3.3rem); line-height: .95; letter-spacing: -.045em; }
.panel__hint { margin: auto 0 0; padding-top: 20px; border-top: 1px solid var(--line-dark); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.panel__view--detail h3 { margin: clamp(20px, 4vw, 60px) 0 0; font-size: clamp(2.2rem, 4vw, 4.7rem); line-height: .9; font-weight: 500; letter-spacing: -.055em; }
.panel__text { margin: 0; color: var(--silver); }
.panel dl { margin: 16px 0 0; display: grid; gap: 10px; }
.panel dl div { padding-top: 10px; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.panel dt { color: var(--steel); font-family: var(--mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }.panel dd { margin: 0; font-size: 12px; }
.panel a { margin-top: 12px; min-height: 52px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; background: var(--white); color: var(--black); text-decoration: none; font-size: 13px; }
.panel #backBtn { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line-dark); background: none; color: var(--silver); text-align: left; font-size: 12px; cursor: pointer; }
.stepper { margin-top: auto; padding-top: 18px; display: flex; gap: 8px; }
.stepper button { width: 42px; height: 42px; border: 1px solid var(--line-dark); background: none; color: var(--white); cursor: pointer; }
.location-list { max-width: var(--max); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line-dark); border-top: 0; }
.location-list li + li { border-left: 1px solid var(--line-dark); }
.location-list button { width: 100%; padding: 18px 16px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; border: 0; background: var(--black); color: var(--white); text-align: left; cursor: pointer; transition: background .25s, color .25s; }
.location-list button:hover, .location-list button[aria-pressed="true"] { background: var(--white); color: var(--black); }
.location-list button span { grid-row: span 2; font-family: var(--mono); font-size: 8px; color: var(--steel); }.location-list button b { font-weight: 400; }.location-list button i { font-family: var(--mono); font-size: 8px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }

/* PREISE / ABLAUF ========================================================= */
.section-head--numbers { margin-bottom: clamp(54px, 8vw, 105px); }
.price-table { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--black); }
.price-row { min-height: clamp(86px, 8vw, 128px); display: grid; grid-template-columns: 1.2fr auto minmax(80px,1fr) auto 35px; gap: clamp(14px, 2vw, 32px); align-items: center; border-bottom: 1px solid var(--line-light); }
.price-row > span { font-size: clamp(1.6rem, 3vw, 3.4rem); letter-spacing: -.045em; }
.price-row b { font-family: var(--mono); font-size: clamp(1rem, 1.65vw, 1.8rem); font-weight: 500; }
.price-row i { height: 1px; background: var(--black); transform-origin: left; }
.price-row small { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.process { max-width: var(--max); margin: clamp(70px, 10vw, 150px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--black); }
.process li { min-height: 280px; padding: 24px clamp(14px, 2vw, 30px) 0 0; border-right: 1px solid var(--line-light); display: flex; flex-direction: column; }
.process li + li { padding-left: clamp(14px, 2vw, 30px); }.process li:last-child { border-right: 0; }
.process span { font-family: var(--mono); font-size: clamp(1.2rem, 2vw, 2.2rem); }
.process h3 { margin: auto 0 10px; font-size: 18px; font-weight: 500; }.process p { margin: 0 0 26px; color: #62625c; font-size: 13px; max-width: 31ch; }

/* SERIE =================================================================== */
.series { padding-top: 0; max-width: none; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(50px, 8vw, 130px); }
.series__copy { max-width: 760px; }
.series__copy .eyebrow { margin-bottom: clamp(30px, 5vw, 68px); color: var(--steel); }
.series__copy > p:not(.eyebrow) { max-width: 48ch; margin: 32px 0; color: #5c5c56; }
.series__seats { border-top: 1px solid var(--black); }
.series__seats article { position: relative; min-height: 132px; padding: 22px 0; display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: 1fr auto; align-items: start; border-bottom: 1px solid var(--line-light); }
.series__seats article::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--akzent); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease-out); }.series__seats article:hover::before { transform: scaleY(1); }
.series__seats span, .series__seats p, .series__seats b { font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }.series__seats span { color: var(--steel); }.series__seats h3 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2.5rem); font-weight: 400; letter-spacing: -.04em; }.series__seats p { grid-column: 2; margin: 0; color: var(--steel); }.series__seats b { grid-column: 3; grid-row: 1 / 3; align-self: center; font-weight: 500; }

/* SCHLUSS / FOOTER ======================================================== */
.closing { min-height: 88svh; display: flex; flex-direction: column; justify-content: center; background: var(--black); color: var(--white); }
.closing .eyebrow { color: var(--steel); margin-bottom: clamp(35px, 6vw, 80px); }
.closing h2 { max-width: 14ch; }
.closing__actions { margin-top: clamp(45px, 7vw, 90px); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }.closing__actions > a:last-child { color: var(--silver); font-size: 14px; }
.closing__meta { margin-top: auto; padding-top: 32px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; border-top: 1px solid var(--line-dark); }.closing__meta p { margin: 0; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.footer { padding: 34px var(--pad) 44px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 30px; align-items: start; background: var(--white); color: var(--black); }
.footer nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }.footer nav a { font-size: 12px; text-decoration: none; border-bottom: 1px solid transparent; }.footer nav a:hover { border-color: currentColor; }.footer > p { margin: 0; font-family: var(--mono); font-size: 8px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: #686862; }
.mobile-cta { display: none; }

/* RESPONSIVE ============================================================== */
@media (max-width: 1120px) {
  .hero { grid-template-columns: minmax(390px,.9fr) minmax(430px,1.1fr); gap: 36px; }
  .head__nav { display: none; }
  .head { grid-template-columns: auto 1fr auto auto; }
  .service { grid-template-columns: .35fr 1fr 1.25fr 1.45fr; }
  .service__price { grid-column: 2; }.service__mark { width: 130px; }
  .proof__intro, .basel__head { grid-template-columns: .7fr 2fr 1fr; }
}

@media (max-width: 860px) {
  .head { height: 68px; grid-template-columns: auto 1fr auto; }.head__clock { text-align: center; margin: 0; }.head__cta { display: none; }.head__menu { display: grid; place-items: center; }.mobile-nav { top: 68px; }
  .hero { min-height: auto; padding-top: 120px; grid-template-columns: 1fr; gap: 62px; }
  .hero h1 { font-size: clamp(4rem, 10vw, 7rem); }.hero__copy { max-width: 720px; }.hero__lead { max-width: 56ch; }.hero__scroll { display: none; }
  .format { width: min(100%, 760px); margin-inline: auto; }
  .section-head, .proof__intro, .basel__head { grid-template-columns: 1fr; gap: 22px; }.section-head .eyebrow, .proof__intro .eyebrow, .basel__head .eyebrow { padding-top: 0; }.section-head > p:last-child, .proof__intro > p:last-child, .basel__head > p:last-child { margin-top: 0; }
  .service { min-height: 300px; grid-template-columns: 42px 1fr 1fr; }.service h3 { grid-column: 2; }.service__claim { grid-column: 3; }.service__copy { grid-column: 2 / 4; max-width: 58ch; }.service__price { grid-column: 2; }.service__mark { display: none; }
  .map-shell { min-height: 0; grid-template-columns: 1fr; }.map { min-height: 70svh; }.panel { min-height: 360px; border-left: 0; border-top: 1px solid var(--line-dark); }.panel__lead { margin-top: 28px; }.location-list { grid-template-columns: repeat(2,1fr); }.location-list li:nth-child(3) { border-left: 0; }.location-list li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .series { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr 2fr; }.footer > p { grid-column: 2; }
}

@media (max-width: 720px) {
  :root { --pad: 18px; }
  .grain { opacity: .035; }
  .hero { padding-bottom: 72px; gap: 46px; }
  .hero h1 { font-size: clamp(3rem, 14.5vw, 5.5rem); line-height: .82; }.hero__lead { font-size: 16px; }.hero__actions { align-items: stretch; flex-direction: column; }.hero__actions .button { width: 100%; }.text-link { align-self: flex-start; }
  .format__viewport { aspect-ratio: .92; }.format__scene { --sx: 6%; --sy: 15%; }.gate--tl { top:15%;left:6%}.gate--tr{top:15%;right:6%}.gate--bl{bottom:15%;left:6%}.gate--br{bottom:15%;right:6%}
  .format[data-format="film"] .format__scene { --sx: 6%; --sy: 15%; }
  .format[data-format="film"] .gate--tl{top:15%;left:6%}.format[data-format="film"] .gate--tr{top:15%;right:6%}.format[data-format="film"] .gate--bl{bottom:15%;left:6%}.format[data-format="film"] .gate--br{bottom:15%;right:6%}
  .format[data-format="foto"] .format__scene { --sx: 15%; --sy: 7%; }.format[data-format="foto"] .gate--tl{left:15%}.format[data-format="foto"] .gate--tr{right:15%}.format[data-format="foto"] .gate--bl{left:15%}.format[data-format="foto"] .gate--br{right:15%}
  .format[data-format="web"] .format__scene { --sx: 6%; --sy: 15%; }.format[data-format="web"] .gate--tl{top:15%;left:6%}.format[data-format="web"] .gate--tr{top:15%;right:6%}.format[data-format="web"] .gate--bl{bottom:15%;left:6%}.format[data-format="web"] .gate--br{bottom:15%;right:6%}
  .film-word { font-size: 17vw; }.foto-word, .room-word { font-size: 5.2vw; }.web-layout p { font-size: 4.2vw; }
  .format__modes button { padding: 12px 7px; font-size: 10px; }.format__modes button span { display: block; margin: 0 0 3px; }
  .services, .proof, .basel, .numbers, .series, .closing { padding-top: 84px; padding-bottom: 84px; }
  .proof { padding-top: 0; }
  .section-head h2, .proof h2, .basel h2, .series h2, .closing h2 { font-size: clamp(3.1rem, 14vw, 5.5rem); }
  .service { min-height: 0; padding: 30px 0 38px; grid-template-columns: 34px 1fr; gap: 14px 8px; }.service h3 { grid-column: 2; font-size: 15vw; }.service__claim, .service__copy, .service__price { grid-column: 2; }.service__claim { max-width: 21ch; font-size: 21px; }.service__copy { font-size: 14px; }
  .compare__box { aspect-ratio: 3 / 4; }.compare__image--before { clip-path: inset(0 0 calc(100% - var(--pos)) 0); }.compare__line { left: 0; right: 0; top: var(--pos); bottom: auto; width: auto; height: 1px; }.compare input { cursor: ns-resize; }.compare__label--after { top: auto; right: auto; left: 14px; bottom: 14px; }
  .map { --map-ar: .714286; min-height: 78svh; }.marker__label { font-size: 7px; }.marker__pill { padding-inline: 7px; }.panel { min-height: 390px; padding: 26px 20px; }
  .price-row { grid-template-columns: 1fr auto 40px auto 27px; gap: 8px; }.price-row > span { font-size: 24px; }.price-row b { font-size: 13px; }
  .process { grid-template-columns: 1fr 1fr; }.process li { min-height: 230px; border-bottom: 1px solid var(--line-light); }.process li:nth-child(2) { border-right: 0; }.process li:nth-child(3) { padding-left: 0; }.process h3 { margin-top: auto; }
  .series__seats article { grid-template-columns: 34px 1fr auto; }
  .closing { min-height: 82svh; padding-bottom: 110px; }.closing__meta { grid-template-columns: 1fr; gap: 8px; }
  .footer { grid-template-columns: 1fr; padding-bottom: 100px; }.footer > p { grid-column: 1; }.footer nav { margin-top: 18px; }
  .compare input { writing-mode: vertical-lr; direction: rtl; }
  .compare__line span { font-size: 0; }
  .compare__line span::before { content: "↕"; font-size: 16px; }
  .mobile-cta { position: fixed; z-index: 780; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); min-height: 54px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; background: var(--white); color: var(--black); border: 1px solid var(--black); text-decoration: none; font-size: 14px; transform: translateY(140%); transition: transform .35s var(--ease-out); }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta.is-menu-blocked { transform: translateY(140%); }
}

@media (max-width: 480px) {
  .head__clock { font-size: 8px; }
  .hero__truth { align-items: flex-start; line-height: 1.5; }.hero__truth span { margin-top: 3px; flex: 0 0 auto; }
  .location-list { grid-template-columns: 1fr; }.location-list li + li { border-left: 0; border-top: 1px solid var(--line-dark); }
  .process { grid-template-columns: 1fr; }.process li { min-height: 210px; padding-left: 0 !important; border-right: 0; }
  .price-row { min-height: 76px; grid-template-columns: 1fr auto 18px auto 25px; }.price-row > span { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .intro { display: none; }
  .js .hero h1 span { transform: none; }
  .map__artwrap { opacity: 1; }
}

@media print {
  .intro, .grain, .progress, .head, .mobile-nav, .mobile-cta, .hero__scroll { display: none !important; }
  body, .hero, .basel, .closing { background: white !important; color: black !important; }
  .hero { min-height: auto; }.format { break-inside: avoid; }
}