@font-face { font-family: "NHD"; src: url(/assets/fonts/nhd-roman.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NHD"; src: url(/assets/fonts/nhd-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "NHD"; src: url(/assets/fonts/nhd-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #fff; --fg: #000; --hl: #000; --line: #cfcfcf; --mute: #8a8a8a; --card: #e9e9e9;
  --pad: clamp(14px, 1.2vw, 20px);
  --fs: clamp(14px, 0.6vw + 9px, 18px);
  --title: clamp(40px, 7.1vw, 150px);
  /* Row height: caps sit on the hairline, umlaut dots (0.855em in NHD) clear the line above. */
  --rowh: calc(var(--title) * .9);
  --top: clamp(54px, 4.2vw, 70px);
}
[data-theme="black"] { --bg: #000; --fg: #fff; --hl: #fff; --line: #2e2e2e; --mute: #7a7a7a; --card: #1b1b1b; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); overflow: hidden;
  font: 400 var(--fs)/1.2 "NHD", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; transition: background-color .5s ease, color .5s ease;
}
body:not([data-view="space"]) { overflow-y: auto; }
@media (pointer: fine) { body, a, button { cursor: none; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; letter-spacing: inherit; }
a[aria-current="page"], button[aria-pressed="true"], a:hover, button:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
.skip { position: fixed; left: var(--pad); top: -60px; z-index: 30; background: var(--fg); color: var(--bg); padding: 8px 12px; }
.skip:focus { top: 8px; }

/* Header: 4 columns like the reference (l, l, r, r) */
.top { position: fixed; inset: 0 0 auto; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; padding: 20px var(--pad) 0; pointer-events: none; }
.top a, .top button { pointer-events: auto; }
.logo { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: .45em; }
.logo svg, .dot svg { display: block; width: 100%; height: 100%; fill: var(--fg); }
.logo .notch, .dot .notch { fill: var(--bg); transition: fill .5s ease; }
.logo:hover { text-decoration: none; }
.nav-l, .nav-r { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.nav-r > :last-child { justify-self: end; }
.clock { font-variant-numeric: tabular-nums; justify-self: center; }

/* Monumental title on hairlines */
.title { position: absolute; inset: 0 0 auto; z-index: 2; margin: 0; padding: var(--top) var(--pad) 0; font-weight: 400; pointer-events: none; }
.title .row { position: relative; display: flex; justify-content: center; align-items: flex-end; height: var(--rowh); border-bottom: 1px solid var(--line); transition: border-color .5s ease; }
.title .word { color: var(--hl); transition: color .5s ease; font-size: var(--title); line-height: .78; letter-spacing: -0.045em; transform: translateY(.05em); white-space: nowrap; }
.title .row:nth-child(2) .word { font-style: italic; letter-spacing: -0.05em; }
.title sup { font-size: .3em; vertical-align: top; position: relative; top: .02em; margin-left: .04em; letter-spacing: 0; }
.corners { position: absolute; left: var(--pad); right: var(--pad); bottom: 5px; display: flex; justify-content: space-between; font-size: var(--fs); letter-spacing: -0.01em; }
.corners a { pointer-events: auto; background: var(--fg); color: var(--bg); padding: 3px 7px 2px; }
.corners a.l { margin-left: -7px; }
.corners a.r { margin-right: -7px; }
.corners a:hover { background: transparent; color: var(--fg); text-decoration: underline; }

/* 3D stage */
.stage { position: fixed; inset: 0; z-index: 1; perspective: 2600px; perspective-origin: 50% 50%; touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity .6s ease, filter .6s ease; }
body:not([data-view="space"]) .stage { opacity: .12; filter: blur(6px); pointer-events: none; }
.scene { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; }
.card { position: absolute; left: 0; top: 0; transform-style: preserve-3d; backface-visibility: visible; will-change: transform, opacity; }
.card button { display: block; width: 100%; height: 100%; padding: 0; background: var(--card); transition: background-color .5s ease; }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); pointer-events: none; transition: opacity .5s ease; }
.card button:hover img, .card button:focus-visible img { filter: none; }
.card.illu button { background: transparent; }
.card.illu img { object-fit: contain; filter: none; }
.card.illu img { filter: grayscale(1) contrast(1.2); }
[data-theme="black"] .card.illu img { filter: grayscale(1) invert(1); }
[data-fill="wire"] .card img { opacity: 0; }
[data-fill="wire"] .card button { background: transparent; outline: 1px solid var(--fg); outline-offset: -1px; }

/* Panels (Termine, Über, Kontakt) */
.panel { position: relative; z-index: 3; padding: calc(var(--top) + var(--rowh) * 3 + clamp(40px, 6vw, 90px)) var(--pad) 120px; max-width: 1600px; margin: 0 auto; }
.panel[hidden] { display: none; }
.panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.panel-lead { font-size: clamp(24px, 2.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; max-width: 22em; margin: 0 0 clamp(40px, 5vw, 80px); }
.panel-sub { font-weight: 400; font-size: var(--fs); color: var(--mute); margin: clamp(40px, 5vw, 80px) 0 10px; }
.panel-note { color: var(--mute); max-width: 40em; margin: 20px 0 0; }
.panel-note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.ev-list, .rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ev-list li > *, .rows li { border-bottom: 1px solid var(--line); }
.ev { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; }
.ev-date { color: var(--hl); font-size: clamp(34px, 4.4vw, 84px); line-height: .9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.ev-title { font-size: clamp(22px, 2vw, 36px); letter-spacing: -0.03em; }
.ev-cal { justify-self: end; text-decoration: underline; text-underline-offset: 3px; }
.ev-past .ev { padding: 8px 0; }
.ev-past .ev-date { color: var(--hl); font-size: clamp(22px, 2vw, 36px); }
.empty { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(22px, 2vw, 36px); letter-spacing: -0.03em; }

.rows li, .rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 4fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.r-k { color: var(--mute); }
.r-v { color: var(--hl); font-size: clamp(26px, 3.2vw, 60px); line-height: .95; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.r-v em { font-style: italic; }
.contacts a { display: contents; }
.contacts li:hover .r-v { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* Footer: 3 equal zones, nothing can collide */
.bottom { position: fixed; inset: auto 0 0; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; padding: 0 var(--pad) 18px; background: linear-gradient(to top, var(--bg) 40%, transparent); transition: opacity .4s ease; }
body:not([data-view="space"]) .bottom .modes, body:not([data-view="space"]) .bottom .swatches { visibility: hidden; }
.swatches { display: flex; gap: 4px; }
.sw { width: 38px; height: 20px; border: 1px solid var(--fg); }
.sw-fill { background: var(--fg); }
.sw-empty { background: linear-gradient(to top right, transparent calc(50% - .5px), var(--fg) 50%, transparent calc(50% + .5px)); }
.sw[aria-pressed="true"] { outline: 1px solid var(--fg); outline-offset: 2px; text-decoration: none; }
.modes { text-align: center; white-space: nowrap; }
.rights { justify-self: end; color: var(--mute); white-space: nowrap; }

/* Viewer */
.view { border: 0; padding: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; background: var(--bg); color: var(--fg); }
.view[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; }
.view::backdrop { background: var(--bg); }
.view img { max-width: 86vw; max-height: 78dvh; object-fit: contain; }
.view-cap { margin: 0 0 22px; }
.view-x { position: absolute; top: 20px; right: var(--pad); }

/* Cursor dot */
.dot { position: fixed; left: 0; top: 0; z-index: 40; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; }
.dot svg { transition: transform .25s ease; }
.dot.big svg { transform: rotate(45deg) scale(1.6); fill: var(--hl); }
@media (pointer: coarse) { .dot { display: none; } }

/* Tablet */
@media (max-width: 1024px) {
  .nav-l, .nav-r { grid-template-columns: auto; gap: 4px; }
  .nav-l { justify-items: start; }
  .nav-r { justify-items: end; }
  .clock { justify-self: end; }
  .ev { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; }
  .ev-time, .ev-place { grid-column: 2; }
  .ev-cal { grid-column: 3; grid-row: 1; }
}
/* Phone */
@media (max-width: 640px) {
  :root { --title: min(12.2vw, calc((100vw - 2 * var(--pad)) / 7.1)); --top: 96px; }
  .top { grid-template-columns: 1fr auto; row-gap: 6px; }
  .nav-l { display: contents; }
  .nav-pages { grid-column: 1 / -1; }
  .theme { grid-column: 1; }
  .nav-r { grid-column: 2; display: block; text-align: right; }
  .clock { display: none; }
  .corners { bottom: -26px; }
  .bottom { grid-template-columns: auto 1fr; row-gap: 10px; }
  .modes { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .rights { grid-column: 2; }
  .rows li, .rows > div { grid-template-columns: 2.5em minmax(0, 1fr); }
  .r-t { grid-column: 2; }
  .ev { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .ev-title, .ev-time, .ev-place { grid-column: 1; }
  .ev-cal { grid-column: 2; grid-row: 1; }
  .panel { padding-top: calc(var(--top) + var(--rowh) * 3 + 64px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
body:not([data-view="space"]) .top { background: var(--bg); padding-bottom: 12px; }

/* Entwurf-Marker (nur in der lokalen Vorschau) */
.draft { display: inline-block; vertical-align: middle; font-size: var(--fs); line-height: 1.2; letter-spacing: -0.01em; padding: 2px 6px; background: #e3432f; color: #fff; }

/* Rechtstexte */
.panel.legal { padding-top: calc(var(--top) + 40px); min-height: 70vh; }
.legal-h { font-weight: 400; font-size: clamp(40px, 6vw, 120px); line-height: .9; letter-spacing: -0.045em; margin: 0 0 clamp(24px, 3vw, 48px); }
.legal .panel-note + .panel-note { margin-top: 12px; }

/* WhatsApp-Button + Coming soon */
.join-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 0; }
.join-cta .panel-note { margin: 0; }
.btn { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: .7em 1.2em; background: var(--fg); color: var(--bg); font-size: clamp(16px, 1.2vw, 22px); transition: background-color .25s ease, color .25s ease; }
.btn:hover { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); text-decoration: none; }
[data-wa][aria-disabled="true"] { opacity: .45; }
.soon { font-size: clamp(56px, 11vw, 220px); line-height: .82; letter-spacing: -0.05em; margin: 0 0 clamp(24px, 3vw, 48px); font-style: italic; }
.nav-r > span:last-child { justify-self: end; }
/* Unterseiten: Footer läuft am Ende mit statt über dem Text zu kleben */
body:not([data-view="space"]) .bottom { position: static; background: none; padding-top: 24px; }
body:not([data-view="space"]) .bottom .modes, body:not([data-view="space"]) .bottom .swatches { display: none; }
body:not([data-view="space"]) .bottom .rights { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .contacts li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .contacts .r-t { grid-column: 1; }
  .contacts .r-t:empty { display: none; }
}
/* Sehr schmale Phones: Ecken-Labels untereinander, sonst wandern sie in die dritte Zeile */
@media (max-width: 360px) {
  .corners { flex-direction: column; align-items: flex-start; gap: 6px; bottom: -64px; }
  .corners a.r { margin-right: 0; margin-left: -7px; }
  .panel { padding-top: calc(var(--top) + var(--rowh) * 3 + 104px); }
}