/* hafen development — OnePager
   Layout inspiriert von arise.so: weißer Grund, ruhige Statements, versetzte Kachel-Raster mit UI-Widgets.
   Gestaltung strikt nach Hafen Music Corporate Design V1.0:
   Hafen Cyan als einzige Akzentfarbe · Tiefschwarz / Reinweiß / Nebelgrau · League Spartan + Poppins. */

:root {
  --cyan: #70EDFF;    /* Hafen Cyan */
  --black: #000000;   /* Tiefschwarz */
  --white: #FFFFFF;   /* Reinweiß */
  --grey: #6B6B6B;    /* Nebelgrau */
  --tile: #F4F4F4;    /* ruhige Kachelfläche */
  --line: rgba(0, 0, 0, .1);
  --head: 'League Spartan', sans-serif;
  --body: 'Poppins', sans-serif;
  --gutter: clamp(16px, 5vw, 80px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 48px rgba(0, 0, 0, .08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
/* Lenis (weiches Scrollen) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--white);
  color: var(--black);
  font: 400 16px/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Navigation ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.nav-logo img { height: 28px; width: auto; } /* Styleguide: min. 24px digital */
.nav-links { display: flex; gap: clamp(18px, 3vw, 40px); }
.nav-links a { font-size: 15px; font-weight: 500; position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ── Typo ── */
.statement {
  max-width: 1020px;
  font: 500 clamp(26px, 3vw, 42px)/1.32 var(--head);
  letter-spacing: -.005em;
}
.statement--sm { max-width: 760px; font-size: clamp(22px, 2.2vw, 30px); margin-bottom: clamp(40px, 5vw, 64px); }
.statement--sm + .gantt { margin-top: 0; }
.section-title { font: 500 clamp(26px, 2.6vw, 36px)/1.2 var(--head); margin-bottom: clamp(40px, 5vw, 64px); }
.section { padding-top: clamp(96px, 12vw, 176px); }

/* ── Hero ── */
.slogan { font: 800 clamp(48px, 9vw, 128px)/1 var(--head); letter-spacing: -.025em; margin-bottom: clamp(28px, 4vw, 48px); }
.hero { padding-top: clamp(64px, 9vw, 128px); }
.tile--hero { margin-top: clamp(56px, 7vw, 96px); aspect-ratio: 16 / 8; }

/* ── Projekt-Register ── */
.register {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
  height: clamp(440px, 50vw, 680px);
  background: var(--tile);
  border-radius: 10px;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}
.reg-card {
  position: absolute; top: calc(58% - var(--i) * 8%); left: calc(14% + var(--i) * 20%);
  width: 40%;
  transform: translate(0, -50%) rotateY(30deg) translateZ(calc(var(--i) * -70px));
  transform-origin: 50% 50%;
  transition: transform .8s var(--ease), left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), filter .5s;
  z-index: calc(10 - var(--i));
  outline: none;
  cursor: pointer;
}
.reg-tab {
  position: absolute; top: -30px; left: 14px;
  padding: 7px 14px 9px; border-radius: 8px 8px 0 0;
  background: var(--white); box-shadow: 0 -6px 14px rgba(0, 0, 0, .04);
  font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.reg-screen { border-radius: 8px; overflow: hidden; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 60px rgba(0, 0, 0, .12); }
.reg-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 600 10px/1 var(--body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .4s; }
.reg-live--intern { color: var(--grey); }
.reg-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.reg-view img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.reg-view iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform: scale(var(--s, .5)); transform-origin: 0 0; opacity: 0; pointer-events: none; transition: opacity .5s; background: var(--white); }
.reg-view iframe.ready { opacity: 1; }
.reg-view--widget { display: grid; place-items: center; background: var(--tile); }
.reg-view--widget .w { width: min(78%, 340px); }
.reg-info {
  position: absolute; left: 24px; bottom: -22px; width: min(78%, 360px);
  padding: 14px 16px; border-radius: 10px; background: var(--white); box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.5;
  opacity: 0; translate: 0 10px; transition: opacity .4s, translate .5s var(--ease);
  pointer-events: none;
}
.reg-k { font: 600 10px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
.reg-info p:not(.reg-k) { color: var(--grey); }
.reg-info a { display: inline-block; margin-top: 6px; font-weight: 600; border-bottom: 2px solid var(--cyan); }

/* Fokus: Karte dreht sich gerade nach vorn, verbindet live */
.register.has-active .reg-card:not(.active) { filter: saturate(.6) brightness(.97); }
.reg-card.active {
  left: 50%; top: 50%; width: 62%;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(0);   /* echte Breite statt Tiefen-Zoom → Text bleibt scharf */
  z-index: 20;
}
.reg-card.active .reg-live, .reg-card.active .reg-info { opacity: 1; translate: 0 0; }
.reg-card.active .reg-info { pointer-events: auto; }
.reg-card.active iframe.ready { pointer-events: auto; }

/* ── Kacheln ── */
.tile {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 5 / 4;
  padding: clamp(20px, 6%, 56px);
  background: var(--tile);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.tile-wave { position: absolute; inset: auto 0 6% 0; width: 100%; height: 55%; z-index: -1; }
.tile-wave path { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; opacity: .9; }
.tile-wave path + path { opacity: .45; }

/* Versetztes 2-Spalten-Raster wie bei arise */
.grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); row-gap: clamp(56px, 7vw, 96px); padding-bottom: 120px; }
.grid .item:nth-child(even) { transform: translateY(120px); }
.item { display: block; }
.item .tile { transition: transform .6s var(--ease); }
a.item:hover .tile { transform: scale(.985); }
.item h3 { margin-top: 18px; font: 500 20px/1.3 var(--head); }
.item h3 span { display: inline-block; transition: transform .3s var(--ease); }
a.item:hover h3 span { transform: translateX(4px); }
.item > p { margin-top: 4px; font-size: 15px; color: var(--grey); max-width: 460px; }

/* ── Browser-Rahmen für echte Screenshots ── */
.browser { width: 100%; border-radius: 8px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--white); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #E2E2E2; }
.browser-bar b { margin-left: 10px; font: 400 11px/1 var(--body); color: var(--grey); }

/* ── Widgets ── */
.w {
  width: min(100%, 380px);
  padding: 18px 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.5;
}
.w-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 600 11px/1.3 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.w-title em { margin-left: auto; font-style: normal; letter-spacing: .1em; color: var(--grey); font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
.dot--live { box-shadow: 0 0 0 0 rgba(112, 237, 255, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(112, 237, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(112, 237, 255, 0); } }

/* Hero-Floater */
.w--float-r { position: absolute; right: 5%; bottom: 9%; width: min(36%, 300px); }
.w--float-l { position: absolute; left: 5%; top: 10%; width: auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.w-alert strong { display: block; font-weight: 600; font-size: 13px; }
.w-alert span:not(.shield) { font-size: 11px; color: var(--grey); }
.shield { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--black); color: var(--cyan); font-weight: 700; }

/* Chat */
.bubble { max-width: 88%; margin-top: 8px; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: var(--tile); }
.bubble--user { margin-left: auto; border-radius: 12px 12px 4px 12px; background: var(--black); color: var(--white); }
.tool { margin-top: 10px; font-size: 11px; color: var(--grey); display: flex; align-items: center; gap: 6px; }
.tool::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.typing { display: flex; gap: 4px; margin-top: 10px; padding: 10px 12px; width: max-content; background: var(--tile); border-radius: 12px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.w-booking { display: flex; flex-direction: column; gap: 10px; }
.w-booking .w-title { margin-bottom: 4px; }
.bk-stages { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-stages li { padding: 3px 8px; border-radius: 999px; background: var(--tile); font-size: 10px; font-weight: 600; color: var(--grey); }
.bk-stages li.done { color: var(--black); }
.bk-stages li.now { background: var(--black); color: var(--cyan); }
.bk-req strong { display: block; font-size: 14px; color: var(--black); }
.bk-req { color: var(--grey); }
.bk-checks li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.bk-checks li::before { content: '✓'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--black); color: var(--cyan); font-size: 9px; font-weight: 700; }
.bk-ampel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--tile); font-weight: 500; }
.bk-ampel i { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(112, 237, 255, .3); }
.bk-src { font-size: 11px; color: var(--grey); }
.bk-matches li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.bk-matches strong { display: block; font-size: 13px; }
.bk-matches span { font-size: 11px; color: var(--grey); }
.bk-matches em { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: var(--tile); font: 600 10px/1.4 var(--body); }
.bk-matches em.hi { background: var(--cyan); }
.bk-approve { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); color: var(--grey); font-size: 12px; }
.bk-approve b { padding: 6px 14px; border-radius: 999px; background: var(--cyan); color: var(--black); font-weight: 600; }

/* Lebenszyklus */
.w-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-weight: 500; }
.w-steps li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #CFCFCF; flex-shrink: 0; }
.w-steps li.done::before { border-color: var(--black); background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%2370EDFF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.w-steps li.live::before { border-color: var(--cyan); background: var(--cyan); }
.w-steps li span { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--grey); }

/* n8n-Workflow */
.tile:has(.n8n), .tile:has(.viz) { background: var(--tile) radial-gradient(circle, #D6D6D6 1px, transparent 1.2px) 0 0 / 18px 18px; }
.n8n { width: 100%; height: auto; font-family: var(--body); overflow: visible; }
.n8n-node { fill: var(--white); stroke: #D4D4D4; stroke-width: 1.5; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .06)); }
.n8n-node--agent { fill: var(--black); stroke: var(--black); }
.n8n-node--human { stroke: var(--cyan); stroke-width: 2.5; }
.n8n-ico { fill: none; stroke: var(--black); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.n8n-ico--cyan { stroke: var(--cyan); }
path.n8n-ico--cyan { fill: var(--cyan); stroke: none; }
.n8n-agent-t { fill: var(--white); font-size: 14px; font-weight: 600; }
.n8n-agent-s { fill: #A6A6A6; font-size: 10px; }
.n8n-edge path { fill: none; stroke: #BDBDBD; stroke-width: 2; }
.n8n-flow path { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 44; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -50; } }
.n8n-sub-edge path { fill: none; stroke: #BDBDBD; stroke-width: 1.5; stroke-dasharray: 4 4; }
.n8n-port circle { fill: #BDBDBD; }
.n8n-diamond path { fill: var(--white); stroke: #BDBDBD; stroke-width: 1.5; }
.n8n-sub-i { fill: var(--black); font-size: 14px; font-weight: 700; text-anchor: middle; }
.n8n-label text { fill: var(--black); font-size: 12px; font-weight: 500; text-anchor: middle; }
.n8n-label .n8n-label-s { fill: var(--grey); font-size: 10px; font-weight: 400; }

/* Diagramm-Kacheln (Software Engineering, AI Development) */
.viz { width: 100%; height: auto; overflow: visible; font-family: var(--body); }
.viz-ring { fill: none; stroke: #D4D4D4; stroke-width: 2; }
.viz-orbit { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 90 538; transform-box: fill-box; transform-origin: center; animation: orbit 6s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.viz-app rect { fill: var(--white); stroke: var(--black); stroke-width: 1.5; filter: drop-shadow(0 6px 14px rgba(0,0,0,.08)); }
.viz-app path { fill: none; stroke: var(--black); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.viz-live circle { fill: var(--cyan); }
.viz-node { fill: var(--white); stroke: #D4D4D4; stroke-width: 1.5; filter: drop-shadow(0 4px 10px rgba(0,0,0,.06)); }
.viz-node--on { fill: var(--black); stroke: var(--black); }
.viz-num { font-size: 10px; font-weight: 600; text-anchor: middle; fill: var(--black); }
.viz-node--on + .viz-num { fill: var(--cyan); }
.viz-label { font-size: 12px; font-weight: 500; fill: var(--black); }
.viz-small { font-size: 10px; fill: var(--grey); text-anchor: middle; }
.viz-k { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--black); text-anchor: middle; }
.viz-box { fill: var(--white); stroke: #D4D4D4; stroke-width: 1.5; filter: drop-shadow(0 6px 14px rgba(0,0,0,.06)); }
.viz-dot { fill: var(--black); }
.viz-edge { fill: none; stroke: #C8C8C8; stroke-width: 1; }
.viz-arrow { fill: none; stroke: #BDBDBD; stroke-width: 2; stroke-dasharray: 4 4; }
.viz-n { fill: var(--white); stroke: var(--black); stroke-width: 1.5; }
.viz-n--out { fill: var(--black); }
.viz-pulse { fill: var(--cyan); }
.viz-base { stroke: #D4D4D4; stroke-dasharray: 3 4; }
.viz-spark { fill: none; stroke: var(--black); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-flag { fill: var(--cyan); stroke: var(--black); stroke-width: 1.5; }
/* Security */
.sec-ring { fill: none; stroke: #D4D4D4; stroke-width: 1.5; stroke-dasharray: 3 5; }
.sec-sweep { fill: var(--cyan); opacity: .35; transform-box: view-box; transform-origin: 290px 150px; animation: orbit 4s linear infinite; }
.sec-attack { fill: none; stroke: var(--black); stroke-width: 1.5; stroke-dasharray: 6 6; animation: incoming 1.2s linear infinite; }
@keyframes incoming { to { stroke-dashoffset: -12; } }
.sec-x circle { fill: var(--white); stroke: var(--black); stroke-width: 1.5; }
.sec-x path { stroke: var(--black); stroke-width: 1.8; stroke-linecap: round; }
.sec-shield { fill: var(--white); stroke: var(--black); stroke-width: 2; filter: drop-shadow(0 8px 18px rgba(0,0,0,.08)); }
.sec-check { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sec-link { fill: none; stroke: #BDBDBD; stroke-width: 1.5; stroke-dasharray: 4 4; }
.sec-chip rect { fill: var(--white); stroke: #D4D4D4; stroke-width: 1.5; }
.sec-chip circle { fill: var(--cyan); }
.sec-chip text { font-size: 10px; font-weight: 600; fill: var(--black); }
.sec-chip .sec-chip-s { font-size: 9px; font-weight: 400; fill: var(--grey); }
@media (prefers-reduced-motion: reduce) { .viz-pulse { display: none; } }

/* Workflow */
.w-flow { display: flex; flex-direction: column; }
.node { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 500; }
.node + .node { margin-top: 18px; }
.node + .node::before { content: ''; position: absolute; left: 50%; top: -19px; width: 1.5px; height: 18px; background: #CFCFCF; }
.node-k { min-width: 54px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.node--agent { border-color: var(--black); background: var(--black); color: var(--white); }
.node--agent .node-k { color: var(--cyan); }

/* Chart */
.chart { width: 100%; height: auto; overflow: visible; }
.chart-base { stroke: #CFCFCF; stroke-dasharray: 4 5; stroke-width: 1.5; }
.chart-line { fill: none; stroke: var(--black); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 0; }
.chart-dot { fill: var(--cyan); stroke: var(--black); stroke-width: 2; }
.w-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; border-radius: 999px; background: var(--black); color: var(--white); font-size: 12px; font-weight: 500; }

/* SecOps-Feed */
.w-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.w-feed .tag { padding: 3px 8px; border-radius: 999px; background: var(--tile); font-size: 10px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.w-feed li:first-child .tag { background: var(--black); color: var(--cyan); }
.w-feed time { font-size: 11px; color: var(--grey); white-space: nowrap; }

/* Unterweisungen */
.course { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.course span { font-weight: 500; }
.course b { font-size: 11px; font-weight: 500; color: var(--grey); }
.course b.ok { color: var(--black); }
.course i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--tile); position: relative; overflow: hidden; }
.course i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--cyan); }
.w-cta { margin-top: 12px; font-weight: 600; }

/* ── Leistungen: Zeilen wie „What we offer“ ── */
.offer {
  display: grid; grid-template-columns: 5fr 7fr; gap: 32px;
  padding: clamp(36px, 4vw, 52px) 0;
  border-top: 1px solid var(--line);
}
.offer:last-child { border-bottom: 1px solid var(--line); }
.offer-head h3 { font: 500 clamp(22px, 2vw, 28px)/1.25 var(--head); max-width: 380px; }
.offer-art { display: block; width: 150px; height: auto; margin-top: 24px; overflow: visible; fill: none; stroke: var(--black); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.offer-art .fill { fill: var(--black); stroke: none; }
.offer-art .accent { stroke: var(--cyan); stroke-width: 2.5; }
.offer-art .solid { fill: var(--black); }
.offer-art .fill-c { fill: var(--cyan); stroke: none; }
.offer-art .smile { stroke: var(--cyan); stroke-width: 2; }
.offer-art .thin { stroke: #BDBDBD; stroke-width: 1; }
.offer-art .node { fill: var(--white); }
.offer-art .node-c { fill: var(--cyan); }
.offer-art .check { stroke: var(--black); stroke-width: 2.5; }
.offer-art { stroke-dasharray: none; }
.offer h4 { font: 600 16px/1.4 var(--body); margin-top: 28px; }
.offer h4:first-child { margin-top: 0; }
.offer p { color: var(--grey); margin-top: 6px; max-width: 620px; }
.offer p strong { color: var(--black); font-weight: 500; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pills li { padding: 5px 12px; border-radius: 999px; background: var(--tile); font: 600 10.5px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.ref { font-size: 14px; }
.ref a { color: var(--black); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ── Prozess-Gantt ── */
.gantt {
  display: grid; grid-template-columns: repeat(12, 1fr); row-gap: 8px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 8px 0;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 12));
  border-right: 1px solid var(--line);
}
.gantt span {
  grid-column: var(--s) / var(--e);
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--tile);
  font-size: 14px; font-weight: 500; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt span.on { background: var(--cyan); }

/* ── Studio ── */
.split { display: flex; flex-direction: column; gap: 20px; }
.more { font-weight: 500; width: max-content; border-bottom: 2px solid var(--cyan); padding-bottom: 2px; }
.more span { display: inline-block; transition: transform .3s var(--ease); }
.more:hover span { transform: translateX(4px); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); }
.facts strong { display: block; font: 500 24px/1.2 var(--head); }
.facts span { font-size: 14px; color: var(--grey); }

/* ── Kontakt ── */
.pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pick a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 150px; padding: 20px;
  border: 1.5px solid var(--black); border-radius: 10px;
  font-weight: 500;
  transition: background-color .25s, transform .3s var(--ease);
}
.pick a:hover { background: var(--cyan); transform: translateY(-3px); }
.pick svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact { margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.contact p { max-width: 460px; font-size: 15px; color: var(--grey); }
.contact-mail { display: inline-block; margin-top: 12px; font: 500 clamp(26px, 3.4vw, 44px)/1.2 var(--head); overflow-wrap: anywhere; background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease); }
.contact-mail:hover { background-size: 100% 2px; }

/* ── Footer (weiß) ── */
.footer { margin-top: clamp(96px, 12vw, 176px); padding: 56px 0 32px; border-top: 1px solid var(--line); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand img { height: 26px; width: auto; margin-bottom: 12px; }
.footer-brand a, .footer ul a, .footer ul button { font-size: 14px; color: var(--grey); transition: color .2s; }
.footer-brand a:hover, .footer ul a:hover, .footer ul button:hover { color: var(--black); }
.footer ul { display: flex; flex-direction: column; gap: 10px; }
.footer-copy { margin-top: 48px; font-size: 12px; color: var(--grey); }

/* ── Rechtliches (native <dialog>) ── */
.modal {
  margin: auto; width: min(720px, calc(100% - 32px)); max-height: 85vh;
  padding: clamp(28px, 5vw, 48px);
  border: 0; border-radius: 12px; background: var(--white); color: var(--black);
  font-size: 15px; box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }
.modal h2 { font: 500 34px/1.2 var(--head); }
.modal-sub { margin: 4px 0 8px; font: 600 11px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.modal h3 { font: 600 15px/1.4 var(--body); margin: 22px 0 4px; }
.modal p { color: var(--grey); }
.modal a { color: var(--black); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; }
.modal .note { margin-top: 28px; font-size: 13px; padding: 12px 16px; background: var(--tile); border-radius: 8px; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; font-size: 18px; color: var(--grey); }
.modal-close:hover { color: var(--black); }

/* ── Loading: Logo mit sich zeichnender Welle ── */
.intro { display: none; }
.intro-on, .intro-on body { overflow: hidden; }
.intro-on .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 90; background: var(--white); }
.intro-logo { position: relative; width: min(64vw, 520px); }
.intro-logo img { width: 100%; height: auto; }
.intro-logo img:first-child { opacity: 0; translate: 0 12px; animation: logo-in .9s var(--ease) .15s forwards; }
.intro-wave { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); animation: wave-draw 1.1s cubic-bezier(.65, 0, .25, 1) .55s forwards, wave-bob 2.4s ease-in-out 1.7s infinite; }
@keyframes logo-in { to { opacity: 1; translate: 0 0; } }
@keyframes wave-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes wave-bob { 50% { translate: 0 -4px; } }

/* ── Wellen-Vorhang (Laden & Navigation) ── */
.curtain {
  --edge: 18vh;
  position: fixed; left: 0; right: 0; top: 0; z-index: 95;
  height: calc(100vh + 2 * var(--edge));
  margin-top: calc(-1 * var(--edge));
  transform: translateY(calc(100vh + var(--edge)));
  pointer-events: none;
  visibility: hidden;
}
.curtain.run { visibility: visible; }
.curtain-edge { position: relative; height: var(--edge); overflow: hidden; margin: -2px 0; transform-origin: 50% 100%; }
.curtain-edge--bottom { transform: scaleY(-1); transform-origin: 50% 0; }
/* Naht-Streifen: deckt jede Subpixel-Lücke zwischen Kante und Fläche ab */
.curtain-edge::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: var(--cyan); }
.curtain-edge svg { position: absolute; left: 0; bottom: -1px; width: 200%; height: calc(100% + 1px); }
.curtain-edge path { fill: var(--cyan); }
/* zwei Wellen mit versetzter Phase laufen gegeneinander → die Kante wogt */
.curtain.run .wa { animation: drift 1.6s linear infinite; }
.curtain.run .wb { animation: drift 2.2s linear infinite reverse; }
.curtain.run .curtain-edge { animation: swell 1.3s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes swell { from { scale: 1 .85; } to { scale: 1 1.1; } }
.curtain-body { height: 100vh; background: var(--cyan); }

/* ── Bewegung ── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 28px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
  .js .reveal.in { opacity: 1; translate: 0 0; }
  .js .chart-line { stroke-dashoffset: 420; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
  .js .in .chart-line { stroke-dashoffset: 0; }
  .js .gantt span { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
  .js .gantt.in span { transform: scaleX(1); }
  .js .gantt.in span:nth-child(2) { transition-delay: .1s; }
  .js .gantt.in span:nth-child(3) { transition-delay: .2s; }
  .js .gantt.in span:nth-child(4) { transition-delay: .3s; }
  .js .gantt.in span:nth-child(5) { transition-delay: .4s; }
  .js .gantt.in span:nth-child(6) { transition-delay: .5s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; padding-bottom: 0; }
  .grid .item:nth-child(even) { transform: none; }
  .offer { grid-template-columns: 1fr; gap: 16px; }
  .offer-art { width: 110px; margin-top: 16px; }
  .pick { grid-template-columns: 1fr 1fr; }
  .tile--hero { aspect-ratio: 4 / 3; }
  .gantt span { font-size: 12px; padding: 8px 6px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px), (hover: none) {
  .register { height: auto; perspective: none; padding: 48px 16px 16px; display: grid; gap: 64px; overflow: visible; }
  .reg-card, .reg-card.active { position: relative; left: auto; top: auto; width: 100%; transform: none; filter: none !important; }
  .reg-info { position: static; width: auto; opacity: 1; translate: none; pointer-events: auto; margin-top: 12px; box-shadow: none; padding: 0; background: none; }
  .reg-live { opacity: 1; }
  .reg-view iframe { display: none; }
  .reg-view--widget { aspect-ratio: auto; padding: 24px 0; }
}
@media (max-width: 600px) {
  .nav-links a:not(:last-child) { display: none; }
  .tile { aspect-ratio: auto; min-height: 300px; }
  .tile--hero { min-height: 300px; }
  .browser--back, .browser--front { width: 80%; }
    .facts { grid-template-columns: 1fr; gap: 20px; }
  .gantt { grid-template-columns: 1fr; background: none; border: 0; }
  .gantt span { grid-column: 1 / -1 !important; text-align: left; padding-left: calc(var(--s) * 6% + 10px); }
}

.dot-cyan { color: var(--cyan); }