/* =====================================================================
   PureArt – Cyberpunk-Kreidetafel
   dunkel · glänzend · transparent · Pinsel- und Kreidestriche
   Pinsel/Kreide-Grafiken: chalk.css (CSS-Variablen --b-*, --dust, --smear)
   ===================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --bg: #08080b;
  --ink: #f4f2f3;
  --muted: rgba(244, 242, 243, .7);
  --faint: rgba(244, 242, 243, .45);
  --pink: #ff2e88;
  --mint: #2fffcb;
  --chalk: #f4f1ea;
  --line: rgba(255, 255, 255, .12);
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "carbon", var(--font);
  --kicker: "carbon", var(--font);
  --hand: "carbon-fence", "carbon", var(--font);
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 17px/1.65 var(--font);
  color: var(--ink);
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(255, 46, 136, .13), transparent 62%),
    radial-gradient(900px 640px at -12% 34%, rgba(47, 255, 203, .055), transparent 62%),
    var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Tafel: verwischte Kreide + feiner Staub (dezenter als im Chat-Widget) */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before { background: var(--smear) 0 0 / 900px 900px; opacity: .045; }
body::after { background: var(--dust) 0 0 / 180px 180px; opacity: .5; }

img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--pink); color: #14060d; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--pink); color: #14060d; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- Typografie */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: .005em; }
.h2 { font-size: clamp(30px, 3.7vw, 54px); }
.kicker {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 400 14px/1 var(--kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--mint);
}
.kicker::before { content: ""; width: 34px; height: 6px; flex: none; background: var(--b-mint-h) center / 100% 100% no-repeat; }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--muted); max-width: 56ch; }
.muted { color: var(--muted); }
.pink { color: var(--pink); }
.mint { color: var(--mint); }

/* Pinsel-Unterstrich unter einem Wort, zeichnet sich beim Einblenden */
.ul { position: relative; isolation: isolate; white-space: nowrap; }
.ul::after {
  content: ""; position: absolute; z-index: -1; left: -.12em; right: -.18em; bottom: -.1em; height: .34em;
  background: var(--b-pink-u) center / 100% 100% no-repeat;
  transform-origin: left center; transition: transform .9s var(--ease) .35s;
}
.ul--mint::after { background-image: var(--b-mint-u); }
.ul--chalk::after { background-image: var(--b-chalk-u); opacity: .9; }
.rv:not(.in) .ul::after, .rv:not(.in).ul::after { transform: scaleX(0); }

/* ---------------------------------------------------------------- Skizzen-Rahmen
   Pinsellinien, die sich an den Ecken kreuzen und überstehen (+ versetzte Mint-Linie) */
.sk { position: relative; }
.sk::before, .sk::after { content: ""; position: absolute; pointer-events: none; z-index: 3; transition: opacity .4s var(--ease); }
.sk::before {
  inset: -12px;
  background:
    var(--b-pink-h) 0 10px / 100% 5px no-repeat,
    var(--b-pink-h2) 0 calc(100% - 10px) / 100% 5px no-repeat,
    var(--b-pink-v) 10px 0 / 5px 100% no-repeat,
    var(--b-pink-v2) calc(100% - 10px) 0 / 5px 100% no-repeat;
  transform: rotate(-.35deg);
  filter: drop-shadow(0 0 2.5px rgba(255, 46, 136, .55));
}
.sk::after {
  inset: -7px -10px -9px -6px;
  background:
    var(--b-mint-h2) 16px 10px / calc(100% - 44px) 4px no-repeat,
    var(--b-mint-v) calc(100% - 9px) 28px / 4px calc(100% - 32px) no-repeat,
    var(--b-mint-h) 34px calc(100% - 8px) / calc(100% - 38px) 4px no-repeat,
    var(--b-mint-v2) 8px 4px / 4px calc(100% - 40px) no-repeat;
  opacity: .8;
  transform: rotate(.55deg);
}
.sk--alt::before { transform: rotate(.4deg); }
.sk--alt::after { transform: rotate(-.5deg); }
.sk--quiet::after { display: none; }

/* Glas wie das Chat-Fenster */
.glass {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .035) 24%, rgba(255, 255, 255, 0) 42%),
    var(--dust) 0 0 / 180px 180px,
    radial-gradient(120% 80% at 100% 0%, rgba(255, 46, 136, .12), transparent 60%),
    radial-gradient(100% 70% at 0% 100%, rgba(47, 255, 203, .06), transparent 60%),
    rgba(12, 12, 16, .64);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border-radius: 4px;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .9), 0 0 50px -24px rgba(255, 46, 136, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  --c: var(--pink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: #14060d; background: var(--c);
  clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%);
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}
.btn:hover { transform: translateY(-2px); background: #ff4b9b; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-mint { --c: var(--mint); color: #04201a; }
.btn-mint:hover { background: #6effdc; }
.btn-ghost {
  color: var(--ink); background: transparent; clip-path: none;
}
.btn-ghost::before {
  content: ""; position: absolute; inset: -4px -8px; pointer-events: none;
  background:
    var(--b-mint-h) 0 4px / 100% 5px no-repeat,
    var(--b-mint-h2) 0 calc(100% - 4px) / 100% 5px no-repeat,
    var(--b-mint-v) 8px 0 / 5px 100% no-repeat,
    var(--b-mint-v2) calc(100% - 8px) 0 / 5px 100% no-repeat;
  opacity: .85; transition: opacity .25s;
}
.btn-ghost:hover { background: rgba(47, 255, 203, .08); }
.btn-ghost:hover::before { opacity: 1; }
.btn-row { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; }

/* Textlink mit Pfeil */
.more { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--display); letter-spacing: .06em; color: var(--mint); text-decoration: none; }
.more svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.more:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- Navigation */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); transition: background .3s, box-shadow .3s; }
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; opacity: 0; transition: opacity .3s;
  background: var(--b-mint-h) center / 100% 100% no-repeat;
}
.nav.scrolled {
  background: rgba(10, 10, 14, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.nav.scrolled::after { opacity: .45; }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { width: auto; height: 36px; } /* Original-Logo (feste Markenschrift) */
.menu { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.menu a:not(.btn) {
  position: relative; text-decoration: none; font: 700 13.5px/1 var(--display); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 10px 0; transition: color .2s;
}
.menu a:not(.btn)::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: 0; height: 5px;
  background: var(--b-pink-h) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.menu a:not(.btn):hover, .menu a.on { color: #fff; }
.menu a:not(.btn):hover::after, .menu a.on::after { transform: none; }
.menu .btn { min-height: 44px; padding: 0 20px; font-size: 13px; }
.menu-social { gap: 8px; }
.menu-social a { width: 40px; height: 40px; }
.menu-social a svg { width: 19px; height: 19px; }
@media (max-width: 1340px) and (min-width: 1121px) { .menu-social { display: none; } }
.burger { display: none; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; position: relative; color: #fff; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger span:nth-child(1) { top: 17px; transform: rotate(-2deg); }
.burger span:nth-child(2) { top: 27px; transform: rotate(1.5deg); right: 16px; }
.nav.open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav.open .burger span:nth-child(2) { top: 22px; right: 11px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- Abschnitte */
.section { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .lead { margin-top: 22px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .kicker { justify-content: center; }
.sec-head.center .lead { margin-left: auto; margin-right: auto; }
.rule { height: 6px; margin: 0 auto; max-width: var(--wrap); background: var(--b-chalk-h) center / 100% 100% no-repeat; opacity: .16; }

/* Einblenden beim Scrollen */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .08s; } .js .rv.d2 { transition-delay: .16s; } .js .rv.d3 { transition-delay: .24s; }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; min-height: min(100svh, 940px); display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 70px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.hero-title { font-size: clamp(38px, 5.1vw, 72px); line-height: 1.02; margin: 0 0 28px; }
.hero-title .big { display: block; font-size: 1.32em; color: var(--pink); text-shadow: 0 0 28px rgba(255, 46, 136, .45); margin: .06em 0 .1em; }
.hero-title .big .ul::after { background-image: var(--b-chalk-u); opacity: .85; bottom: -.16em; }
.hero .lead { margin: 0 0 34px; }
.hero .btn-row { margin-bottom: 34px; }
.build-note {
  display: inline-flex; gap: 10px; align-items: flex-start; max-width: 54ch; margin: 0; padding: 12px 16px;
  font-size: 13.5px; line-height: 1.5; color: var(--faint); background: rgba(255, 255, 255, .035); border-radius: 2px;
}
.build-note b { color: var(--ink); font-weight: 600; }
.build-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pink); }

.hero-art { position: relative; aspect-ratio: 1 / 1.04; }
.ha { position: absolute; margin: 0; }
.ha img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); }
.ha-web { top: 4%; right: 8%; width: 72%; aspect-ratio: 985 / 660; transform: rotate(2.2deg); }
.ha-poster { top: 30%; left: 0; width: 45%; aspect-ratio: 4 / 5; transform: rotate(-4deg); z-index: 2; }
.ha-photo { bottom: 0; right: 17%; width: 42%; aspect-ratio: 4 / 5; transform: rotate(3deg); z-index: 1; }
.ha { animation: drift 9s ease-in-out infinite alternate; }
.ha-poster { animation-duration: 11s; animation-delay: -3s; }
.ha-photo { animation-duration: 10s; animation-delay: -6s; }
@keyframes drift { to { translate: 0 -10px; } }
/* Kreide-Beschriftung mit Pfeil (Idee aus dem PureArt-Logo-Plakat) */
.tag { position: absolute; z-index: 4; font: 400 clamp(13px, 1.25vw, 17px)/1 var(--hand); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk); white-space: nowrap; }
.tag svg { position: absolute; width: 64px; height: 44px; color: var(--chalk); opacity: .85; }
.tag-web { top: -3%; left: 6%; }
.tag-web svg { left: 100%; top: 4px; margin-left: 4px; }
.tag-grafik { left: -2%; bottom: 3%; }
.tag-grafik svg { left: 18%; bottom: 100%; margin-bottom: 2px; transform: scaleY(-1) rotate(10deg); }
/* „Fotografie“ rechts neben dem Foto, Pfeil kommt von rechts an die Bildkante */
.tag-foto { right: -3%; top: 53%; }
.tag-foto svg { right: 38%; top: 100%; margin-top: 6px; transform: scaleX(-1) rotate(-4deg); }

/* gezeichnete Pfeile: Strich zeichnet sich */
/* stroke-* wird an die Pfade im <use> vererbt (pathLength=1) */
.draw { overflow: visible; }
.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .5s; }
.in .draw path { stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- Laufband */
.marquee { position: relative; padding: clamp(26px, 4vw, 44px) 0; overflow: hidden; border-block: 0; }
.marquee::before, .marquee::after { content: ""; position: absolute; left: -2%; right: -2%; height: 6px; background: var(--b-chalk-h) center / 100% 100% no-repeat; opacity: .16; }
.marquee::before { top: 0; transform: rotate(-.3deg); }
.marquee::after { bottom: 0; background-image: var(--b-chalk-h2); transform: rotate(.25deg); }
.mq-row { display: flex; width: max-content; white-space: nowrap; }
.mq-row + .mq-row { margin-top: 6px; }
.mq-track { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); animation: mq 42s linear infinite; }
.mq-row.rev .mq-track { animation-name: mq-rev; animation-duration: 56s; }
.mq-track span { font: 700 clamp(38px, 6.4vw, 92px)/1.12 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.mq-track .out { color: transparent; -webkit-text-stroke: 1.4px rgba(244, 241, 234, .7); }
.mq-track img { width: clamp(34px, 4vw, 56px); height: auto; opacity: .5; flex: none; }
@keyframes mq { to { transform: translateX(-100%); } }
@keyframes mq-rev { from { transform: translateX(-100%); } to { transform: none; } }

/* ---------------------------------------------------------------- Schwerpunkte */
.disc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 6vw, 96px); align-items: start; }
.disc-list { list-style: none; margin: 0; padding: 0; }
.disc-item { position: relative; padding: 30px 0 32px 0; outline: none; }
.disc-item + .disc-item::before {
  content: ""; position: absolute; left: -10px; right: 0; top: -3px; height: 6px;
  background: var(--b-chalk-h) center / 100% 100% no-repeat; opacity: .18;
}
.disc-item:nth-child(odd)::before { background-image: var(--b-chalk-h2); }
.disc-item h3 { font-size: clamp(28px, 3.3vw, 46px); color: rgba(244, 242, 243, .42); transition: color .35s, transform .45s var(--ease); cursor: default; }
.disc-item h3 small { display: block; margin-top: 8px; font: 400 13px/1 var(--kicker); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); opacity: .8; }
.disc-item.on h3 { color: #fff; transform: translateX(8px); }
.disc-item p { margin: 14px 0 0; color: var(--muted); max-width: 54ch; }
.disc-item .tags { margin-top: 16px; }
.disc-thumb { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tags li { font: 400 12px/1 var(--kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--mint); padding: 8px 10px; background: rgba(47, 255, 203, .06); box-shadow: inset 0 0 0 1.5px rgba(47, 255, 203, .32); border-radius: 2px; }
.disc-view { position: sticky; top: calc(var(--nav-h) + 40px); aspect-ratio: 4 / 5; }
.disc-view .stage { position: absolute; inset: 0; overflow: hidden; border-radius: 2px; background: #000; }
.dv { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease), transform .9s var(--ease); }
.dv.on { opacity: 1; transform: none; }
.dv > img, .dv > video { width: 100%; height: 100%; object-fit: cover; }
/* Logo-Animation ist quadratisch: ganz zeigen, nichts abschneiden */
.dv > video, .disc-thumb video { object-fit: contain; background: #000; }
.dv-web { background: radial-gradient(90% 70% at 70% 20%, rgba(255, 46, 136, .25), transparent 60%), #0b0b10; }
.dv-web img { position: absolute; width: 84%; height: auto; border-radius: 3px; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .95); }
.dv-web img:nth-child(1) { left: 5%; top: 9%; transform: rotate(-2deg); }
.dv-web img:nth-child(2) { right: 4%; bottom: 10%; transform: rotate(2.5deg); }
.dv-cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; font: 400 12.5px/1 var(--kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--chalk); text-shadow: 0 1px 8px #000; }

/* ---------------------------------------------------------------- Arbeiten / Portfolio */
.tabs { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 clamp(30px, 4vw, 46px); }
.tab {
  position: relative; padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: 700 clamp(15px, 1.4vw, 18px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); transition: color .2s;
}
.tab sup { font: 400 11px var(--kicker); color: var(--mint); margin-left: 4px; vertical-align: super; }
.tab::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -2px; height: 7px; background: var(--b-pink-u) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: #fff; }
.tab[aria-selected="true"]::after { transform: none; }
.panel[hidden] { display: none; }
.masonry { columns: 3 280px; column-gap: 20px; }
.tile { position: relative; display: block; margin: 0 0 20px; break-inside: avoid; text-decoration: none; cursor: zoom-in; }
.tile img { width: 100%; height: auto; border-radius: 2px; transition: transform .6s var(--ease), filter .4s; }
.tile .ph { display: block; overflow: hidden; border-radius: 2px; background: #111; }
.tile::before, .tile::after { opacity: 0; }
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile:hover::after, .tile:focus-visible::after { opacity: .8; }
.tile:hover img { transform: scale(1.03); }
.tile:focus-visible { outline: none; }
.tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 16px 14px;
  font: 400 13px/1.2 var(--kicker); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75)); opacity: 0; transition: opacity .3s; border-radius: 0 0 2px 2px;
}
.tile:hover .cap, .tile:focus-visible .cap { opacity: 1; }
.masonry .tile.extra { display: none; }
.masonry.all .tile.extra { display: block; }
.show-more { display: flex; justify-content: center; margin-top: 26px; }

.web-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 44px); }
.wcard { position: relative; display: flex; flex-direction: column; gap: 18px; text-decoration: none; }
.wcard .shot { position: relative; aspect-ratio: 985 / 660; overflow: hidden; border-radius: 3px; background: #0b0b10; box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .95); }
.wcard .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.wcard:hover .shot img { transform: scale(1.03); }
.wcard h3 { font-size: clamp(20px, 1.9vw, 26px); }
.wcard p { margin: 0; color: var(--muted); font-size: 16px; }
.wcard .shot.demo { display: grid; place-items: center; background: radial-gradient(80% 70% at 30% 20%, rgba(47, 255, 203, .14), transparent 60%), radial-gradient(80% 70% at 80% 90%, rgba(255, 46, 136, .2), transparent 60%), #0b0b10; }
.wcard .shot.demo svg { width: 70%; height: auto; }
.wcard .shot.demo img.robot { width: auto; height: 92%; object-fit: contain; align-self: end; }

/* ---------------------------------------------------------------- Motion */
.motion .sec-head { margin-bottom: 10px; }
.mo-stage { position: relative; aspect-ratio: 16 / 9; max-width: 1100px; margin: 0 auto; }
.mo-video { position: absolute; left: 50%; top: 50%; width: min(52%, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); margin: 0; }
.mo-video video, .mo-video img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.mo-label { position: absolute; font: 400 clamp(13px, 1.5vw, 21px)/1 var(--hand); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); white-space: nowrap; }
.mo-label svg { position: absolute; width: clamp(52px, 7vw, 92px); height: auto; color: var(--chalk); opacity: .8; }
.mo-label:nth-child(odd) { color: var(--chalk); }
.mo-label.l1 { left: 9%; top: 10%; } .mo-label.l1 svg { left: 70%; top: 100%; margin-top: 6px; transform: rotate(18deg); }
.mo-label.l2 { right: 9%; top: 6%; } .mo-label.l2 svg { right: 60%; top: 100%; margin-top: 6px; transform: scaleX(-1) rotate(18deg); }
.mo-label.l3 { left: 0; top: 48%; } .mo-label.l3 svg { left: 100%; top: -14px; margin-left: 8px; transform: rotate(-12deg); }
.mo-label.l4 { right: 0; top: 54%; } .mo-label.l4 svg { right: 100%; top: -20px; margin-right: 8px; transform: scaleX(-1) rotate(-12deg); }
.mo-label.l5 { left: 13%; bottom: 4%; } .mo-label.l5 svg { left: 75%; bottom: 100%; margin-bottom: 6px; transform: scaleY(-1) rotate(14deg); }
.mo-label.l6 { right: 12%; bottom: 2%; } .mo-label.l6 svg { right: 70%; bottom: 100%; margin-bottom: 6px; transform: scale(-1, -1) rotate(14deg); }
.mo-label.pink { color: var(--pink); } .mo-label.mint { color: var(--mint); }
.mo-foot { text-align: center; margin-top: 18px; }

/* ---------------------------------------------------------------- Ablauf */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding-top: 118px; }
.step h3 { font-size: clamp(22px, 2.1vw, 30px); margin-bottom: 12px; }
.step p { margin: 0; color: var(--muted); font-size: 16px; }
.promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(60px, 8vw, 100px); padding: clamp(26px, 4vw, 46px); }
.promise h3 { font-size: 21px; margin-bottom: 10px; color: #fff; }
.promise .kicker { grid-column: 1 / -1; margin: 0; }
.promise p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ---------------------------------------------------------------- Über mich */
.about { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.about-photo { position: relative; margin: 0; }
.about-photo .ph { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.stamp { position: absolute; right: -6%; bottom: -5%; z-index: 4; display: grid; place-items: center; width: clamp(120px, 13vw, 160px); aspect-ratio: 1; transform: rotate(-8deg); text-align: center; }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pink); filter: drop-shadow(0 0 6px rgba(255, 46, 136, .6)); }
.stamp b { display: block; font: 700 clamp(34px, 3.8vw, 48px)/1 var(--display); color: #fff; }
.stamp span { display: block; margin-top: 4px; font: 400 11px/1.2 var(--kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--chalk); }
.about-text p { color: var(--muted); margin: 0 0 18px; }
.about-text p strong { color: var(--ink); font-weight: 600; }
.about-text .h2 { margin-bottom: 26px; }
.toolbox { margin-top: clamp(60px, 8vw, 110px); padding: clamp(26px, 4vw, 48px); }
.toolbox-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 30px; margin-bottom: 30px; }
.toolbox-head h3 { font-size: clamp(24px, 2.4vw, 34px); }
.toolbox-head p { margin: 0; color: var(--faint); font-size: 15px; max-width: 46ch; }
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; list-style: none; margin: 0; padding: 0; }
.tools li { position: relative; padding-top: 18px; }
.tools li::before { content: ""; position: absolute; left: -4px; top: 0; width: 70%; height: 6px; background: var(--b-pink-h) center / 100% 100% no-repeat; }
.tools li:nth-child(even)::before { background-image: var(--b-mint-h2); }
.tools strong { display: block; font: 700 clamp(17px, 1.5vw, 21px)/1.15 var(--display); letter-spacing: .02em; margin-bottom: 8px; }
.tools small { display: block; font: 400 11.5px/1 var(--kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin-bottom: 10px; }
.tools p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------- CTA-Blöcke (Unterseiten) */
.cta-bot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(30px, 5vw, 70px); }
.cta-bot .h2 { margin-bottom: 22px; }
.cta-bot p { color: var(--muted); margin: 0 0 30px; max-width: 54ch; }
.cta-bot .robot { position: relative; justify-self: center; width: min(300px, 100%); }
.cta-bot .robot img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); animation: float 6s ease-in-out infinite; }
.cta-bot .robot::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -14px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 46, 136, .4), transparent); animation: shadow 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px); } }
@keyframes shadow { 50% { transform: scaleX(.8); opacity: .6; } }
.checks { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; color: var(--ink); font-size: 16px; }
.checks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 14px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1.5 7.8 6.4 12 16.6 1.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1.5 7.8 6.4 12 16.6 1.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.cta-social { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(22px, 4vw, 56px); align-items: center; }
.cta-social .face { width: clamp(110px, 12vw, 150px); aspect-ratio: 1; margin: 0; }
.cta-social .face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--pink), 0 0 30px rgba(255, 46, 136, .45); }
.cta-social h2 { font-size: clamp(26px, 3vw, 42px); margin-bottom: 12px; }
.cta-social p { margin: 0; color: var(--muted); }
.soc { display: flex; gap: 14px; }
.soc a { --c: var(--pink); display: grid; place-items: center; width: 56px; height: 56px; color: #fff; text-decoration: none; border-radius: 2px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); transition: color .2s, box-shadow .2s, transform .25s var(--ease); }
.soc a svg { width: 26px; height: 26px; }
.soc a:hover { color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 22px -4px var(--c); transform: translateY(-3px); }
.soc a.tt { --c: var(--mint); } .soc a.tw { --c: #c7a8ff; }

/* ---------------------------------------------------------------- Kontakt */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact .h2 { margin-bottom: 24px; }
.contact-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 16px; align-items: center; }
.contact-list .ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; color: var(--mint); background: rgba(47, 255, 203, .06); box-shadow: inset 0 0 0 1.5px rgba(47, 255, 203, .3); border-radius: 2px; }
.contact-list .ic svg { width: 22px; height: 22px; }
.contact-list small { display: block; font: 400 11.5px/1 var(--kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.contact-list a, .contact-list button { color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.contact-list a:hover, .contact-list button:hover { color: var(--mint); }
.cform { padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; }
.cform h3 { font-size: clamp(22px, 2vw, 28px); }
.field { position: relative; display: grid; gap: 8px; }
.field > span { font: 400 12px/1 var(--kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.field input, .field textarea {
  width: 100%; padding: 14px 15px; border: 0; border-radius: 2px; outline: none;
  font: 400 16px/1.5 var(--font); color: #fff; background: rgba(0, 0, 0, .34); resize: vertical;
}
.field textarea { min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .32); }
.field::after {
  content: ""; position: absolute; left: -6px; right: -3px; bottom: -3px; height: 5px; pointer-events: none;
  background: rgba(47, 255, 203, .5); -webkit-mask: var(--m-h) 0 0 / 100% 100% no-repeat; mask: var(--m-h) 0 0 / 100% 100% no-repeat;
  transition: background .2s;
}
.field:focus-within::after { background: var(--mint); }
.field:focus-within input, .field:focus-within textarea { background: rgba(0, 0, 0, .44); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pink); }
.consent a { color: var(--ink); }
.form-foot { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.form-status { margin: 0; font-size: 15px; min-height: 1.4em; }
.form-status.ok { color: var(--mint); }
.form-status.err { color: #ff8a80; }
.cform .btn[disabled] { opacity: .55; cursor: wait; transform: none; }

/* ---------------------------------------------------------------- Footer */
.foot { position: relative; padding: clamp(60px, 8vw, 96px) 0 34px; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--b-pink-h) center / 100% 100% no-repeat; opacity: .55; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.foot-brand img { width: 150px; height: auto; margin-bottom: 18px; }
.foot-brand p { margin: 0; color: var(--muted); font-size: 15px; max-width: 34ch; }
.foot h4 { font: 400 12.5px/1 var(--kicker); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin: 6px 0 18px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { color: var(--muted); text-decoration: none; font-size: 15.5px; transition: color .2s; }
.foot ul a:hover { color: #fff; }
.foot .soc { margin-top: 4px; }
.foot .soc a { width: 46px; height: 46px; }
.foot .soc a svg { width: 22px; height: 22px; }
.foot-cities { margin: clamp(36px, 5vw, 56px) 0 0; font-size: 14px; line-height: 1.9; color: var(--faint); }

.foot-cities a { color: var(--muted); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(44px, 6vw, 70px); padding-top: 22px; font-size: 13.5px; color: var(--faint); position: relative; }
.foot-bottom::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--b-chalk-h2) center / 100% 100% no-repeat; opacity: .15; }
.foot-bottom a { color: var(--muted); }

/* Nach oben */
.totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 50px; height: 50px; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(12, 12, 16, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 2px;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease);
}
.totop::before { inset: -9px; }
.totop::after { inset: -5px -7px -6px -4px; }
.totop svg { width: 20px; height: 20px; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------------------------------------------------------- Lightbox */
.lb { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lb::backdrop { background: rgba(5, 5, 8, .94); }
.lb[open] { display: block; }
.lb-fig { position: absolute; inset: 64px 76px 74px; margin: 0; display: grid; place-items: center; }
.lb-fig img { max-width: 100%; max-height: 100%; max-height: calc(100vh - 138px); max-height: calc(100dvh - 138px); width: auto; height: auto; object-fit: contain; border-radius: 2px; box-shadow: 0 40px 100px -30px #000; } /* immer vollständig sichtbar */
.lb-cap { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font: 400 13px/1.2 var(--kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 70px; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .06); border-radius: 2px; transition: background .2s, color .2s; }
.lb-btn:hover { background: rgba(255, 46, 136, .2); color: var(--pink); }
.lb-btn svg { width: 24px; height: 24px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: calc(50% - 26px); }
.lb-next { right: 14px; top: calc(50% - 26px); }

/* ---------------------------------------------------------------- Projekt im Fokus: Aurelia */
.case-intro { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.case-copy .lead { margin: 22px 0 26px; }
.case-copy .checks { margin-bottom: 32px; }
.case-visual { position: relative; padding: 0 0 13% 9%; }
a.case-visual { display: block; color: inherit; text-decoration: none; }
.browser { position: relative; margin: 0; border-radius: 6px; background: #0b0b10; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95), 0 0 70px -30px rgba(201, 164, 92, .55); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #16161c; border-radius: 6px 6px 0 0; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.browser-bar i:first-child { background: var(--pink); opacity: .8; }
.browser-bar span { flex: 1; max-width: 280px; margin-left: 12px; padding: 0 10px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .06); font: 400 11px/18px var(--font); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { width: 100%; height: auto; border-radius: 0 0 6px 6px; }
.phone { position: relative; margin: 0; padding: 6px; border-radius: 24px; background: #0d0d12; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), 0 30px 70px -20px #000, 0 0 44px -22px rgba(255, 46, 136, .7); }
.phone::before { content: ""; position: absolute; top: 12px; left: 50%; width: 26%; height: 8px; transform: translateX(-50%); border-radius: 6px; background: #000; z-index: 2; }
.phone img { width: 100%; height: auto; border-radius: 19px; }
.case-visual > .phone { position: absolute; left: 0; bottom: 0; width: 27%; z-index: 4; animation: float 7s ease-in-out infinite; }
.case-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 70px) clamp(26px, 4vw, 56px); margin-top: clamp(80px, 10vw, 140px); }
.cf-img { margin: 0 0 22px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #000; box-shadow: 0 30px 70px -28px #000, inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cf-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.cf:hover .cf-img img { transform: scale(1.03); }
.cf h3 { font-size: clamp(21px, 2vw, 28px); margin-bottom: 10px; }
.cf p { margin: 0; color: var(--muted); max-width: 56ch; }
.case-mobile { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(30px, 5vw, 80px); align-items: center; margin-top: clamp(90px, 11vw, 150px); }
.case-mobile h3, .screens-head h3, .case-cta h3 { font-size: clamp(24px, 2.8vw, 38px); margin-bottom: 14px; }
.case-mobile p { color: var(--muted); max-width: 46ch; }
.phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 2vw, 28px); padding-top: 40px; }
.phones .phone { width: min(31%, 230px); }
.phones .phone:nth-child(2) { transform: translateY(-40px); }
.case-screens { margin-top: clamp(90px, 11vw, 150px); }
.screens-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 30px; }
.screens-head h3 { margin: 0; }
.screens-head p { margin: 0 0 6px; font-size: 15px; }
.screens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 38%); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 14px 30px; margin: 0 -14px; scrollbar-width: thin; scrollbar-color: var(--pink) rgba(255, 255, 255, .06); }
.screens .tile { margin: 0; scroll-snap-align: start; }
.screens .tile .ph { aspect-ratio: 16 / 10; }
.screens .tile img { height: 100%; object-fit: cover; object-position: top; }
.screens .tile .cap { opacity: 1; }
.case-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px 40px; margin-top: clamp(50px, 6vw, 80px); padding: clamp(24px, 4vw, 44px); }
.case-cta p { margin: 0; color: var(--muted); }
.disc-link { margin: 18px 0 0; }
.dv-web img.m { width: 31%; left: auto; top: auto; right: 7%; bottom: 7%; border-radius: 16px; transform: rotate(3deg); box-shadow: 0 0 0 5px #0d0d12, 0 0 0 6.5px rgba(255, 255, 255, .16), 0 30px 60px -16px #000; }
.ha-web { aspect-ratio: 16 / 10; }
@media (max-width: 980px) {
  .case-intro, .case-mobile, .case-features { grid-template-columns: minmax(0, 1fr); }
  .case-visual { width: min(640px, 100%); margin: 10px auto 0; }
  .screens { grid-auto-columns: minmax(260px, 70%); }
}
@media (max-width: 640px) {
  .case-visual { padding: 0 0 18% 12%; }
  .case-visual > .phone { width: 32%; padding: 4px; border-radius: 16px; }
  .case-visual > .phone img { border-radius: 12px; }
  .phones { gap: 10px; padding-top: 26px; }
  .phones .phone { padding: 4px; border-radius: 16px; }
  .phones .phone img { border-radius: 12px; }
  .phones .phone:nth-child(2) { transform: translateY(-24px); }
  .phone::before { top: 8px; height: 6px; }
  .screens { grid-auto-columns: 84%; gap: 16px; }
}

/* ---------------------------------------------------------------- Unterseiten (Impressum, Städte) */
.page-hero { padding: calc(var(--nav-h) + clamp(50px, 8vw, 100px)) 0 clamp(30px, 4vw, 50px); }
.page-hero h1 { font-size: clamp(34px, 5vw, 64px); }
.page-hero .lead { margin-top: 20px; }
.prose { padding: clamp(26px, 4vw, 52px); max-width: 860px; margin-bottom: clamp(70px, 9vw, 120px); }
.prose h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 46px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; margin: 30px 0 10px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--ink); }
.prose a { color: var(--mint); }
.prose ul { padding-left: 20px; }
.prose hr { border: 0; height: 6px; margin: 44px 0; background: var(--b-chalk-h) center / 100% 100% no-repeat; opacity: .2; }
.city-points { list-style: none; padding: 0 !important; display: grid; gap: 14px; margin: 26px 0 34px; }
.city-points li { position: relative; padding-left: 30px; }
.city-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 5px; background: var(--b-pink-h) center / 100% 100% no-repeat; }

/* Städteseiten: Fotospots mit Pin */
.spots { list-style: none; padding: 0 !important; margin: 22px 0 8px; display: grid; gap: 20px; }
.spots li { position: relative; padding-left: 34px; }
.spots li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: var(--pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 46, 136, .5));
}
.spots li:nth-child(even)::before { background: var(--mint); }
.spots h3 { margin: 0 0 4px; font-size: 18px; color: #fff; }
.spots p { margin: 0; }
.city-more p { line-height: 2; }
.city-more a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.city-more a:hover { color: #fff; border-color: var(--pink); }
.foot-cities a, .city-more a { white-space: nowrap; }
.foot-cities a { text-decoration: none; }
.foot-cities a:hover { color: #fff; }

/* Ablauf-Icons (Neon) – sitzen auf der Kreidelinie */
.step-ic { position: absolute; left: -12px; top: 0; width: 96px; height: 96px; padding: 6px; filter: drop-shadow(0 0 10px rgba(255, 46, 136, .35)); transition: transform .4s var(--ease); }
.step:hover .step-ic { transform: translateY(-4px) scale(1.04); }
.promise-title { grid-column: 1 / -1; margin: 0; font-size: clamp(22px, 2.2vw, 30px); }
.more-title { font-size: clamp(20px, 2vw, 26px); margin: 0 0 12px; }

/* ---------------------------------------------------------------- Responsiv */
@media (max-width: 1120px) {
  .menu {
    position: fixed; inset: 0 0 auto; top: 0; height: 100vh; height: 100dvh; z-index: -1;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 90px var(--gutter) 40px;
    background: rgba(8, 8, 11, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, transform .35s var(--ease), visibility 0s .35s;
  }
  .nav.open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .35s var(--ease); }
  .menu a:not(.btn) { font-size: clamp(26px, 7vw, 38px); letter-spacing: .02em; text-transform: none; color: #fff; padding: 8px 0; }
  .menu a:not(.btn)::after { height: 7px; }
  .menu .btn { margin-top: 18px; min-height: 52px; font-size: 14px; }
  .menu-social { display: flex; margin-top: 30px; gap: 12px; }
  .menu-social a { width: 52px; height: 52px; }
  .menu-social a svg { width: 24px; height: 24px; }
  .burger { display: block; }
  .nav.open { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.open::after { opacity: 0; }
}
@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 30px); }
  .hero-grid, .disc, .about, .contact, .cta-bot { grid-template-columns: minmax(0, 1fr); }
  .hero-art { width: min(560px, 100%); margin: 20px auto 0; }
  .disc-view { display: none; }
  .disc-thumb { display: block; position: relative; margin: 20px 0 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; background: #000; }
  .disc-thumb img, .disc-thumb video { width: 100%; height: 100%; object-fit: cover; }
  .disc-item h3 { color: #fff; }
  .disc-item.on h3 { transform: none; }
  .about-photo { width: min(440px, 100%); margin: 0 auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise { grid-template-columns: minmax(0, 1fr); }
  .cta-bot .robot { width: min(220px, 70%); order: -1; }
  .cta-social { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .mo-stage { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .mo-video { position: relative; left: auto; top: auto; transform: none; width: min(440px, 100%); flex: 0 0 100%; max-width: 440px; margin: 0 auto 10px; }
  .mo-label { position: static; padding: 9px 12px; font-size: 13px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); border-radius: 2px; }
  .mo-label svg { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .web-grid { grid-template-columns: minmax(0, 1fr); }
  .steps, .tools { grid-template-columns: minmax(0, 1fr); }
  .steps { padding-left: 10px; }
  .step { padding: 0 0 0 76px; min-height: 64px; }
  .step-ic { width: 64px; height: 64px; left: -4px; top: -6px; padding: 4px; }
    .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .masonry { columns: 2 140px; column-gap: 12px; }
  .tile { margin-bottom: 12px; }
  .tile .cap { display: none; }
  .tag { display: none; }
  .hero-art { aspect-ratio: 1 / 1.1; }
  .stamp { right: -2%; }
  .lb-fig { inset: 64px 10px 90px; }
  .lb-fig img { max-height: calc(100vh - 154px); max-height: calc(100dvh - 154px); }
  .lb-prev, .lb-next { top: auto; bottom: 14px; }
  .lb-cap { bottom: 32px; padding: 0 76px; }
  .btn { min-height: 50px; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv { opacity: 1; transform: none; }
  .draw path { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- Schwerpunkte: 3D-Drehbühne
   Karten stehen auf einem echten 3D-Kreidering am Boden (rotateX 90°), vorne im pinken Spot. */
.orbit { --cw: clamp(230px, 27vw, 360px); --persp: 1500px; --rx: 420px; --rz: 380px; position: relative; }
.orbit-stage {
  position: relative; height: calc(var(--cw) * 1.25 + 76px); overflow: hidden;
  perspective: var(--persp); perspective-origin: 50% 30%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline: none;
}
.orbit-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(47, 255, 203, .5); }
.orbit-stage.drag { cursor: grabbing; }
.orbit-track {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform-origin: 50% calc(24px + var(--cw) * 1.25) calc(var(--rz) * -1);
}
.orbit-floor {
  position: absolute; left: 50%; top: calc(24px + var(--cw) * 1.25);
  width: calc(var(--rx) * 2); height: calc(var(--rz) * 2);
  margin: calc(var(--rz) * -1) 0 0 calc(var(--rx) * -1);
  transform: translateZ(calc(var(--rz) * -1)) rotateX(90deg);
  background: radial-gradient(36% 28% at 50% 97%, rgba(255, 46, 136, .5), transparent 72%), radial-gradient(60% 50% at 50% 50%, rgba(47, 255, 203, .05), transparent 70%);
  pointer-events: none;
}
.orbit-floor svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-floor path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.orbit-floor .r1 { stroke: var(--chalk); stroke-opacity: .5; stroke-width: 2.2; stroke-dasharray: 11 5 26 4 5 7; }
.orbit-floor .r2 { stroke: var(--chalk); stroke-opacity: .22; stroke-width: 1.4; stroke-dasharray: 3 9 18 6; }
.orbit-floor .spot { stroke: var(--pink); stroke-width: 4; filter: drop-shadow(0 0 6px var(--pink)); }

.orbit-card {
  --d: 1;
  position: absolute; top: 24px; left: 50%; width: var(--cw); aspect-ratio: 4 / 5; margin-left: calc(var(--cw) / -2);
  will-change: transform;
  filter: brightness(calc(.36 + var(--d) * .64)) saturate(calc(.5 + var(--d) * .5));
}
.orbit-card.sk::before, .orbit-card.sk::after { opacity: calc(var(--d) * var(--d) * var(--d) * var(--d) * var(--d)); transition: none; }
.oc-media {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4px; background: #0b0b10;
  box-shadow: 0 50px 70px -38px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.oc-media > img, .oc-media > video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Glanz + Lesbarkeit des Titels */
.oc-media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 40%); mix-blend-mode: screen; }
.oc-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 8, 0) 46%, rgba(5, 5, 8, .88)); }
.oc-web { background: radial-gradient(90% 70% at 70% 15%, rgba(255, 46, 136, .26), transparent 60%), radial-gradient(70% 60% at 10% 90%, rgba(47, 255, 203, .1), transparent 60%), #0b0b10; }
.oc-web > img.d { position: absolute; left: 7%; top: 8%; width: 112%; height: auto; border-radius: 4px; transform: rotate(-4deg); box-shadow: 0 24px 50px -14px #000; }
.oc-web > img.m { position: absolute; left: auto; right: 9%; top: auto; bottom: 19%; width: 37%; height: auto; border-radius: 13px; transform: rotate(5deg); box-shadow: 0 0 0 4px #0d0d12, 0 0 0 5.5px rgba(255, 255, 255, .16), 0 30px 50px -12px #000; }
.oc-motion > video { object-fit: contain; background: #000; }
.oc-title { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 3; margin: 0; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); pointer-events: none; transition: text-shadow .8s var(--ease); }
.orbit-card.front .oc-title { text-shadow: 0 0 22px rgba(255, 46, 136, .55), 0 2px 18px rgba(0, 0, 0, .7); }

.orbit-controls { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 24px); margin-top: clamp(10px, 2vw, 22px); }
.orbit-btn {
  flex: none; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
  transition: color .2s, box-shadow .2s, transform .25s var(--ease);
}
.orbit-btn svg { width: 22px; height: 22px; }
.orbit-btn:hover { color: var(--pink); box-shadow: inset 0 0 0 1.5px var(--pink), 0 0 22px -6px var(--pink); }
.orbit-btn.prev:hover { transform: translateX(-3px); }
.orbit-btn.next:hover { transform: translateX(3px); }
.orbit-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px clamp(14px, 2.2vw, 30px); }
.orbit-nav button {
  position: relative; padding: 12px 0; border: 0; background: none; cursor: pointer;
  font: 700 clamp(14px, 1.25vw, 17px)/1 var(--display); letter-spacing: .04em; color: var(--faint); transition: color .25s;
}
.orbit-nav button::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0; height: 7px; background: var(--b-pink-u) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.orbit-nav button:hover { color: var(--ink); }
.orbit-nav button[aria-selected="true"] { color: #fff; }
.orbit-nav button[aria-selected="true"]::after { transform: none; }
.orbit-detail { display: grid; max-width: 660px; margin: clamp(16px, 2.4vw, 26px) auto 0; text-align: center; }
.od { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); filter: blur(3px); transition: opacity .3s ease, transform .3s ease, filter .3s ease, visibility 0s .3s; }
.od.on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .7s var(--ease) .22s, transform .7s var(--ease) .22s, filter .7s var(--ease) .22s; }
.od p { margin: 0 0 16px; color: var(--muted); }
.od .tags { justify-content: center; margin: 0 0 18px; }

/* Schlagwörter: schlicht statt Mini-Label-Optik */
.tags li { font: 500 13px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); padding: 8px 12px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); border-radius: 2px; }

@media (max-width: 640px) {
  .orbit { --cw: 62vw; --persp: 900px; }
  .orbit-nav button { font-size: 12.5px; padding: 10px 0; }
  .orbit-btn { width: 44px; height: 44px; }
  .oc-title { left: 16px; right: 16px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-card { will-change: auto; }
}

/* ---------------------------------------------------------------- 3D-Szenenwechsel beim Scrollen
   Betreten: Der Abschnitt kommt aus der Tiefe (−320px), unten nach hinten geneigt (Scharnier an der Oberkante), und richtet sich auf.
   Verlassen: Er fällt nach hinten weg (Scharnier an der Unterkante, oben nach hinten) und verblasst.
   Kein Teil kommt dabei näher als die Bildebene → nichts wird vergrößert, nichts ragt aus der Seite.
   Bereiche über „entry“/„exit“ → überschneiden sich nie, auch nicht bei kurzen Abschnitten.
   Chrome/Edge/Safari: reine CSS-Scroll-Animation (GPU). Firefox: gleiche Bewegung per Skript (site.js). */
main { overflow-x: clip; }
@keyframes scene-in {
  from { opacity: 0; transform-origin: 50% 0; transform: perspective(1200px) translate3d(0, 14vh, -320px) rotateX(-34deg); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform-origin: 50% 0; transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes scene-out {
  from { opacity: 1; transform-origin: 50% 100%; transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg); }
  40%  { opacity: 1; }
  to   { opacity: 0; transform-origin: 50% 100%; transform: perspective(1200px) translate3d(0, -10vh, -340px) rotateX(32deg); }
}
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 75%) {
  @media (prefers-reduced-motion: no-preference) {
    main > :not(.rule) {
      animation-name: scene-in, scene-out;
      animation-duration: 1ms, 1ms; /* Dauer egal – der Scroll-Fortschritt steuert */
      animation-timing-function: cubic-bezier(.2, .75, .25, 1), cubic-bezier(.55, 0, .8, .45);
      /* „verlassen“ wirkt nur ab seinem Bereich, sonst würde es das Betreten überschreiben */
      animation-fill-mode: both, forwards;
      animation-timeline: view(), view();
      animation-range: entry 0% entry 75%, exit 30% exit 100%;
    }
    body > .foot {
      animation: scene-in 1ms cubic-bezier(.2, .75, .25, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
    /* Innere Elemente blenden nur noch ein – die Bewegung übernimmt der ganze Abschnitt */
    .js main .rv { transform: none; }
  }
}

/* ---------------------------------------------------------------- Mein Versprechen: drei Karten mit animierten Neon-Icons */
.promise { display: block; padding: 0; margin-top: clamp(80px, 10vw, 130px); background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.promise-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 48px; margin-bottom: clamp(30px, 4vw, 50px); }
.promise .promise-title { grid-column: auto; margin: 0; font-size: clamp(30px, 3.7vw, 54px); color: #fff; }
.promise-head p { margin: 0 0 6px; max-width: 44ch; font-size: clamp(16px, 1.25vw, 18px); }
.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.pcard { position: relative; padding: clamp(26px, 3vw, 40px); overflow: visible; transition: transform .5s var(--ease), box-shadow .5s var(--ease); isolation: isolate; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .95), 0 0 60px -22px rgba(255, 46, 136, .65), inset 0 1px 0 rgba(255, 255, 255, .14); }
.pcard.sk::before, .pcard.sk::after { opacity: 0; transition: opacity .45s var(--ease); }
.pcard.sk:hover::before { opacity: 1; }
.pcard.sk:hover::after { opacity: .8; }
.pglow { position: absolute; inset: 0; z-index: -1; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 46, 136, .2), transparent 70%); }
.pcard:hover .pglow { opacity: 1; }
.pcard h4 { margin: 0 0 12px; font: 700 clamp(22px, 2.1vw, 30px)/1.1 var(--display); color: #fff; }
.pcard p { margin: 0; color: var(--muted); font-size: 16px; }

/* Neon-Icons (eigens gezeichnet, passend zu den Ablauf-Icons) */
.pi { display: block; width: clamp(88px, 8vw, 112px); height: auto; margin: 0 0 24px -6px; overflow: visible; filter: drop-shadow(0 0 3px rgba(255, 46, 136, .95)) drop-shadow(0 0 12px rgba(255, 46, 136, .45)); transition: filter .4s, transform .5s var(--ease); }
.pcard:hover .pi { filter: drop-shadow(0 0 4px rgba(255, 46, 136, 1)) drop-shadow(0 0 20px rgba(255, 46, 136, .7)); transform: scale(1.05); }
.pi path, .pi line, .pi rect, .pi circle { fill: none; stroke: #ff4f9a; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
/* zeichnen sich beim Reinscrollen selbst */
.pi .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) .25s; }
.pi .ln.front { fill: #101016; transition-delay: .55s; }
.in .pi .ln { stroke-dashoffset: 0; }
/* Kommunikation: Tipp-Punkte */
.pi-talk .dot { fill: #ff4f9a; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.in .pi-talk .dot { animation: pi-dot 1.4s ease-in-out 1.6s infinite; }
.in .pi-talk .dot:nth-of-type(2) { animation-delay: 1.8s; }
.in .pi-talk .dot:nth-of-type(3) { animation-delay: 2s; }
@keyframes pi-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-5px); } }
/* Leidenschaft: Herzschlag + EKG */
.pi-heart .heart { transform-box: fill-box; transform-origin: center; }
.in .pi-heart .heart { animation: pi-beat 1.6s ease-in-out 1.6s infinite; }
@keyframes pi-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.08); } 28% { transform: scale(1); } 42% { transform: scale(1.05); } 56% { transform: scale(1); } }
.pi-heart .ecg-base { stroke: #ff4f9a; stroke-width: 2.2; opacity: 0; transition: opacity .8s 1.2s; }
.in .pi-heart .ecg-base { opacity: .28; }
.pi-heart .pulse { stroke: #ffd3e6; stroke-width: 3.6; stroke-dasharray: .2 1.2; stroke-dashoffset: 1.4; opacity: 0; }
.in .pi-heart .pulse { opacity: 1; animation: pi-pulse 1.6s linear 1.6s infinite; }
@keyframes pi-pulse { from { stroke-dashoffset: 1.4; } to { stroke-dashoffset: 0; } }
/* Fachwissen: Zeichenstift mit Bézier-Griffen (Griffe in Mint) */
.pi-pen .handles line, .pi-pen .handles circle { stroke: var(--mint); stroke-width: 2.2; opacity: 0; transition: opacity .8s 1.3s; }
.pi-pen .handles circle { fill: #101016; }
.in .pi-pen .handles line, .in .pi-pen .handles circle { opacity: .9; }
.pi-pen .anchor { fill: #101016; stroke-width: 2.6; opacity: 0; transition: opacity .6s 1.1s; }
.in .pi-pen .anchor { opacity: 1; }

@media (max-width: 980px) {
  .promise-grid { grid-template-columns: minmax(0, 1fr); }
  .pcard { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .pcard .pi { grid-row: span 2; width: 78px; margin: 0; }
  .pcard h4 { margin-top: 4px; }
}
@media (max-width: 480px) {
  .pcard { grid-template-columns: minmax(0, 1fr); }
  .pcard .pi { grid-row: auto; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pi .ln { stroke-dashoffset: 0; }
  .pi-talk .dot, .pi-heart .ecg-base, .pi-pen .handles line, .pi-pen .handles circle, .pi-pen .anchor { opacity: 1; }
}

/* ---------------------------------------------------------------- Werkzeugkasten: Neon-Abzeichen mit Programm-Details, 3D-Kippen */
.kit { margin-top: clamp(80px, 10vw, 130px); }
.kit .promise-head { margin-bottom: clamp(28px, 3.6vw, 46px); }
.kit-title { margin: 0; font-size: clamp(30px, 3.7vw, 54px); color: #fff; }
.kit .promise-head p { margin: 0 0 6px; max-width: 46ch; color: var(--muted); font-size: clamp(16px, 1.25vw, 18px); }
.kit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.tool { display: flex; }
.tool-in {
  position: relative; flex: 1; padding: clamp(24px, 2.6vw, 34px);
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .6s var(--ease), box-shadow .5s var(--ease);
}
.tool-in:hover { box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .95), 0 0 60px -24px rgba(255, 46, 136, .6), inset 0 1px 0 rgba(255, 255, 255, .14); }
.tool-in.sk::before, .tool-in.sk::after { opacity: 0; transition: opacity .45s var(--ease); }
.tool-in.sk:hover::before { opacity: 1; }
.tool-in.sk:hover::after { opacity: .8; }
.tool h4 { margin: 24px 0 10px; font: 700 clamp(18px, 1.5vw, 22px)/1.15 var(--display); color: #fff; }
.tool p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.badge {
  --c: var(--pink);
  position: relative; display: grid; place-items: center; width: clamp(76px, 6.4vw, 92px); aspect-ratio: 1; border-radius: 24%;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .09), transparent 60%), #0d0d12;
  box-shadow: inset 0 0 0 2px var(--c), inset 0 0 24px -8px var(--c), 0 0 22px -4px color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform .6s var(--ease), box-shadow .5s;
}
.badge b { font: 700 clamp(28px, 2.6vw, 38px)/1 var(--display); letter-spacing: .02em; color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 80%, transparent); }
.tool-in:hover .badge { box-shadow: inset 0 0 0 2px var(--c), inset 0 0 30px -6px var(--c), 0 0 34px -2px color-mix(in srgb, var(--c) 85%, transparent); }
.b-ai, .b-ki { --c: var(--mint); }
/* Photoshop: Auswahl-Ameisen */
.ants { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ants rect { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .85; animation: kit-ants .9s linear infinite; }
@keyframes kit-ants { to { stroke-dashoffset: -9; } }
/* Illustrator & InDesign: zwei Abzeichen, fächern beim Überfahren auf */
.badge-pair { position: relative; width: clamp(112px, 9.4vw, 134px); height: clamp(76px, 6.4vw, 92px); }
.badge-pair .badge { position: absolute; top: 0; }
.badge-pair .b-id { left: 0; transform: rotate(-9deg) scale(.86); }
.badge-pair .b-ai { right: 0; }
.tool-in:hover .b-id { transform: rotate(-15deg) translateX(-8px) scale(.9); }
.tool-in:hover .b-ai { transform: rotate(6deg) translateX(6px); }
/* After Effects: Mini-Timeline mit Abspielkopf */
.b-ae b { transform: translateY(-14%); }
.mini-tl { position: absolute; left: 18%; right: 18%; bottom: 17%; height: 2px; background: rgba(255, 255, 255, .2); }
.mini-tl i { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--mint); transform: rotate(45deg); }
.mini-tl i:nth-child(1) { left: 22%; } .mini-tl i:nth-child(2) { left: 72%; }
.mini-tl em { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px #fff; animation: kit-head 2.4s linear infinite; }
@keyframes kit-head { from { left: 0; } to { left: 100%; } }
/* KI: blinkender Text-Cursor */
.b-ki b { transform: translateX(-9%); }
.b-ki .caret { position: absolute; right: 20%; top: 33%; width: 3px; height: 34%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: kit-caret 1s steps(1) infinite; }
@keyframes kit-caret { 50% { opacity: 0; } }

@media (max-width: 1100px) { .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kit-grid { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 640px) { .brand img { height: 30px; } }

/* ---------------------------------------------------------------- Ausstellungs-Hinweis: deutlich sichtbar */
.exhibit {
  display: flex; gap: 14px; align-items: flex-start; max-width: 62ch; margin: 0; padding: 16px 20px 16px 18px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 46, 136, .17), rgba(255, 46, 136, .05) 62%, rgba(255, 255, 255, .02));
  box-shadow: inset 3px 0 0 var(--pink), inset 0 0 0 1px rgba(255, 46, 136, .3), 0 0 44px -18px rgba(255, 46, 136, .75);
}
.exhibit .ex-ic { flex: none; width: 26px; height: 26px; margin-top: 1px; color: var(--pink); filter: drop-shadow(0 0 6px rgba(255, 46, 136, .75)); }
.exhibit strong { display: block; margin-bottom: 5px; font: 700 17px/1.2 var(--display); letter-spacing: .03em; color: #fff; }
.exhibit span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--ink); opacity: .86; }

/* ---------------------------------------------------------------- Resonanz: echte Nachrichten als Text in Chat-Blasen */
.voices { margin-top: clamp(56px, 7vw, 90px); }
.voices-title { margin: 0 0 10px; font-size: clamp(26px, 2.8vw, 40px); color: #fff; }
.voices-lead { margin: 0 0 clamp(26px, 3vw, 38px); max-width: 58ch; color: var(--muted); }
.voices-wall { columns: 3 260px; column-gap: clamp(16px, 1.8vw, 24px); max-width: 1080px; }
.voice {
  position: relative; margin: 0 0 clamp(16px, 1.8vw, 24px); padding: 18px 20px 14px; break-inside: avoid;
  border-radius: 16px 16px 16px 4px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025) 55%), rgba(14, 14, 19, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 3px 0 0 var(--pink), 0 22px 44px -28px #000;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.voice:nth-child(even) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 3px 0 0 var(--mint), 0 22px 44px -28px #000; }
.voice:hover { transform: translateY(-3px); }
.voice blockquote { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink); }
.voice figcaption { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--faint); }
.voice figcaption::after { /* gelesen-Haken wie im Chat */
  content: ""; width: 17px; height: 11px; background: var(--mint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1.5 7.6 5.6 11.6 13.6 2.4M10.4 10.6l1 1 8-9.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1.5 7.6 5.6 11.6 13.6 2.4M10.4 10.6l1 1 8-9.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 640px) { .voices-wall { columns: 1; } .voice blockquote { font-size: 15.5px; } }

/* ---------------------------------------------------------------- Foto-Showroom: halbrunder Raum, Wände oben nach hinten geneigt
   Von außen sieht man den Raum als Modell mit „Showroom betreten“; beim Betreten fährt die Kamera hinein.
   Innen: ziehen/wischen zum Umsehen, Klick öffnet die Lightbox. Die Kamera rechnet site.js (Showroom). */
.show { position: relative; }
.show-stage {
  --tw: 110px; --th: 138px; --R: 500px; --H: 640px;
  position: relative; height: var(--H); overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer;
}
/* Ansicht mit Kamera-Perspektive; Ränder weich ausgeblendet (Maske, damit kein Kasten auf dem Hintergrund entsteht) */
.show-view {
  position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: blur(3px) brightness(.5); transition: filter .9s var(--ease);
}
/* außen leicht unscharf und abgedunkelt, beim Darüberfahren etwas klarer; beim Betreten klar */
.show-stage:hover .show-view { filter: blur(2px) brightness(.62); }
.show-stage.going .show-view { filter: blur(0) brightness(1); }
.show-stage.in .show-view { filter: none; transition: none; }
.show-stage.in { cursor: grab; }
.show-stage.in.drag { cursor: grabbing; }
.show-stage.in.over:not(.drag) { cursor: zoom-in; }
/* Raumlicht: Spot von oben, kühler Schein am Boden */
.show-view::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 38%, rgba(255, 46, 136, .09), transparent 70%), radial-gradient(45% 30% at 50% 90%, rgba(47, 255, 203, .06), transparent 70%);
}
.show-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.show-col { position: absolute; left: calc(var(--tw) * -.5); top: 0; width: var(--tw); height: 0; transform-style: preserve-3d; visibility: hidden; }
.stile { position: absolute; left: 0; display: block; width: var(--tw); height: var(--th); pointer-events: none; transform: translateZ(0); transition: transform .45s var(--ease); }
.stile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; background: #15151b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .35s; }
.stile.low { -webkit-box-reflect: below 3px linear-gradient(transparent 62%, rgba(255, 255, 255, .2)); }
.stile.hot { transform: translateZ(26px) scale(1.06); }
.stile.hot img { box-shadow: 0 0 0 2px var(--pink), 0 0 28px rgba(255, 46, 136, .6); }
/* Boden: weiches Licht, liegt flach am Wandfuß */
.show-floor {
  position: absolute; left: calc(var(--R) * -1.12); top: calc(var(--fy) - var(--R) * 1.12); width: calc(var(--R) * 2.24); height: calc(var(--R) * 2.24);
  transform: rotateX(90deg); pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 46, 136, .16), rgba(255, 46, 136, .05) 60%, transparent 92%);
}
/* Eingang (außen) und Ausgang (innen) */
.show-door {
  position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; text-align: center;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.show-door .btn { white-space: nowrap; box-shadow: 0 14px 40px -12px rgba(255, 46, 136, .7); }
.show-door small { font-size: 13.5px; color: var(--muted); text-shadow: 0 1px 10px #000; }
.show-stage.in .show-door, .show-stage.going .show-door { opacity: 0; transform: translate(-50%, calc(-50% - 14px)); pointer-events: none; }
.show-exit {
  position: absolute; top: 14px; right: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  font: 700 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--chalk); cursor: pointer;
  background: rgba(8, 8, 11, .72); border: 1px solid rgba(244, 241, 234, .22); border-radius: 2px; backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), border-color .2s, color .2s;
}
.show-exit svg { width: 16px; height: 16px; }
.show-exit:hover { color: var(--pink); border-color: var(--pink); }
.show-stage.in .show-exit { opacity: 1; pointer-events: auto; }
.show-stage :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.show-hint { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 8px 0 0; font-size: 14px; color: var(--faint); text-align: center; transition: opacity .4s; }
.show-hint b { color: var(--muted); font-weight: 600; }
.show:not(.is-in) .show-hint { opacity: 0; }
@media (max-width: 640px) {
  .show-exit { top: 10px; right: 10px; height: 36px; padding: 0 12px; font-size: 12px; }
  .show-hint { font-size: 13px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .stile, .show-door { transition: none; } }

/* ---------------------------------------------------------------- Pinsel-Cursor mit Farbspur (nur Maus) */
@media (pointer: fine) {
  html.brush-on:not(.brush-native), html.brush-on:not(.brush-native) * { cursor: none !important; }
}
.brush-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2147483646; pointer-events: none; }
.brush-cursor {
  position: fixed; left: 0; top: 0; z-index: 2147483647; width: 48px; height: 48px; pointer-events: none;
  color: var(--pink); opacity: 0; transform-origin: 4px 44px; will-change: transform; transition: opacity .2s, color .25s;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 7px rgba(255, 46, 136, .35));
}
.brush-cursor.on { opacity: 1; }
.brush-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 4px 44px; transition: transform .22s var(--ease); }
.brush-cursor.active { color: var(--mint); filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 8px rgba(47, 255, 203, .45)); }
.brush-cursor.active svg { transform: scale(1.14) rotate(-10deg); }
.brush-cursor.press svg { transform: scale(.86) rotate(8deg); }