/* ============================================================
   nx-app.css — NOEXIT Mobile
   Setzt nx-tokens.css voraus. Keine Hex-Werte ausserhalb der
   Token-Datei.
   ============================================================ */

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

/* Seit dem Umbau zur Website scrollt das Fenster selbst -- kein
   fixierter Body mit eigenem Scrollkasten mehr. Damit verhaelt
   sich die Seite wie der Team-Bereich: eine Seite, ein
   Scrollbalken, kein Rahmen drumherum. */
html {
  background: var(--nx-bg);
  overflow-x: hidden;
  /* Die Kopfzeile klebt oben. Ohne diesen Abstand rutschte ein
     angesprungener Abschnitt darunter. */
  scroll-padding-top: 140px;
}

body {
  margin: 0;
  /* Oben laeuft das Hazard-Band (9px, fest am Fenster), der Platz
     dafuer gehoert nicht dem Inhalt. Unten uebernimmt das die
     Tab-Leiste: sie klebt am Fensterrand und bringt den Platz
     fuer Band und Homebalken selbst mit. */
  padding: 9px 0 0;
  min-height: 100vh;
  background: var(--nx-bg);
  color: var(--nx-text);
  font-family: var(--nx-font-display);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  /* Am Handy gibt es keinen Hover. Ohne Rueckmeldung beim Druecken
     fuehlt sich jede Beruehrung an, als waere nichts passiert. */
  transition: transform .08s ease-out, filter .12s ease-out;
}
button:active { transform: scale(.985); filter: brightness(1.08); }
.nx-tab:active, .nx-like:active { transform: none; }

:focus-visible {
  outline: 2px solid var(--nx-hazard);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Seitengerüst ─────────────────────────────────────────
   Frueher sass die App am Rechner in einem nachgebauten
   Handyrahmen mit Notch und Homebalken, und am Handy fuellte ein
   fixierter Kasten den Bildschirm. Beides ist raus: die App ist
   jetzt eine Seite wie jede andere -- volle Breite, ein
   Scrollbalken, kein Rahmen, keine Leiste am unteren Rand.

   Die Spaltenbreite haelt den Inhalt trotzdem lesbar. Kopfzeile,
   Hauptpunkte und Inhalt teilen sie sich, damit Logo, Tabs und
   Karten an derselben Kante stehen -- wie .container und .nav-tabs
   im Team-Bereich.                                            */

.nx-app {
  /* Breite der Inhaltsspalte. An einer Stelle, damit Tabs und
     Inhalt nicht auseinanderlaufen koennen. Die Kopfzeile laeuft
     bewusst ueber die volle Breite -- die Wortmarke gehoert an den
     Fensterrand, wie .nav-top im Team-Bereich. */
  --nx-col: 760px;
  /* Abstand der Kopfzeile zur Oberkante. Auf dem iPhone kommt der
     sichere Bereich dazu (schwarz-transluzente Statusleiste). */
  --nx-top: calc(12px + var(--nx-safe-top));
  /* Was unter den Tab-Icons noch Platz braucht: 9px fuer das
     Hazard-Band ganz unten, darueber der Homebalken. Genau die
     Rechnung nutzt auch die Website in app-theme.css. */
  --nx-bottom: calc(9px + max(6px, var(--nx-safe-bottom)));
  position: relative;
  z-index: 1;
  /* Der Fuss sitzt am Seitenende, auch wenn der Inhalt kurz ist --
     und zwar ueber der Leiste, nicht darunter. Deshalb zaehlt
     deren Hoehe sowohl beim Innenabstand als auch bei der
     Mindesthoehe mit (border-box). --nx-tabbar-h misst nx-app.js. */
  min-height: calc(100vh - 9px);
  padding-bottom: var(--nx-tabbar-h, 96px);
  display: flex;
  flex-direction: column;
  background: var(--nx-bg);
}

/* Grain liegt fest am Fenster und hinter dem Inhalt -- ohne
   Mausfang. */
.nx-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Fußzeile ─────────────────────────────────────────────
   Derselbe Rechtsfuss wie im Team-Bereich (legal_footer.php).  */

.nx-sitefoot {
  margin-top: auto;
  padding: 26px var(--nx-pad) 32px;
  border-top: 1px solid var(--nx-hairline);
  text-align: center;
}
.nx-sitefoot a {
  margin: 0 10px;
  color: var(--nx-hazard);
  font: 700 10.5px/1 var(--nx-font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .15s, text-shadow .15s;
}
.nx-sitefoot a:hover {
  color: var(--nx-hazard-hot);
  text-shadow: 0 0 14px rgba(232, 185, 35, .55);
}

/* ── Kopfzeile ────────────────────────────────────────────
   Bleibt beim Scrollen oben stehen -- wie <nav> im Team-Bereich.
   Das obere Hazard-Band ist 9px hoch und liegt fest am Fenster,
   also klebt die Kopfzeile genau darunter.                     */

.nx-topbar {
  position: sticky;
  top: 9px;
  z-index: 6;
  flex: none;
  background: rgba(5, 5, 5, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nx-line);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .9);
}

.nx-header {
  position: relative;
  z-index: 5;
  flex: none;
}

.nx-header__bar {
  display: grid;
  /* Drei Spalten mit gleich breiten Aussenspalten -- nur so sitzt
     das Profilbild wirklich in der Mitte und nicht nur ungefaehr. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Ueber die volle Fensterbreite, ohne Spaltenbegrenzung: die
     Wortmarke sitzt dadurch ganz links am Rand und das Zahnrad
     ganz rechts -- genau wie .nav-top in nav.php. */
  padding: var(--nx-top) 20px 10px;
  gap: 10px;
}

/* ── Wortmarke ────────────────────────────────────────────
   Fuehrt aus der App heraus auf die Startseite.              */

.nx-brand {
  justify-self: start;
  display: block;
  line-height: 0;
  transition: opacity .15s;
}
.nx-brand:hover { opacity: .8; }
.nx-brand__mark {
  display: block;
  height: 34px;
  width: auto;
  max-width: 150px;
}

/* ── Wer bin ich ──────────────────────────────────────────
   Profilbild mit Ring, darunter die Rolle -- wie im
   Team-Bereich.                                              */

.nx-ident {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.nx-ident__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--nx-hazard-face);
  color: var(--nx-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Der Ring hebt das Bild vom dunklen Grund ab, ohne es zu
     beschneiden -- deshalb als Schatten, nicht als Rahmen. */
  box-shadow: 0 0 0 2px var(--nx-hazard),
              0 0 18px -4px rgba(232, 185, 35, .55);
}
.nx-ident__avatar--leer {
  background: none;
  box-shadow: 0 0 0 1.5px var(--nx-line);
  color: var(--nx-text-dim);
}
.nx-ident__avatar--leer:hover { box-shadow: 0 0 0 1.5px var(--nx-hazard); }
.nx-ident__initial {
  font: 700 21px/1 var(--nx-font-mono);
}

.nx-ident__rolle {
  padding: 5px 13px;
  border: 1px solid var(--nx-hazard);
  border-radius: var(--nx-r-xs);
  font: 700 10px/1 var(--nx-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nx-hazard);
  background: rgba(232, 185, 35, .06);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-ident__rolle--leer {
  border-color: var(--nx-line);
  color: var(--nx-text-dim);
  background: none;
}
.nx-ident__rolle--leer:hover { border-color: var(--nx-hazard); color: var(--nx-hazard); }

.nx-gear { justify-self: end; }

.nx-maint {
  background: var(--nx-hazard);
  color: var(--nx-bg);
  padding: 9px var(--nx-pad);
  display: flex;
  align-items: center;
  gap: 9px;
  animation: nxPop .18s ease-out;
}
.nx-maint__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nx-bg);
  flex: none;
}
.nx-maint__text {
  font: 700 9.5px/1.35 var(--nx-font-mono);
  letter-spacing: .1em;
}

/* ── Inhaltsfläche ────────────────────────────────────── */

/* Kein eigener Scrollkasten mehr -- die Seite selbst scrollt.
   Breite und Innenabstand entsprechen .container im
   Team-Bereich. */
.nx-screen {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--nx-col);
  margin: 0 auto;
  padding: 26px var(--nx-pad) 56px;
}

.nx-view {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap);
}

/* ── Bausteine ────────────────────────────────────────── */

.nx-card {
  border: 1px solid var(--nx-edge);
  background: var(--nx-card-face);
  border-radius: var(--nx-r-card);
  overflow: hidden;
  box-shadow: var(--nx-card-lip), var(--nx-card-lift);
}
/* Die Akzentkarte traegt das Gelb nur als Kante, nicht als
   Leuchten -- sonst konkurriert sie mit den Knoepfen. */
.nx-card--accent {
  border-color: var(--nx-hazard);
  box-shadow: var(--nx-card-lip), var(--nx-card-lift),
              0 0 0 1px rgba(232, 185, 35, .12);
}
.nx-card--pad { padding: var(--nx-pad-card); }

button.nx-card { display: block; width: 100%; text-align: left; transition: border-color .15s; }
button.nx-card:hover { border-color: var(--nx-hazard); }

/* Streifenrahmen: Karte in einem Hazard-Band */
.nx-framed {
  background: var(--nx-stripe);
  padding: 8px;
  border-radius: var(--nx-r-outer);
}
.nx-framed__inner {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-inner);
}

.nx-stripe    { height: 8px; background: var(--nx-stripe-sm); }
.nx-stripe--top { height: 8px; background: var(--nx-stripe-sm); }

.nx-eyebrow {
  font: 700 10px/1 var(--nx-font-mono);
  letter-spacing: .2em;
  color: var(--nx-text-dim);
}
.nx-eyebrow--accent { color: var(--nx-hazard); }
.nx-eyebrow--ok { color: var(--nx-ok); }

.nx-mono { font-family: var(--nx-font-mono); }
.nx-dim  { color: var(--nx-text-dim); }
.nx-hz   { color: var(--nx-hazard); }

/* Grosse Versalien brauchen engere Laufweite, kleine Mono-Zeilen
   eine weite -- sonst wirkt beides gleich gedrungen. */
.nx-h1 {
  font-weight: 700;
  font-size: 32px;
  line-height: .93;
  text-transform: uppercase;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.nx-h2 {
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.004em;
}
.nx-h3 {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
}
.nx-h4 {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  text-transform: uppercase;
}
.nx-body {
  font: 300 13.5px/1.5 var(--nx-font-display);
  color: var(--nx-text-dim);
  margin: 0;
}

/* Eine leere Bildflaeche soll nach vorgesehenem Platz aussehen,
   nicht nach einem Loch. Feine Diagonalen und ein Verlauf geben
   ihr Oberflaeche. */
.nx-placeholder {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .014) 0 2px,
      transparent 2px 7px),
    var(--nx-well);
  border-radius: var(--nx-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 9px/1 var(--nx-font-mono);
  color: var(--nx-text-ghost);
  letter-spacing: .06em;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}

/* Knöpfe */
.nx-btn {
  display: block;
  width: 100%;
  padding: 15px;
  text-align: center;
  border-radius: var(--nx-r-pill);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.nx-btn--primary {
  background: var(--nx-hazard-face);
  color: var(--nx-bg);
  border-color: var(--nx-hazard-deep);
  box-shadow: var(--nx-hazard-glow);
}
.nx-btn--primary:hover {
  background: linear-gradient(180deg, #ffd84a 0%, #ffd23f 52%, #eabb1f 100%);
}
.nx-btn--on {
  background: var(--nx-bg);
  color: var(--nx-hazard);
  border-color: var(--nx-hazard);
}
.nx-btn--light {
  background: linear-gradient(180deg, #fff 0%, #f5f5f3 60%, #e6e6e3 100%);
  color: var(--nx-bg);
  border-color: #d8d8d4;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
              0 6px 18px -10px rgba(0, 0, 0, .8);
}
.nx-btn--light:hover { background: #fff; }
.nx-btn--checked {
  background: var(--nx-bg);
  color: var(--nx-ok);
  border-color: var(--nx-ok);
}
.nx-btn--ghost {
  border-color: var(--nx-line);
  color: var(--nx-text);
  font-size: 11px;
  letter-spacing: .16em;
  padding: 13px;
}
.nx-btn--ghost:hover { border-color: var(--nx-text-dim); }
.nx-btn--sm { padding: 13px; font-size: 11px; letter-spacing: .16em; }

.nx-chip {
  font: 700 10px/1 var(--nx-font-mono);
  letter-spacing: .16em;
  color: var(--nx-bg);
  background: var(--nx-hazard-face);
  box-shadow: var(--nx-hazard-glow);
  padding: 12px 16px;
  border-radius: var(--nx-r-pill);
  align-self: flex-start;
  transition: background .15s;
}
.nx-chip:hover { background: var(--nx-hazard-hot); }

/* Leerzustand: Zeichen + ein Satz + der passende Knopf */
.nx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  text-align: center;
  padding: 16px 4px 6px;
}
.nx-empty__mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--nx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--nx-font-mono);
  color: var(--nx-line);
}
.nx-empty__text {
  font: 300 13px/1.45 var(--nx-font-display);
  color: var(--nx-text-dim);
  max-width: 230px;
}
.nx-empty__cta {
  font: 700 9.5px/1 var(--nx-font-mono);
  letter-spacing: .16em;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-pill);
  padding: 11px 15px;
  color: var(--nx-text);
  transition: border-color .15s, color .15s;
}
.nx-empty__cta:hover { border-color: var(--nx-hazard); color: var(--nx-hazard); }

/* ── 01 HOME ──────────────────────────────────────────── */

.nx-hero__visual {
  height: 148px;
  margin: 0;
  background: var(--nx-void);
  border-radius: var(--nx-r-inner);
  display: flex;
  align-items: flex-end;
  padding: var(--nx-pad-card);
  position: relative;
}
.nx-hero__tag {
  position: absolute;
  top: 12px; right: 12px;
  font: 700 9px/1 var(--nx-font-mono);
  letter-spacing: .16em;
  color: var(--nx-bg);
  background: var(--nx-hazard);
  padding: 5px 8px;
  border-radius: var(--nx-r-xs);
}
.nx-hero__body {
  padding: var(--nx-pad) var(--nx-pad-card) 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.nx-hero__meta {
  display: flex;
  gap: 18px;
  font: 500 11px/1.45 var(--nx-font-mono);
  color: var(--nx-text-dim);
}
.nx-hero__count {
  border-top: 1px solid var(--nx-line);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nx-hero__count b {
  font: 700 22px/1 var(--nx-font-mono);
  color: var(--nx-hazard);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  /* Ein leichtes Glimmen, damit die Zahl aus der Karte tritt. */
  text-shadow: 0 0 22px rgba(232, 185, 35, .28);
}

.nx-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nx-gap-sm);
}
.nx-duo__label {
  font: 700 9px/1 var(--nx-font-mono);
  letter-spacing: .16em;
}
.nx-duo__title {
  margin-top: 10px;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.15;
  /* Sonst bricht "Member-ID & Check-in" am Bindestrich und
     laesst ein einzelnes "in" auf der zweiten Zeile stehen. */
  text-wrap: balance;
  hyphens: none;
}

.nx-sectionhead {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.nx-sectionhead h2 {
  margin: 0;
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.nx-sectionhead span {
  font: 500 10px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
}

.nx-resident__shot { height: 92px; }
.nx-resident__body { padding: 10px 11px 12px; }
.nx-resident__name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.1;
  text-transform: uppercase;
}
.nx-resident__style {
  margin-top: 6px;
  font: 500 9px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .08em;
}

.nx-community {
  padding: var(--nx-pad) var(--nx-pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-sm);
}

/* ── 02 TONIGHT ───────────────────────────────────────── */

.nx-live {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nx-live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nx-ok);
  animation: nxBlink 1.4s infinite;
}
.nx-live__clock {
  margin-left: auto;
  font: 500 10px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  font-variant-numeric: tabular-nums;
}

.nx-now__label {
  font: 500 10px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .14em;
}
.nx-now__artist {
  margin-top: 9px;
  font-weight: 700;
  font-size: 29px;
  line-height: 1;
  text-transform: uppercase;
}
.nx-now__slot {
  margin-top: 7px;
  font: 500 11px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
}
.nx-bar {
  margin-top: var(--nx-gap);
  height: 5px;
  border-radius: var(--nx-r-pill);
  background: var(--nx-hairline);
  overflow: hidden;
}
.nx-bar__fill {
  height: 100%;
  background: var(--nx-hazard);
  border-radius: var(--nx-r-pill);
  transition: width .6s linear;
}
.nx-now__times {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font: 500 9.5px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
}

/* ── Line-up ──────────────────────────────────────────────
   Abfahrtstafel: die Uhrzeit fuehrt, jede Zeile traegt ihren
   Zustand als Wort, und genau eine Zeile ist gelb. Kein Zustand
   haengt an Bewegung -- unter prefers-reduced-motion bleibt die
   Liste vollstaendig lesbar. */
.nx-slots { display: flex; flex-direction: column; }

.nx-lineup { padding: 0; overflow: hidden; }

/* Der Nachtstreifen: jedes Segment so breit wie der Slot lang ist.
   Damit ist die Form des Abends sichtbar, auch ohne Uhr. */
.nx-lineup__strip {
  display: flex;
  gap: 2px;
  padding: 12px 12px 0;
}
.nx-lineup__strip i {
  display: block;
  height: 7px;
  background: var(--nx-edge);
}
.nx-lineup__strip i[data-state="done"] { background: var(--nx-text-off); }
.nx-lineup__strip i[data-state="live"] { background: var(--nx-hazard); }
.nx-lineup__strip i[data-state="next"] { background: var(--nx-text-ghost); }

.nx-slot {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-top: 1px solid var(--nx-hairline);
}
.nx-lineup__strip + .nx-slot { border-top: 0; margin-top: 4px; }

.nx-slot__time {
  font: 700 13px/1.2 var(--nx-font-mono);
  color: var(--nx-text);
  font-variant-numeric: tabular-nums;
}
.nx-slot__main { min-width: 0; }
.nx-slot__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  font-family: var(--nx-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.nx-slot__floor {
  flex: none;
  font: 700 8.5px/1 var(--nx-font-mono);
  letter-spacing: .14em;
  color: var(--nx-text-dim);
  border: 1px solid var(--nx-chip);
  border-radius: var(--nx-r-xs);
  padding: 3px 5px;
}
/* Der Floorwechsel ist der einzige echte Bruch im Abend --
   deshalb bekommt er als einziges Detail eine Marke. */
.nx-slot__floor--wechsel {
  color: var(--nx-hazard);
  border-color: var(--nx-hazard-deep);
}
.nx-slot__meta {
  margin-top: 5px;
  font: 500 9px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .1em;
}
.nx-slot__tag {
  font: 700 8.5px/1 var(--nx-font-mono);
  letter-spacing: .14em;
  color: var(--nx-text-dim);
  text-align: right;
}

/* Gespielt: zurueckgenommen, aber nicht kleiner -- sonst waeren
   Kontrast und Mindestgroesse gleichzeitig unterschritten. */
.nx-slot[data-state="done"] .nx-slot__time,
.nx-slot[data-state="done"] .nx-slot__name,
.nx-slot[data-state="done"] .nx-slot__tag { color: var(--nx-text-ghost); }
.nx-slot[data-state="done"] .nx-slot__floor {
  color: var(--nx-text-ghost);
  border-color: var(--nx-hairline);
}

/* Der naechste Act ist die nuetzlichste Zeile des Abends. */
.nx-slot[data-state="next"] .nx-slot__name { font-size: 17px; }
.nx-slot[data-state="next"] .nx-slot__tag  { color: var(--nx-text); }

/* Genau eine gelbe Flaeche in der Liste. Mehr waere eine Lampe. */
.nx-slot[data-state="live"],
.nx-slot[data-state="ending"] {
  background: var(--nx-hazard-face);
  color: var(--nx-void);
  border-top-color: transparent;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px,
                     100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.nx-slot[data-state="live"] .nx-slot__time,
.nx-slot[data-state="live"] .nx-slot__name,
.nx-slot[data-state="live"] .nx-slot__tag,
.nx-slot[data-state="ending"] .nx-slot__time,
.nx-slot[data-state="ending"] .nx-slot__name,
.nx-slot[data-state="ending"] .nx-slot__tag { color: var(--nx-void); }
.nx-slot[data-state="live"] .nx-slot__name,
.nx-slot[data-state="ending"] .nx-slot__name { font-size: 19px; font-weight: 700; }
.nx-slot[data-state="live"] .nx-slot__meta,
.nx-slot[data-state="ending"] .nx-slot__meta { color: var(--nx-void); opacity: .72; }
.nx-slot[data-state="live"] .nx-slot__floor,
.nx-slot[data-state="ending"] .nx-slot__floor {
  color: var(--nx-void);
  border-color: var(--nx-void);
  opacity: .78;
}

/* Fortschritt an der Unterkante der laufenden Zeile -- dort, wo
   das Auge ohnehin schon ist. Gesetzt wird nur --nx-p. */
.nx-slot[data-state="live"]::after,
.nx-slot[data-state="ending"]::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: var(--nx-p, 0%);
  background: var(--nx-void);
  opacity: .55;
}

.nx-floorplan { padding: 12px; }
.nx-floorplan__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 96px 60px;
  gap: 8px;
}
.nx-floorplan__room {
  background: var(--nx-void);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 9px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .12em;
}
.nx-floorplan__room--main {
  border-color: var(--nx-hazard);
  color: var(--nx-hazard);
  font-size: 11px;
  letter-spacing: .14em;
}
.nx-floorplan__room--sub { font-size: 10px; }

.nx-lost { padding: 0; }
.nx-lost__kopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--nx-pad-card);
  text-align: left;
}
.nx-lost__sub {
  margin-top: 6px;
  font: 500 9.5px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
}
.nx-lost__sign {
  font: 700 17px/1 var(--nx-font-mono);
  color: var(--nx-hazard);
}
.nx-lost__panel {
  border-top: 1px solid var(--nx-hairline);
  padding: var(--nx-pad-card);
  display: flex;
  flex-direction: column;
  gap: 11px;
  animation: nxPop .18s ease-out;
}
.nx-lost__actions { display: flex; gap: 8px; }
.nx-lost__actions > * { flex: 1; }

/* ── 03 PASS ──────────────────────────────────────────── */

.nx-pass {
  padding: 18px var(--nx-pad) var(--nx-pad);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.nx-pass__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.nx-pass__name {
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}
.nx-pass__tier {
  margin-top: 7px;
  font: 500 10px/1 var(--nx-font-mono);
  color: var(--nx-hazard);
  letter-spacing: .14em;
}
.nx-pass__id {
  text-align: right;
  font: 700 10px/1.6 var(--nx-font-mono);
  color: var(--nx-text);
}
/* Die Mitgliedsnummer auf dem Pass. Gross genug, um sie im
   Dunkeln an einer Tuer vorzuzeigen -- darum geht es hier. */
.nx-passno {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 32px;
  border: 1px solid var(--nx-hazard);
  border-radius: var(--nx-r-inner);
  background: rgba(232, 185, 35, .05);
}
.nx-passno__label {
  font: 700 9px/1 var(--nx-font-mono);
  letter-spacing: .2em;
  color: var(--nx-text-dim);
}
.nx-passno__wert {
  font: 700 54px/1 var(--nx-font-mono);
  letter-spacing: .04em;
  color: var(--nx-hazard);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(232, 185, 35, .3);
}
.nx-pass__hint {
  text-align: center;
  font: 500 9.5px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .16em;
}

.nx-tickets {
  padding: var(--nx-pad-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx-ticket {
  display: flex;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--nx-hairline);
  padding-top: 13px;
}
.nx-ticket__no {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--nx-r-inner);
  background: var(--nx-hazard-face);
  color: var(--nx-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 var(--nx-font-mono);
  box-shadow: var(--nx-hazard-glow);
}
.nx-ticket__name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.15;
  text-transform: uppercase;
}
.nx-ticket__meta {
  margin-top: 6px;
  font: 500 9.5px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
}
.nx-ticket__state {
  font: 700 9px/1 var(--nx-font-mono);
  color: var(--nx-hazard);
  letter-spacing: .12em;
}
.nx-tickets__empty { border-top: 1px solid var(--nx-hairline); }

/* Vier Zahlen: zwei mal zwei. Bei drei nebeneinander wird die
   vierte zur Waise, und auf 402 px waeren vier in einer Reihe
   nicht mehr lesbar. */
.nx-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.nx-stat { padding: 13px; text-align: center; }

/* Ein Code, den jemand von einem Zettel abtippt: Mono, weit
   gesperrt, damit sich 8 und B nicht in die Quere kommen. */
.nx-code {
  font-family: var(--nx-font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.nx-code--gross {
  font-size: 26px;
  font-weight: 700;
  color: var(--nx-hazard);
  padding: 12px 0 4px;
  text-align: center;
}
.nx-stat__value {
  font: 700 21px/1 var(--nx-font-mono);
  color: var(--nx-text);
}
.nx-stat__value--accent { color: var(--nx-hazard); }
.nx-stat__label {
  margin-top: 7px;
  font: 500 8.5px/1.2 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .1em;
}

/* ── 04 FEED ──────────────────────────────────────────── */

/* Mit den Themen sind es mehr Kacheln als Platz. Sie scrollen
   seitwaerts, ohne sichtbare Leiste -- und der Rand geht bis zur
   Kante, damit man sieht, dass es weitergeht. */
.nx-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--nx-pad) * -1);
  padding: 2px var(--nx-pad);
}
.nx-filters::-webkit-scrollbar { display: none; }
.nx-filter { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.nx-filter__n { font-size: 8.5px; opacity: .65; }
.nx-filter {
  font: 700 9.5px/1 var(--nx-font-mono);
  letter-spacing: .14em;
  padding: 10px 14px;
  border-radius: var(--nx-r-pill);
  border: 1px solid var(--nx-line);
  color: var(--nx-text-dim);
  background: transparent;
  transition: border-color .15s, color .15s, background .15s;
}
.nx-filter:hover { border-color: var(--nx-text-dim); }
.nx-filter[aria-pressed="true"] {
  border-color: var(--nx-hazard-deep);
  background: var(--nx-hazard-face);
  color: var(--nx-bg);
  box-shadow: var(--nx-hazard-glow);
}

/* Etiketten unter dem Kopf: Thema und, falls eingeschraenkt,
   fuer wen. Das Thema ist ein Knopf -- er filtert den Feed. */
.nx-post__marken {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 13px 0;
}
.nx-post__thema {
  font: 700 8.5px/1 var(--nx-font-mono);
  letter-spacing: .14em;
  color: var(--nx-hazard);
  border: 1px solid var(--nx-hazard-deep);
  border-radius: var(--nx-r-xs);
  padding: 5px 7px;
  background: transparent;
}
.nx-post__thema:hover { background: var(--nx-hover); }

.nx-post__head {
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: var(--nx-gap-sm);
  border-bottom: 1px solid var(--nx-hairline);
}
.nx-post__avatar {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--nx-font-mono);
  color: var(--nx-bg);
}
.nx-post__author {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  text-transform: uppercase;
}
.nx-post__meta {
  margin-top: 4px;
  font: 500 8.5px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .1em;
}
.nx-post__tag {
  font: 700 8.5px/1 var(--nx-font-mono);
  letter-spacing: .12em;
}
.nx-post__shot { height: 132px; }
.nx-post__body { padding: 12px 13px 13px; }
.nx-post__text {
  margin: 0;
  font: 300 14px/1.5 var(--nx-font-display);
  color: var(--nx-text);
  overflow-wrap: anywhere;
}
.nx-post__actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.nx-like {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 10px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  transition: color .15s;
}
.nx-like i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.nx-like[aria-pressed="true"] { color: var(--nx-hazard); }
.nx-post__comments {
  font: 500 10px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
}

.nx-fab {
  position: fixed;
  right: var(--nx-pad);
  bottom: calc(var(--nx-tabbar-h, 96px) + 16px);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 17px 13px 14px;
  border-radius: var(--nx-r-pill);
  background: var(--nx-hazard-face);
  color: var(--nx-bg);
  box-shadow: var(--nx-shadow-float), var(--nx-hazard-glow);
  transition: filter .15s;
}
.nx-fab:hover { filter: brightness(1.06); }
.nx-fab__plus {
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  margin-top: -2px;
}
.nx-fab__label {
  font: 700 10px/1 var(--nx-font-mono);
  letter-spacing: .14em;
}

/* ── 05 DROP ──────────────────────────────────────────── */

.nx-drop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nx-drop__value {
  margin-top: 9px;
  font: 700 23px/1 var(--nx-font-mono);
  color: var(--nx-text);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.nx-drop__mark {
  width: 52px; height: 52px;
  flex: none;
  border-radius: var(--nx-r-inner);
  background: var(--nx-stripe-xs);
}

.nx-product__shot { height: 124px; position: relative; }
.nx-product__badge {
  position: absolute;
  top: 8px; left: 8px;
  font: 700 8.5px/1 var(--nx-font-mono);
  letter-spacing: .12em;
  padding: 4px 7px;
  border-radius: var(--nx-r-xs);
}
.nx-product__body { padding: 11px 12px 13px; }
.nx-product__name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.15;
  text-transform: uppercase;
}
.nx-product__row {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.nx-product__price {
  font: 700 12px/1 var(--nx-font-mono);
  color: var(--nx-hazard);
}
.nx-product__sizes {
  font: 500 8.5px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
}

/* ── 06 PROFIL ────────────────────────────────────────── */

.nx-profile__head {
  display: flex;
  align-items: center;
  gap: var(--nx-gap);
}
.nx-profile__avatar {
  width: 58px; height: 58px;
  flex: none;
  border-radius: 50%;
  background: var(--nx-hazard-face);
  box-shadow: var(--nx-hazard-glow);
  color: var(--nx-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 23px/1 var(--nx-font-mono);
}
.nx-profile__sub {
  margin-top: 7px;
  font: 500 10px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .12em;
}

.nx-rows { display: block; }
.nx-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--nx-pad-card);
  border-bottom: 1px solid var(--nx-hairline);
  transition: background .12s;
}
.nx-row:last-child { border-bottom: none; }
.nx-row:hover { background: var(--nx-hover); }
.nx-row__label { font-weight: 400; font-size: 14.5px; }
.nx-row__label--muted { color: var(--nx-text-dim); }
.nx-row__value {
  font: 500 10px/1 var(--nx-font-mono);
  color: var(--nx-text-dim);
  letter-spacing: .1em;
  text-align: right;
}

.nx-signature {
  font: 500 10px/1.7 var(--nx-font-mono);
  color: var(--nx-text-ghost);
  text-align: center;
  margin-top: 6px;
  letter-spacing: .1em;
}

/* ── Tab-Leiste ───────────────────────────────────────────
   Bleibt unten am Fensterrand stehen. Der Inhalt scrollt
   darunter durch; den Platz dafuer schafft der Innenabstand von
   .nx-app, damit der Rechtsfuss nicht darunter verschwindet.   */

.nx-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  /* Der Streifen rahmt die Leiste nicht mehr oben, also uebernimmt
     eine feine Lichtkante die Trennung zum Inhalt. */
  border-top: 1px solid rgba(255, 255, 255, .05);
  /* Einheitliche Flaeche, kein Verlauf, der nach unten in den
     Grund ausblendet: unter den Icons liegt am iPhone noch der
     Bereich fuer den Homebalken. Blendet die Leiste vorher aus,
     sieht dieser Streifen aus wie ein fremder schwarzer Balken,
     statt zur Leiste zu gehoeren. */
  background: #0a0a0c;
  box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .95);
}

.nx-tabbar__row {
  border-top: 1px solid var(--nx-hairline);
  display: flex;
  /* Dieselbe Spalte wie der Inhalt -- ueber die volle Breite
     eines Rechnerbildschirms stuenden die Icons sonst weit
     auseinander. */
  max-width: var(--nx-col);
  margin: 0 auto;
  padding-bottom: var(--nx-bottom);
  background: inherit;
  overflow-x: auto;
  scrollbar-width: none;
}
.nx-tabbar__row::-webkit-scrollbar { width: 0; height: 0; }

.nx-tab {
  flex: 1 0 auto;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 9px;
  padding-bottom: 2px;
  position: relative;
  color: var(--nx-text-dim);
  transition: color .15s;
}
.nx-tab__bar {
  position: absolute;
  top: 0;
  width: 20px; height: 3px;
  border-radius: var(--nx-r-pill);
  background: transparent;
}
.nx-tab__label {
  font: 700 8.5px/1 var(--nx-font-mono);
  letter-spacing: .1em;
}
.nx-tab[aria-current="page"] { color: var(--nx-hazard); }
.nx-tab[aria-current="page"] .nx-tab__bar { background: var(--nx-hazard); }

/* ── Hazard-Bänder ────────────────────────────────────────
   Rahmen die Seite oben und unten, fest am Fenster -- genau wie
   auf der Website (dort .stripe-bar und body::after). Gleiche
   Hoehe, gleiches Muster, gleiche Bewegung.

   Die seitliche Ueberlaenge ist kein Versehen: laeuft das Muster
   nur bis zum Rand, sieht man beim Wandern die Kante. Mit 40px
   Ueberstand links und rechts bleibt sie ausserhalb des Bildes. */
.nx-stripe-bar {
  position: fixed;
  left: -40px;
  right: -40px;
  height: 9px;
  z-index: 70;
  background: var(--nx-stripe-rand);
  animation: nxStripe 5s linear infinite;
  pointer-events: none;
}
.nx-stripe-bar--top { top: 0; }
.nx-stripe-bar--bottom { bottom: 0; }

/* Ein voller Musterdurchlauf misst 28px bei 45 Grad, also
   28 * sqrt(2) / 2 = 19.799px in der Waagerechten. Genau um
   diesen Betrag verschieben, dann ist der Umlauf nahtlos. */
@keyframes nxStripe {
  from { background-position: 0 0; }
  to   { background-position: -39.598px 0; }
}

/* Tablet: die App fuellt den Bildschirm, aber Textzeilen ueber
   die volle iPad-Breite liest niemand gern. Inhalt, Kopfzeile und
   Tab-Leiste bekommen deshalb dieselbe ruhige Spaltenbreite. */
/* Ab Tablet-Breite bekommt der Inhalt etwas mehr Luft am Rand,
   und alles, was frei ueber der Seite schwebt (Schwebeknopf,
   Sheets, Rueckmeldungen), bleibt in derselben Spalte wie der
   Inhalt statt an den Fensterrand zu wandern. --nx-halb ist der
   Abstand vom Fenstermittelpunkt zur Spaltenkante.

   Das Zahnrad-Menue nicht: das Zahnrad selbst sitzt jetzt ganz
   rechts in der Kopfzeile, also gehoert das Menue auch dorthin. */
@media (min-width: 700px) {
  .nx-app { --nx-halb: calc(var(--nx-col) / 2); }
  .nx-screen { padding-left: 24px; padding-right: 24px; }
  .nx-toast { max-width: var(--nx-col); margin: 0 auto; }
  .nx-fab { left: auto; right: max(24px, calc(50% - var(--nx-halb) + 24px)); }
  .nx-modal { padding: 26px max(26px, calc(50% - 280px)); }
  .nx-sheet__panel {
    max-width: var(--nx-col);
    margin: 0 auto;
    border-radius: var(--nx-r-sheet) var(--nx-r-sheet) 0 0;
  }
}

/* iPhone SE und schmaler */
@media (max-width: 340px) {
  .nx-tab { min-width: 58px; }
  .nx-tab__label { font-size: 8px; letter-spacing: .06em; }
  .nx-tab svg { width: 19px; height: 19px; }
}

/* ── Overlays ───────────────────────────────────────────
   Stapelreihenfolge, damit nichts hinter etwas anderem landet:

     0  Grain          5  Kopfzeile      9  (frei)
     1  Inhalt         6  Tab-Leiste    11  Sheets
                       7  Schwebeknopf  14  Bestaetigungsdialog
                       8  Zahnrad-Menü  16  Toast
   ───────────────────────────────────────────────────────── */

.nx-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .66);
  border: 0;
  width: 100%;
  display: block;
}

.nx-menu {
  position: fixed;
  z-index: 8;
  inset: 0;
}
.nx-menu__panel {
  position: absolute;
  /* Direkt unter der klebenden Kopfzeile, buendig unter dem
     Zahnrad. --nx-topbar-h misst nx-app.js. */
  top: calc(9px + var(--nx-topbar-h, 96px) + 8px); right: 20px;
  width: 210px;
  border: 1px solid var(--nx-line);
  background: linear-gradient(180deg, #141416 0%, #0b0b0c 100%);
  border-radius: var(--nx-r-card);
  overflow: hidden;
  animation: nxPop .16s ease-out;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset,
              0 20px 50px -18px rgba(0, 0, 0, .95);
}
.nx-menu__panel .nx-row { padding: 13px 14px; }
.nx-menu__panel .nx-row__label { font-size: 14px; }
.nx-menu__panel .nx-row__value { font-size: 9px; }

/* Der Bestaetigungsdialog muss ueber den Sheets liegen. Er wird
   ja gerade aus einem Sheet heraus geoeffnet ("Termin loeschen?")
   -- laege er darunter, sieht man ihn erst, wenn das Sheet zu ist,
   und bis dahin scheint das Loeschen nichts zu tun. */
.nx-modal {
  position: fixed;
  inset: 0;
  z-index: 14;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}
.nx-modal__card {
  width: 100%;
  border: 1px solid var(--nx-line);
  background: linear-gradient(180deg, #141416 0%, #0b0b0c 100%);
  border-radius: var(--nx-r-card);
  overflow: hidden;
  animation: nxPop .18s ease-out;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset,
              0 24px 60px -20px rgba(0, 0, 0, .95);
}
.nx-modal__body {
  padding: 18px var(--nx-pad) var(--nx-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.nx-modal__actions > * { flex: 1; }

.nx-sheet {
  position: fixed;
  inset: 0;
  z-index: 11;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: flex-end;
  /* --nx-kb ist die Höhe, die die Bildschirmtastatur verdeckt
     (wird in nx-app.js gesetzt). Ohne Tastatur: 0. */
  padding-bottom: var(--nx-kb, 0px);
  transition: padding-bottom .2s ease-out;
}
.nx-sheet__panel {
  width: 100%;
  background: linear-gradient(180deg, #131315 0%, #0b0b0c 40%, #090909 100%);
  border-top: 1px solid var(--nx-line);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .06) inset,
              0 -20px 50px -20px rgba(0, 0, 0, .9);
  border-radius: var(--nx-r-sheet) var(--nx-r-sheet) 0 0;
  padding: 18px var(--nx-pad) calc(34px + var(--nx-safe-bottom));
  max-height: calc(100dvh - var(--nx-kb, 0px) - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  animation: nxPop .2s ease-out;
}
.nx-sheet__grip {
  width: 44px; height: 4px;
  border-radius: var(--nx-r-pill);
  background: var(--nx-line);
  align-self: center;
}
.nx-sheet__input {
  border: 1px solid var(--nx-edge);
  border-radius: var(--nx-r-inner);
  background: #070708;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
  padding: 13px;
  min-height: 88px;
  font: 300 14px/1.5 var(--nx-font-display);
  color: var(--nx-text);
  resize: none;
  width: 100%;
}
.nx-sheet__input::placeholder { color: var(--nx-text-dim); }
.nx-sheet__input:focus { outline: none; border-color: var(--nx-hazard); }
.nx-sheet__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nx-sheet__row > .nx-btn { flex: 1; }
.nx-sheet__icon {
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--nx-r-inner);
  border: 1px solid var(--nx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-text-dim);
  transition: border-color .15s, color .15s;
}
.nx-sheet__icon:hover { border-color: var(--nx-hazard); color: var(--nx-hazard); }

.nx-toast {
  position: fixed;
  left: var(--nx-pad);
  right: var(--nx-pad);
  bottom: calc(var(--nx-tabbar-h, 96px) + var(--nx-fab-h, 0px) + 8px);
  /* Rueckmeldungen ganz nach oben: sie sind oft die Antwort auf
     das, was gerade in einem Sheet oder Dialog passiert ist. */
  z-index: 16;
  border: 1px solid var(--nx-hazard);
  background: var(--nx-surface);
  border-radius: var(--nx-r-card);
  padding: 13px var(--nx-pad-card);
  display: flex;
  align-items: center;
  gap: var(--nx-gap-sm);
  animation: nxToast 2.6s ease-out both;
  pointer-events: none;
}
.nx-toast__dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--nx-hazard);
}
.nx-toast__text {
  font: 700 10px/1.3 var(--nx-font-mono);
  letter-spacing: .1em;
  color: var(--nx-text);
}

/* ── Bewegung ─────────────────────────────────────────── */

@keyframes nxBlink { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes nxPop {
  from { transform: translateY(6px); opacity: 0 }
  to   { transform: translateY(0);   opacity: 1 }
}
@keyframes nxToast {
  0%   { transform: translateY(14px); opacity: 0 }
  12%  { transform: translateY(0);    opacity: 1 }
  88%  { transform: translateY(0);    opacity: 1 }
  100% { transform: translateY(14px); opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .nx-toast { animation: none; opacity: 1; }
  .nx-live__dot { animation: none; }
  /* Ein dauerhaft wanderndes Muster ist genau das, was hier
     stoert -- Farbe und Form bleiben, die Bewegung geht. */
  .nx-stripe-bar { animation: none; }
}

/* ── Druck ────────────────────────────────────────────── */

@media print {
  .nx-topbar, .nx-header, .nx-tabbar, .nx-fab, .nx-grain, .nx-toast,
  .nx-stripe-bar, .nx-sitefoot,
  .nx-menu, .nx-modal, .nx-sheet { display: none !important; }
  html, body, .nx-app { background: #fff; color: #000; height: auto; min-height: 0; }
  body { padding: 0; }
  .nx-app { position: static; box-shadow: none; }
  .nx-screen { overflow: visible; max-width: none; }
  .nx-card, .nx-framed__inner { border-color: #999; background: #fff; }
  .nx-passno { border-color: #999; background: none; }
  .nx-passno__wert { color: #000; text-shadow: none; }
  .nx-h1, .nx-h2, .nx-h3, .nx-h4, .nx-pass__name, .nx-post__text { color: #000; }
}

/* ── Feinschliff ──────────────────────────────────────────
   Überschriften und Absätze tragen von Haus aus Abstände, die
   hier nicht gewollt sind. Spans in Knöpfen brauchen display:block,
   damit sie wie im Entwurf untereinander stehen.               */

.nx-h1, .nx-h2, .nx-h3, .nx-h4 { margin: 0; }
.nx-empty__text { margin: 0; }

.nx-duo__label,
.nx-duo__title,
.nx-lost__kopf .nx-h4,
.nx-lost__sub { display: block; }

.nx-ghostlabel {
  font: 500 10px/1 var(--nx-font-mono);
  color: var(--nx-text-ghost);
  letter-spacing: .06em;
}

.nx-hero__visual .nx-ghostlabel { position: relative; z-index: 1; }

/* Beitragskarte im Feed: Bildfläche randlos wie im Entwurf */
.nx-post__shot, .nx-resident__shot, .nx-product__shot { width: 100%; }

/* ── Nachtrag: echte Daten ────────────────────────────────
   Verweise (Residents, Instagram) sind Links, keine Knöpfe —
   sie führen aus der App heraus. Optisch bleiben sie gleich.  */

a.nx-card, a.nx-btn, a.nx-empty__cta {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .15s, color .15s, background .15s;
}
a.nx-card:hover { border-color: var(--nx-hazard); }

/* Kein Termin, kein Check-in */
.nx-btn[disabled] {
  background: transparent;
  color: var(--nx-text-dim);
  border-color: var(--nx-line);
  cursor: not-allowed;
}

/* Resident mit Bild statt Platzhalterfläche */
.nx-resident__img {
  display: block;
  object-fit: cover;
  border-radius: var(--nx-r-sm);
  background: var(--nx-void);
}

/* Vergangene Events — gleiche Zeile wie auf der Startseite */
.nx-past {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.nx-past--tba { opacity: .6; }
.nx-past__date {
  min-width: 44px;
  flex: none;
  font: 500 11px/1.4 var(--nx-font-mono);
  color: var(--nx-text-dim);
}
.nx-past__name {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--nx-text);
}
.nx-past__where {
  margin-top: 4px;
  font: 500 10px/1.4 var(--nx-font-mono);
  color: var(--nx-text-dim);
}

/* ── Eingabefelder ────────────────────────────────────────
   Anmeldung und Termin-Editor. 16px Schriftgröße ist kein
   Zufall: darunter zoomt iOS beim Antippen ins Feld hinein.   */

.nx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nx-field__label {
  font: 700 9px/1 var(--nx-font-mono);
  letter-spacing: .16em;
  color: var(--nx-text-dim);
}
.nx-field__input,
.nx-field__select {
  width: 100%;
  border: 1px solid var(--nx-edge);
  border-radius: var(--nx-r-inner);
  /* Ein Eingabefeld liegt tiefer als seine Umgebung -- der
     Innenschatten macht aus der Flaeche eine Mulde. */
  background: #070708;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
  color: var(--nx-text);
  padding: 12px 13px;
  font: 400 16px/1.3 var(--nx-font-display);
  -webkit-appearance: none;
  appearance: none;
}
.nx-field__input:focus,
.nx-field__select:focus {
  outline: none;
  border-color: var(--nx-hazard);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6),
              0 0 0 3px rgba(232, 185, 35, .14);
}
.nx-field__input::placeholder { color: var(--nx-text-ghost); }
.nx-field__error {
  font: 700 9.5px/1.4 var(--nx-font-mono);
  letter-spacing: .1em;
  color: var(--nx-danger);
}
.nx-field__hint {
  font: 500 9.5px/1.4 var(--nx-font-mono);
  color: var(--nx-text-dim);
}
/* Zwei Felder nebeneinander. Braucht display:flex selbst — das
   Element trägt nur diese Klasse, nicht zusätzlich .nx-field. */
.nx-field--row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.nx-field--row > .nx-field { flex: 1; }

/* ── Termin-Editor ────────────────────────────────────────
   Das Sheet wird hoch und muss scrollen können, ohne dass die
   Seite darunter mitscrollt.                                  */

.nx-sheet--tall { align-items: stretch; }
.nx-sheet--tall .nx-sheet__panel {
  margin-top: auto;
  /* Mit offener Tastatur bleibt weniger Platz -- sonst reicht das
     Formular unter die Tastatur und lässt sich nicht scrollen. */
  max-height: min(92%, calc(100dvh - var(--nx-kb, 0px) - 40px));
}
.nx-sheet__panel--scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.nx-sheet__panel--scroll::-webkit-scrollbar { width: 0; }

/* Einfügen-Block: Knopf plus die Zeile, die sagt, was drin ist */
.nx-insert {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-inner);
  background: var(--nx-bg);
}
.nx-insert .nx-btn { width: 100%; }

.nx-btn--danger {
  border-color: var(--nx-line);
  color: var(--nx-danger);
}
.nx-btn--danger:hover { border-color: var(--nx-danger); }

/* Bearbeiten-Knopf an einem vergangenen Termin */
/* Wort statt Zeichen: das Bleistift-Glyph sass schief in einem
   Kreis, und rund ist in dieser Oberflaeche sonst nichts. Jetzt
   dieselbe Marke wie "ÄNDERN" am eigenen Beitrag im Feed. */
.nx-past__edit {
  flex: none;
  align-self: center;
  padding: 6px 8px;
  margin-right: -8px;
  font: 700 9.5px/1 var(--nx-font-mono);
  letter-spacing: .12em;
  color: var(--nx-text-ghost);
  transition: color .15s;
}
.nx-past__edit:hover { color: var(--nx-hazard); }

/* Bearbeiten und Löschen am eigenen Beitrag */
.nx-post__act {
  font: 700 9.5px/1 var(--nx-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nx-text-dim);
  transition: color .15s;
}
.nx-post__act:hover { color: var(--nx-text); }
.nx-post__act--danger:hover { color: var(--nx-danger); }

/* ── Bilder ───────────────────────────────────────────────── */

.nx-photo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-inner);
  background: var(--nx-bg);
}
.nx-photo__img {
  width: 120px; height: 120px;
  object-fit: cover;
  border-radius: var(--nx-r-inner);
  background: var(--nx-void);
}
.nx-photo--wide .nx-photo__img { width: 100%; height: 160px; }
.nx-photo__empty {
  width: 120px; height: 120px;
  border-radius: var(--nx-r-inner);
  background: var(--nx-void);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 9px/1 var(--nx-font-mono);
  color: var(--nx-text-ghost);
  letter-spacing: .1em;
}
.nx-photo__pick { cursor: pointer; }

.nx-post__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--nx-r-sm);
}

.nx-resident__hidden {
  margin-top: 6px;
  font: 700 8px/1 var(--nx-font-mono);
  letter-spacing: .14em;
  color: var(--nx-danger);
}

/* Das Datei-Feld steckt im Label — der ganze Knopf ist klickbar. */
.nx-sheet__icon { cursor: pointer; }

/* Eingefügte Slots im Termin-Editor — namentlich, nicht nur gezählt */
.nx-slotlist {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nx-slotlist li {
  font: 500 11px/1.3 var(--nx-font-mono);
  color: var(--nx-text);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.nx-slotlist b { color: var(--nx-hazard); font-weight: 700; }
.nx-slotlist span { margin-left: auto; color: var(--nx-text-dim); }

/* ── Gefällt mir ──────────────────────────────────────────
   Das Herz ist im Umriss leer und füllt sich, sobald es
   angetippt wurde. Ein Kreis liess offen, wofür er steht.    */

.nx-like svg { display: block; }
.nx-like[aria-pressed="true"] { --nx-fill: currentColor; }
.nx-like:active svg { transform: scale(1.25); transition: transform .12s; }

/* ── Sichtbarkeit eines Beitrags ──────────────────────────── */

/* Sitzt jetzt neben dem Thema in einer Zeile -- deshalb kein
   eigener Balken mehr, sondern ein Etikett wie das Thema. */
.nx-post__scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 8.5px/1 var(--nx-font-mono);
  letter-spacing: .14em;
  color: var(--nx-text-dim);
}

.nx-scope {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nx-scope__row { display: flex; gap: 6px; }
.nx-scope__opt {
  flex: 1;
  padding: 10px 6px;
  border: 1px solid var(--nx-edge);
  border-radius: var(--nx-r-pill);
  font: 700 9.5px/1 var(--nx-font-mono);
  letter-spacing: .12em;
  color: var(--nx-text-dim);
  transition: border-color .15s, color .15s, background .15s;
}
.nx-scope__opt[aria-pressed="true"] {
  border-color: var(--nx-hazard-deep);
  background: var(--nx-hazard-face);
  color: var(--nx-bg);
  box-shadow: var(--nx-hazard-glow);
}

/* Der Avatar-Platzhalter bringt seine eigene Fläche mit. */
/* Der Platzhalter im Kopf bringt seine eigene Fläche mit. */
.nx-ident__avatar svg { display: block; width: 34px; height: 34px; }

/* ── Profilbilder ─────────────────────────────────────────
   Überall rund, überall randlos: das Bild füllt seinen Kreis,
   statt darin zu schwimmen.                                   */

.nx-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.nx-ident__avatar, .nx-profile__avatar, .nx-post__avatar { overflow: hidden; }

.nx-photo__img--rund,
.nx-photo__empty--rund { border-radius: 50%; }

/* ── Key Visual ───────────────────────────────────────────── */

.nx-keyvisual {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--nx-r-sm);
  background: var(--nx-void);
}

.nx-hero__visual--bild { padding: 0; overflow: hidden; }
.nx-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--nx-r-inner);
}

/* Liste der freigegebenen Bilder aus den Werkzeugen */
.nx-fxlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 190px;
  overflow-y: auto;
}
.nx-fxlist__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--nx-edge);
  border-radius: var(--nx-r-sm);
  font: 500 11px/1.3 var(--nx-font-mono);
  color: var(--nx-text);
  text-align: left;
}
.nx-fxlist__opt:hover { border-color: var(--nx-hazard); }
.nx-fxlist__tool {
  flex: none;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nx-hazard);
}

/* ── Gästeliste ───────────────────────────────────────────
   Ein Platz ist ein Link zum Weitergeben, kein Formular --
   der Gast trägt sich selbst ein.                            */

.nx-gl__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.nx-gl__frei {
  font: 700 10px/1 var(--nx-font-mono);
  letter-spacing: .12em;
  color: var(--nx-hazard);
}

.nx-gl__platz {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--nx-hairline);
}
.nx-gl__platz:first-of-type { margin-top: 12px; }

.nx-gl__name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.15;
}
.nx-gl__platz[data-state="open"] .nx-gl__name { color: var(--nx-text-dim); }
.nx-gl__platz[data-state="used"] .nx-gl__name { text-transform: uppercase; }

/* Der Link steht klein da — man soll ihn weitergeben, nicht
   abtippen. Deshalb gekürzt statt umgebrochen. */
.nx-gl__link {
  margin-top: 4px;
  font: 500 9px/1.3 var(--nx-font-mono);
  color: var(--nx-text-ghost);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-gl__meta {
  margin-top: 4px;
  font: 700 8.5px/1 var(--nx-font-mono);
  letter-spacing: .14em;
  color: var(--nx-ok);
}

.nx-gl__act {
  flex: none;
  font: 700 9px/1 var(--nx-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nx-text-dim);
  padding: 6px 2px;
  transition: color .15s;
}
.nx-gl__act:hover { color: var(--nx-text); }
.nx-gl__act--danger:hover { color: var(--nx-danger); }