@property --hx {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
@property --gx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --gy {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 40%;
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #8a9a8e;
}
@property --tint {
  syntax: "<color>";
  inherits: true;
  initial-value: #8a9a8e;
}

:root {
  --accent: #8a9a8e;
  --tint: #8a9a8e;
  --bg: #e6e5e1;
  --ink: #0d0d0c;
  --deep: #0d0d0c;
  --line: rgba(13, 13, 12, 0.16);
  --ink-40: rgba(13, 13, 12, 0.42);

  --dark: #0d0d0c;
  --dark-ink: #e6e5e1;
  --dark-line: rgba(230, 229, 225, 0.14);
  --dark-40: rgba(230, 229, 225, 0.42);

  --pad: clamp(1.15rem, 2.6vw, 2.25rem);
  --header-h: clamp(3.5rem, 5.5vw, 4.5rem);

  --r: 14px;
  --r-lg: 26px;

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --e-back: cubic-bezier(0.34, 1.4, 0.44, 1);
  --e-cam: cubic-bezier(0.62, 0.02, 0.14, 1);

  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body { transition: --accent 0.9s var(--e-soft); }
/* overscroll-behavior haelt zusaetzlich das Nachfedern an, das auf
   Fingergeraeten sonst durch die gesperrte Seite hindurchgeht. */
body.is-locked { overflow: hidden; overscroll-behavior: none; }

/* world.css wird bewusst nicht blockierend geladen. Bis sie da ist, muss die
   Huelle der Open World trotzdem verborgen sein - sonst blitzt ihr Standbild
   fuer einen Moment ueber die ganze Seite. */
.wz { position: fixed; inset: 0; z-index: 170; overflow: hidden; visibility: hidden; opacity: 0; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.meta {
  font-family: var(--font);
  font-stretch: 82%;
  font-weight: 500;
  font-size: clamp(0.5625rem, 0.68vw, 0.6875rem);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.display {
  font-family: var(--font);
  font-stretch: 112%;
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 0.94;
  text-transform: uppercase;
}

.mask { display: block; overflow: hidden; }
.mask > i {
  display: block;
  font-style: normal;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.9s var(--e-out);
  transition-delay: calc(var(--d, 0) * 70ms + 120ms);
}
.is-ready .mask > i { transform: none; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: opacity 0.65s var(--e-soft);
}
.loader.is-fading { opacity: 0; }
.loader.is-gone { display: none; }

.loader__mark { width: min(24vw, 11rem); color: var(--ink); }
.loader__mark svg { width: 100%; height: auto; overflow: visible; }

.frag {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.9);
  transition: opacity 0.5s var(--e-soft), transform 1s var(--e-out);
  transition-delay: calc(var(--i) * 55ms);
}
.is-assembled .frag { opacity: 1; transform: none; }

.frag:nth-child(1) { --tx: -14%; --ty: -11%; --rot: -8deg; }
.frag:nth-child(2) { --tx: 11%; --ty: 9%; --rot: 6deg; }
.frag:nth-child(3) { --tx: -9%; --ty: 13%; --rot: 10deg; }
.frag:nth-child(4) { --tx: 13%; --ty: -8%; --rot: -6deg; }
.frag:nth-child(5) { --tx: -12%; --ty: 6%; --rot: 7deg; }
.frag:nth-child(6) { --tx: 8%; --ty: 12%; --rot: -11deg; }
.frag:nth-child(7) { --tx: -7%; --ty: -13%; --rot: 5deg; }
.frag:nth-child(8) { --tx: 12%; --ty: 7%; --rot: -7deg; }

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 160;
  height: var(--header-h);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  mix-blend-mode: difference;
  color: #fff;
}

.header__side {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.header .lang { display: inline-flex; align-items: center; gap: 0.4rem; }
.header .lang__btn {
  color: rgba(255, 255, 255, 0.42);
  padding: 0;
  background: none;
  border-radius: 0;
  transition: color 0.3s var(--e-soft);
}
.header .lang__btn:hover { color: #fff; }
.header .lang__btn.is-active { color: #fff; background: none; }
.header .lang__sep { color: rgba(255, 255, 255, 0.3); }

.brand {
  display: block;
  width: var(--logo-w);
  opacity: 0;
  transition: opacity 0.6s var(--e-soft), transform 0.6s var(--e-back);
}
.is-landed .brand { opacity: 1; }
.brand:active { transform: scale(0.92); }
.brand img, .brand svg { width: 100%; height: auto; }
.brand svg { overflow: visible; }

.brand .frag {
  opacity: 1;
  transform: none;
  transition: transform 0.7s var(--e-out);
  transition-delay: calc(var(--i) * 22ms);
}
.brand:hover .frag {
  transform: translate(calc(var(--tx) * 1.6), calc(var(--ty) * 1.6)) rotate(var(--rot));
}
.brand .frag.is-twitch {
  transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) rotate(calc(var(--rot) * 0.5));
  transition: transform 0.75s var(--e-back);
  transition-delay: 0s;
}

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(20px) saturate(1.25) contrast(1.04);
  transform: scale(1.14);
  transition: opacity 0.7s var(--e-soft);
}
body.is-scene .field,
body.is-menu-open .field { opacity: 0; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(13, 13, 12, 0.55) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: 0.16;
  transition: opacity 0.6s var(--e-soft);
}
body.is-scene .grain,
body.is-menu-open .grain { opacity: 0; }

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 190;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity 0.3s var(--e-soft);
}
.cursor.is-out { opacity: 0; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor .ct, .has-cursor .ct * { cursor: auto !important; }
.has-cursor .ct input { cursor: text !important; }
.has-cursor .ct button { cursor: pointer !important; }
.is-contact .cursor { opacity: 0; }
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0; left: 0;
  will-change: transform, width, height;
}
.cursor__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: opacity 0.3s var(--e-soft), transform 0.2s var(--e-soft);
}
.cursor__ring {
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 34px;
  transition: border-color 0.3s var(--e-soft), background-color 0.35s var(--e-soft);
}
.cursor.is-lock .cursor__ring {
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.07);
}
.cursor.is-lock .cursor__dot { opacity: 0; }@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.scene__layer {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: 50% 50%;
  opacity: 0;
  transform: scale(1.07);
  filter: blur(26px) brightness(0.5) grayscale(0.14);
  transition: opacity 1s var(--e-soft), transform 2.6s var(--e-out);
  will-change: opacity, transform;
}
.scene__layer.is-active { opacity: 1; transform: scale(1); }

.scene__veil,
.scene__wash {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.85s var(--e-soft);
}
.scene__veil { background: var(--dark); }
body.is-scene .scene__veil { opacity: 0.6; }

.scene__wash {
  background:
    radial-gradient(72% 62% at 24% 14%,
      color-mix(in srgb, var(--accent) 78%, transparent), transparent 70%),
    radial-gradient(64% 58% at 84% 92%,
      color-mix(in srgb, var(--accent) 52%, transparent), transparent 72%),
    linear-gradient(158deg,
      color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 62%);
}
body.is-scene .scene__wash { opacity: 1; }

body.is-scene {
  --ink: #e6e5e1;
  --line: rgba(230, 229, 225, 0.2);
  --ink-40: rgba(230, 229, 225, 0.5);
}

.stage {
  position: relative;
  z-index: 2;
  height: 100svh;
  padding: calc(var(--header-h) + clamp(0.75rem, 2.5vh, 1.75rem)) var(--pad) clamp(1.25rem, 4vh, 2.5rem);
  display: grid;
  place-items: center;
  transform-origin: 50% 42%;
  transition: transform 0.85s var(--e-inout), opacity 0.6s var(--e-soft);
}

.is-menu-open .stage { transform: scale(0.955); opacity: 0.55; }

.frame {
  width: min(100%, 60rem, (100svh - 12rem) * 1.62);
  display: grid;
  gap: clamp(0.55rem, 1.5vh, 0.9rem);
}

.frame__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.2rem;
  min-height: 1.5em;
  opacity: 0;
  transform: translate3d(0, 0.6rem, 0);
}
.is-ready .frame__head {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--e-soft) 0.1s, transform 0.9s var(--e-out) 0.1s;
}

.head__slot { position: relative; }
.head__slot--right { text-align: right; }
.head__slot > * {
  margin: 0;
  transition: opacity 0.32s var(--e-soft), transform 0.55s var(--e-out), color 0.6s var(--e-soft);
}
.head__now {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translate3d(0, 0.3em, 0);
  white-space: nowrap;
}
.head__slot--right .head__now { left: auto; }
body.is-scene .head__title,
body.is-scene .head__slot--right .head__meta:not(.head__now) {
  opacity: 0;
  transform: translate3d(0, -0.3em, 0);
}
body.is-scene .head__now { opacity: 1; transform: none; }

.head__title {
  font-size: clamp(1.15rem, 2.5vw, 2.1rem);
  color: var(--ink);
}
.head__now.display { font-size: clamp(1.15rem, 2.5vw, 2.1rem); color: var(--ink); }
body.is-scene .head__title,
body.is-scene .head__now.display { color: color-mix(in srgb, var(--accent) 32%, var(--ink)); }
.head__meta { color: var(--ink-40); }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 16 / 10;
  gap: clamp(0.4rem, 0.85vw, 0.7rem);
}

.cell {
  perspective: 900px;
  opacity: 0;
  transform: translate3d(0, 1rem, 0) scale(0.97);
}
.is-ready .cell {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--e-soft), transform 0.95s var(--e-back);
  transition-delay: calc(var(--i) * 60ms + 100ms);
}

.tile {
  position: relative;
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--tint) 9%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--tint) 22%, var(--line));
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--e-out), box-shadow 0.5s var(--e-soft),
    border-color 0.6s var(--e-soft), background-color 0.6s var(--e-soft);
}

body.is-scene .tile {
  background: color-mix(in srgb, var(--tint) 14%, rgba(13, 13, 12, 0.38));
  border-color: rgba(230, 229, 225, 0.14);
  backdrop-filter: blur(9px) saturate(0.85);
  -webkit-backdrop-filter: blur(9px) saturate(0.85);
}

body.is-scene .tile--cover {
  background: #010101;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.is-scene .tile--cover:not(:hover) .tile__media { opacity: 0.4; }
body.is-scene .tile:not(.tile--cover):hover,
body.is-scene .tile:not(.tile--cover):focus-visible {
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 70%, #e6e5e1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tile:hover,
.tile:focus-visible {
  transform: translate3d(0, -4px, 0) scale(1.018)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow:
    0 0 54px -4px color-mix(in srgb, var(--accent) 62%, transparent),
    0 26px 52px -24px rgba(13, 13, 12, 0.65);
}
.tile:active { transform: translate3d(0, -1px, 0) scale(0.995); }

.grid:hover .tile:not(:hover) { transform: scale(0.982); }

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(152deg,
    color-mix(in srgb, var(--tint) 20%, transparent) 0%,
    transparent 58%);
  transition: opacity 0.5s var(--e-soft);
}
.tile:hover::before,
.tile:focus-visible::before { opacity: 0; }

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(13rem 13rem at var(--lx, 50%) var(--ly, 50%),
    color-mix(in srgb, var(--tint) 55%, transparent) 0%,
    transparent 66%);
  opacity: 0;
  transition: opacity 0.5s var(--e-soft);
}
.grid:hover .tile::after { opacity: 0.55; }
.tile:hover::after,
.tile:focus-visible::after { opacity: 0; }
body.is-scene .grid:hover .tile::after { opacity: 0.32; }

.tile__clip {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}

.tile__fill {
  position: absolute;
  inset: 0;
  background: var(--deep);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s var(--e-soft);
  z-index: 0;
}
.tile:hover .tile__fill,
.tile:focus-visible .tile__fill { opacity: 1; }

.tile__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 2.5%, 0) scale(1.14);
  transition: opacity 0.55s var(--e-soft), transform 1.05s var(--e-out);
  will-change: opacity, transform;
}
.tile:hover .tile__media,
.tile:focus-visible .tile__media {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.02);
}

.tile__media img,
.tile__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.65s var(--e-out);
  will-change: transform;
}

.tile__frame {
  position: absolute;
  inset: 7px;
  z-index: 3;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.5s var(--e-soft) 0.16s, transform 0.75s var(--e-back) 0.16s;
  pointer-events: none;
}
.tile:hover .tile__frame,
.tile:focus-visible .tile__frame { opacity: 1; transform: none; }

.tile__vid {
  position: absolute;
  inset: 0;
  filter: grayscale(1) contrast(1.05);
  opacity: 0;
  transition: opacity 0.6s var(--e-soft);
}
.tile:hover .tile__vid,
.tile:focus-visible .tile__vid { opacity: 1; }

.tile--cover {
  background: #010101;
  border-color: color-mix(in srgb, var(--tint) 34%, #010101);
}
.tile--cover::before { opacity: 0; }
.tile--cover .tile__fill { background: #010101; opacity: 1; }

.tile--cover .tile__media {
  opacity: 1;
  transform: scale(1.005);
}
.tile--cover:hover .tile__media,
.tile--cover:focus-visible .tile__media { transform: scale(1.055); }
.tile--cover .tile__media img,
.tile--cover .tile__media video { transform: scale(1.02) translate3d(var(--px, 0px), var(--py, 0px), 0); }
.tile--cover:hover .tile__media img,
.tile--cover:hover .tile__media video,
.tile--cover:focus-visible .tile__media img { transform: scale(1.03) translate3d(var(--px, 0px), var(--py, 0px), 0); }

.tile--cover .tile__frame { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.tile--grad .tile__fill {
  opacity: 1;
  background:
    radial-gradient(116% 88% at 12% 6%,
      color-mix(in srgb, var(--tint) 92%, var(--bg)) 0%, transparent 64%),
    radial-gradient(90% 80% at 96% 104%,
      color-mix(in srgb, var(--tint) 72%, var(--bg)) 0%, transparent 68%),
    linear-gradient(148deg,
      color-mix(in srgb, var(--tint) 30%, var(--bg)) 0%,
      color-mix(in srgb, var(--tint) 4%, var(--bg)) 54%,
      color-mix(in srgb, var(--tint) 22%, var(--bg)) 100%);
  transition: background 0.6s var(--e-soft), opacity 0.45s var(--e-soft);
}
.tile--grad:hover .tile__fill,
.tile--grad:focus-visible .tile__fill {
  background:
    radial-gradient(120% 92% at 16% 6%,
      color-mix(in srgb, var(--tint) 82%, var(--deep)) 0%, transparent 64%),
    linear-gradient(148deg,
      color-mix(in srgb, var(--tint) 54%, var(--deep)) 0%,
      var(--deep) 62%);
}
.tile--grad::before { opacity: 0; }

/* Ausweiskachel: Karte im Kachelformat, klickbar, drehbar. */
.tile--id {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  padding: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: #101113;
  border: 1px solid rgba(230, 229, 225, 0.14);
}
.tile--id::before { opacity: 0; }
.tile--id .tile__fill {
  opacity: 1;
  background: linear-gradient(158deg, #212327 0%, #131417 46%, #0b0c0e 100%);
}
.tile--id .tile__frame { border-color: rgba(230, 229, 225, 0.1); }

.cell--glow { position: relative; }
.cell__aura {
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: calc(var(--r) + 12px);
  overflow: hidden;
  pointer-events: none;
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.5s var(--e-soft);
}
.cell__aura i {
  position: absolute;
  inset: -45%;
  display: block;
  background: conic-gradient(from 0deg,
    #7c5cfc, #35d0ff, #8a9a8e, #ffd166, #ff5f8a, #7c5cfc);
  animation: aura-spin 6.5s linear infinite;
}
.cell--glow:hover .cell__aura,
.tile--id:focus-visible + .cell__aura { opacity: 0.62; }

@keyframes aura-spin { to { transform: rotate(360deg); } }

.id {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: #e6e5e1;
  font-family: var(--font);
  pointer-events: none;
  perspective: 1300px;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--e-soft);
}
/* Die Huelle dreht sich nicht, sie oeffnet nur den Raum dafuer. */
.id__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.id__face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(0.35rem, 1vw, 0.6rem);
  padding: clamp(0.6rem, 1.5vw, 0.95rem);
  border-radius: inherit;
  overflow: hidden;
  /* Beide Seiten drehen in dieselbe Richtung, um eine halbe Umdrehung
     versetzt. Der Wechsel faellt genau in die Mitte - dort stehen beide
     hochkant und sind ohnehin nur eine Kante. */
  transform: rotateY(0deg);
  /* Symmetrische Kurve: nach der halben Zeit exakt neunzig Grad. Nur dann
     faellt der Seitenwechsel in den Moment, in dem die Karte hochkant steht
     und niemand ihn sieht. */
  transition: transform 0.78s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0s linear 0.39s;
}
.id__face--back {
  transform: rotateY(-180deg);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(200deg, #1b1d21 0%, #101115 52%, #0a0b0d 100%);
}
.id.is-flip .id__face--front { transform: rotateY(180deg); opacity: 0; pointer-events: none; }
.id.is-flip .id__face--back { transform: rotateY(0deg); opacity: 1; pointer-events: auto; }
/* Waehrend der Drehung ruht der Inhalt - sonst rechnet der Browser Maske,
   Verlauf und Textfuellung in jedem Bild neu, und genau das stockt. */
.id.is-turning .id__face { will-change: transform; }
.id.is-turning .id__holo { animation-play-state: paused; }

.id__top { display: flex; align-items: center; gap: 0.55rem; }
.id__mark { width: clamp(0.9rem, 1.5vw, 1.2rem); height: auto; opacity: 0.9; }
.id__kind {
  flex: 1 1 auto;
  font-size: clamp(0.4375rem, 0.62vw, 0.5625rem);
  letter-spacing: 0.22em;
  color: rgba(230, 229, 225, 0.5);
}
.id__no {
  font-size: clamp(0.4375rem, 0.62vw, 0.5625rem);
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--tint) 70%, #e6e5e1);
  font-variant-numeric: tabular-nums;
}

.id__main { display: grid; align-content: center; min-height: 0; overflow: hidden; }
/* In der Kachel ist wenig Platz - dort faellt die Kopfzeile der Rolle weg */
.tile--id .id__eyebrow { display: none; }
.tile--id .id__rows { gap: 0.06rem 0.6rem; }
.tile--id .id__rows b:nth-of-type(3),
.tile--id .id__rows i:nth-of-type(3) { display: none; }
.tile--id .id__data { gap: 0.5rem; }
/* Die Karte richtet sich nach sich selbst, nicht nach dem Fenster - Schrift
   ebenso wie Rand, Abstaende, Zeichen und Strichcode. Vorher standen die
   Randmasse fest: auf der kleinen Karte am Schreibtisch blieben dadurch von
   185 Punkten Hoehe nur 80 fuer die Mitte, und die letzte Zeile fiel heraus.
   Die erste Angabe ist jeweils der Rueckfall fuer Browser ohne
   Behaeltermass. */
.tile--id .id { container-type: size; }
.tile--id .id__face {
  padding: clamp(0.6rem, 1.5vw, 0.95rem);
  padding: 5.4cqh;
  gap: clamp(0.35rem, 1vw, 0.6rem);
  gap: 3.4cqh;
}
.tile--id .id__mark { width: 9cqh; }
.tile--id .id__bar { height: 5cqh; }
.tile--id .id__data { gap: 0.5rem; gap: 2.4cqh; }
.tile--id .id__role {
  font-size: clamp(0.95rem, 3.2vw, 1.7rem);
  font-size: 11.6cqh;
  line-height: 0.9;
}
.tile--id .id__rows {
  font-size: clamp(0.5rem, 1.2vw, 0.8rem);
  font-size: 4.9cqh;
  gap: 0.3cqh 3.2cqh;
  letter-spacing: 0.11em;
  line-height: 1.45;
}
.tile--id .id__no {
  font-size: clamp(0.4375rem, 0.9vw, 0.6875rem);
  font-size: 4.6cqh;
}

.id__data { display: grid; align-content: space-between; gap: 0.3rem; min-width: 0; }
.id__eyebrow {
  font-size: clamp(0.4375rem, 0.62vw, 0.5625rem);
  letter-spacing: 0.24em;
  color: rgba(230, 229, 225, 0.42);
}
.id__role {
  font-size: clamp(0.82rem, 1.66vw, 1.28rem);
  font-weight: 800;
  font-stretch: 116%;
  letter-spacing: -0.032em;
  line-height: 0.9;
  color: #f2f1ee;
}
.id__rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.55rem;
  font-size: clamp(0.375rem, 0.56vw, 0.5rem);
  letter-spacing: 0.13em;
  line-height: 1.5;
}
.id__rows b { font-weight: 600; color: rgba(230, 229, 225, 0.36); }
.id__rows i {
  font-style: normal;
  color: rgba(230, 229, 225, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id__text { display: grid; align-content: center; gap: 0.5rem; min-height: 0; }
.id__p {
  display: block;
  margin: 0;
  font-size: clamp(0.42rem, 0.72vw, 0.72rem);
  line-height: 1.5;
  color: rgba(230, 229, 225, 0.86);
}
.id__tags { color: color-mix(in srgb, var(--tint) 70%, #e6e5e1) !important; letter-spacing: 0.14em; }
.id__link {
  justify-self: start;
  font-size: clamp(0.45rem, 0.78vw, 0.78rem);
  font-weight: 700;
  color: #f2f1ee;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tint) 80%, transparent);
  padding-bottom: 1px;
}

.id__bar {
  height: clamp(0.5rem, 1.2vw, 0.75rem);
  background:
    repeating-linear-gradient(90deg,
      rgba(230, 229, 225, 0.7) 0 1px, transparent 1px 3px,
      rgba(230, 229, 225, 0.7) 3px 5px, transparent 5px 6px,
      rgba(230, 229, 225, 0.7) 6px 7px, transparent 7px 11px,
      rgba(230, 229, 225, 0.7) 11px 14px, transparent 14px 15px);
  opacity: 0.42;
  transition: opacity 0.5s var(--e-soft);
}
.tile--id:hover .id__bar, .id--big .id__bar { opacity: 0.72; }

.id__foot { display: flex; align-items: center; gap: 0.6rem; }
.id__foot .id__bar { flex: 1 1 auto; }

.id__flip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  color: #f2f1ee;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -10px rgba(0, 0, 0, 0.9);
  transition: opacity 0.4s var(--e-soft), transform 0.55s var(--e-back),
    background-color 0.3s var(--e-soft), border-color 0.3s var(--e-soft);
}
.id__flip svg { width: 55%; height: auto; display: block; }
.id--big .id__flip { opacity: 1; visibility: visible; pointer-events: auto; }
.id--big:not(.is-flip) .id__face--back .id__flip,
.id--big.is-flip .id__face--front .id__flip { visibility: hidden; pointer-events: none; }
.id__flip:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  transform: rotate(180deg) scale(1.06);
}
.id__flip:active { transform: rotate(180deg) scale(0.94); }

/* Hologramm: erscheint dort, wo das Licht gerade auf die Karte faellt */
/* Die Maske liest ihre Lage auf dem eigenen Element. Ohne diese Angabe
   bewertet der Browser bei jeder Bewegung auch alle Zeilen darunter neu. */
@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --gy { syntax: "<percentage>"; inherits: false; initial-value: 40%; }

.id__holo {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: radial-gradient(38% 50% at var(--gx, 50%) var(--gy, 40%),
    #000 0%, rgba(0, 0, 0, 0.5) 36%, transparent 70%);
  mask-image: radial-gradient(38% 50% at var(--gx, 50%) var(--gy, 40%),
    #000 0%, rgba(0, 0, 0, 0.5) 36%, transparent 70%);
  transition: opacity 0.5s var(--e-soft);
}
.tile--id:hover .id__holo { opacity: 0.4; }
.id--big .id__holo { opacity: 0.44; }
.id--big .id__face--back .id__holo { opacity: 0.3; }

.id__holo__i {
  position: absolute;
  inset: -6% -30%;
  display: grid;
  align-content: center;
  gap: 0.85em;
  font-size: clamp(0.3rem, 0.62vw, 0.5rem);
}
.id--big .id__holo__i { font-size: clamp(0.44rem, 0.92vw, 0.75rem); }
.id__holo b {
  display: flex;
  align-items: center;
  gap: 0.7em;
  white-space: nowrap;
  font-weight: 850;
  font-stretch: 112%;
  letter-spacing: 0.11em;
  line-height: 1;
  transform: translateX(calc(var(--o, 0) * 1%));
  background: linear-gradient(102deg,
    rgba(255, 255, 255, 0.34) 0%,
    #ffffff 16%,
    rgba(255, 255, 255, 0.45) 34%,
    #ffffff 52%,
    rgba(255, 255, 255, 0.38) 70%,
    #ffffff 88%,
    rgba(255, 255, 255, 0.34) 100%);
  background-size: 230% 100%;
  background-position: calc(var(--hx, 0.5) * -130% + 66%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.id__holo__g {
  flex: 0 0 auto;
  width: 1.5em;
  height: auto;
  opacity: 0.72;
}
.id__holo__mark {
  position: absolute;
  right: 6%;
  top: 50%;
  width: 22%;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.5;
}
.id--big .id__holo__mark { width: 17%; right: 7%; }

/* Ohne Maus wandert das Licht von selbst über die Karte. Die Bewegung sitzt
   auf dem Hologramm, nicht auf der Karte: eigene Eigenschaften vererben sich,
   und von der Karte aus muesste der Browser den ganzen Inhalt in jedem Bild
   nachrechnen. */
@media (hover: none) {
  .id--big .id__holo { animation: holo-drift 7s ease-in-out infinite; }
}
@keyframes holo-drift {
  0%, 100% { --gx: 20%; --gy: 28%; }
  50% { --gx: 80%; --gy: 68%; }
}

.id__gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(38% 60% at var(--mx, 50%) var(--my, 40%),
      rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(112deg,
      transparent 34%,
      color-mix(in srgb, var(--tint) 26%, transparent) 46%,
      rgba(124, 92, 252, 0.16) 52%,
      transparent 64%);
  opacity: 0;
  transition: opacity 0.45s var(--e-soft);
}
.tile--id:hover .id__gloss { opacity: 0.55; }
.id--big .id__gloss { opacity: 1; }

.id__bolt {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 44%, rgba(255, 255, 255, 0.62) 50%, transparent 56%);
  transform: translate3d(-130%, 0, 0);
  opacity: 0;
}
.tile--id:hover .id__bolt { animation: bolt 1s var(--e-out) 0.05s; }
@keyframes bolt {
  0% { transform: translate3d(-130%, 0, 0); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate3d(130%, 0, 0); opacity: 0; }
}

/* Der Index tritt zurueck, wie bei den anderen Kacheln auch */
.frame, .header { will-change: transform, opacity; }


/* Die achte Kachel ist ein Knopf - sie oeffnet die Open World. */
.tile--world {
  appearance: none;
  width: 100%;
  padding: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.header, .frame { transition: opacity 0.6s var(--e-soft), transform 0.9s var(--e-cam); }

/* Kartenansicht: die Karte fliegt nach vorn und lässt sich drehen */
.cardview {
  position: fixed;
  inset: 0;
  z-index: 178;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  visibility: hidden;
  pointer-events: none;
}
.is-card .cardview { visibility: visible; pointer-events: auto; }

.cardview__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 44%, rgba(24, 26, 32, 0.72) 0%, rgba(6, 7, 9, 0.94) 70%),
    rgba(6, 7, 9, 0.96);
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.55s var(--e-soft);
}
.is-card .cardview__bg { opacity: 1; }

.cardview__x {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.9rem, 2.4vw, 1.8rem);
  z-index: 4;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(230, 229, 225, 0.3);
  background: none;
  color: #e6e5e1;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s var(--e-soft) 0.3s, transform 0.4s var(--e-back), background-color 0.3s var(--e-soft);
}
.is-card .cardview__x { opacity: 1; }
.cardview__x:hover { background: #e6e5e1; color: #0d0d0c; transform: rotate(90deg); }

.cardview__fly {
  position: relative;
  z-index: 2;
  perspective: 1400px;
  will-change: transform;
}
.id--big {
  position: relative;
  display: block;
  inset: auto;
  width: min(88vw, 44rem);
  aspect-ratio: var(--ar, 1.64);
  border-radius: var(--r);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95);
  transition: transform 0.16s linear;
}
.id--big .id__face {
  background: linear-gradient(158deg, #212327 0%, #131417 46%, #0b0c0e 100%);
  border: 1px solid rgba(230, 229, 225, 0.14);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.6vw, 2rem);
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
}
.id--big .id__face--back { background: linear-gradient(200deg, #1b1d21 0%, #101115 52%, #0a0b0d 100%); }
.id--big .id__kind, .id--big .id__no, .id--big .id__eyebrow { font-size: clamp(0.5rem, 0.85vw, 0.6875rem); }
.id--big .id__mark { width: clamp(1.4rem, 2.4vw, 2rem); }
.id--big .id__role { font-size: clamp(1.6rem, 4vw, 3rem); }
.id--big .id__rows { font-size: clamp(0.5rem, 0.85vw, 0.6875rem); gap: 0.22rem 1rem; }
.id--big .id__text { gap: 0.9rem; }
.id--big .id__p { font-size: clamp(0.75rem, 1.28vw, 1.02rem); max-width: 62ch; }
.id--big .id__link { font-size: clamp(0.8rem, 1.2vw, 1rem); }
.id--big .id__bar { height: clamp(0.9rem, 2vw, 1.4rem); }
.id--big .id__foot { gap: 1rem; }
.id--big .id__flip { width: clamp(2.4rem, 4vw, 3.1rem); height: clamp(2.4rem, 4vw, 3.1rem); }@media (max-width: 620px) {
  .id--big {
    width: 92vw;
    aspect-ratio: auto;
    height: min(74svh, 32rem);
  }
  .id--big .id__face { padding: 1.1rem; gap: 0.85rem; }
  .id--big { height: min(56svh, 24rem); }
  .id--big .id__role { font-size: 2rem; }
  .id--big .id__text { align-content: start; gap: 0.75rem; }
  .id--big .id__p { font-size: 0.82rem; line-height: 1.55; }
}@media (prefers-reduced-motion: reduce) {
  .cell__aura i { animation: none; }
  .id, .id__inner, .cardview__fly { transition-duration: 0.01ms !important; }
}

/* Glaskachel: reagiert auf Klicks, das Glas springt und zerbricht. */
.tile--pane {
  --crack: 0;
  appearance: none;
  width: 100%;
  padding: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid color-mix(in srgb, var(--tint) 34%, var(--bg));
}
.tile--pane::before { opacity: 0; }
/* Hinter der Auslage der Laden selbst - warm, dunkel, nach hinten hin
   tiefer. Die Scheibe darueber bleibt, was sie war. */
.tile--pane .tile__fill {
  opacity: 1;
  background: linear-gradient(178deg, #241619 0%, #1a1013 62%, #0d0809 100%);
  transition: background 0.6s var(--e-soft), opacity 0.5s var(--e-soft);
}

/* Die Auslage: Strahler, Samtpodest, Ring, zwei Uhren, Brillant,
   Perlenkette. Sie liegt hinter der Scheibe und vor dem Ladenraum. */
.tile__shop {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  transition: filter 0.6s var(--e-soft), transform 0.9s var(--e-out);
}
.tile__shop svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Naeher ans Fenster treten: das Licht im Laden zieht an. */
.tile--pane:hover .tile__shop,
.tile--pane:focus-visible .tile__shop {
  filter: brightness(1.14) saturate(1.06);
  transform: scale(1.015);
}
.sw-glint {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: swGlint 5.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes swGlint {
  0%, 66%, 100% { opacity: 0; transform: scale(0.45) rotate(0deg); }
  76% { opacity: 1; transform: scale(1) rotate(22deg); }
  84% { opacity: 0.32; transform: scale(0.78) rotate(34deg); }
}

.tile__pane {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(102deg,
      rgba(255, 255, 255, 0.16) 0 2px,
      rgba(255, 255, 255, 0) 2px 7px),
    linear-gradient(112deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.06) 34%,
      rgba(255, 255, 255, 0) 58%,
      rgba(255, 255, 255, 0.24) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -18px 34px -22px rgba(13, 13, 12, 0.45);
  mix-blend-mode: screen;
  /* Etwas zurueckgenommen - hinter der Scheibe steht jetzt etwas, das man
     sehen koennen soll. */
  opacity: 0.44;
  transition: opacity 0.5s var(--e-soft);
}

.tile__crack {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Blaulicht hinter der Scheibe */
.tile__siren {
  position: absolute;
  inset: 0;
  /* Das Blaulicht kommt von der Strasse - es faellt durch das kaputte
     Fenster auf die Auslage, liegt also darueber und nicht dahinter. Und
     es verdeckt den Laden nicht mehr, sondern legt Nacht darueber. */
  z-index: 4;
  pointer-events: none;
  background: rgba(5, 6, 12, 0.52);
  opacity: 0;
  transition: opacity 0.5s var(--e-soft);
}
.tile__siren i {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
}
.tile__siren i:nth-child(1) {
  background: radial-gradient(50% 60% at 26% 46%, #2f6bff 0%, rgba(47, 107, 255, 0.28) 42%, transparent 72%);
}
.tile__siren i:nth-child(2) {
  background: radial-gradient(50% 60% at 74% 54%, #ff2a3c 0%, rgba(255, 42, 60, 0.28) 42%, transparent 72%);
}
.tile__siren i:nth-child(3) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 60%);
  border-radius: 0;
  inset: 0;
}
.is-broken .tile__siren { opacity: 1; }
.is-broken .tile__siren i:nth-child(1) { animation: siren-b 1.05s steps(1, end) infinite; }
.is-broken .tile__siren i:nth-child(2) { animation: siren-r 1.05s steps(1, end) infinite; }
.is-broken .tile__siren i:nth-child(3) { animation: siren-w 1.05s steps(1, end) infinite; }
/* Die Scheibe ist weg - die Auslage steht noch. Vorher wurde beides
   ausgeblendet, da war hinter der Scheibe aber auch nichts. */
.is-broken .tile__pane { opacity: 0; }
.is-broken .tile__shop { filter: brightness(0.86) saturate(0.9); }

@keyframes siren-b {
  0%, 14% { opacity: 1; }
  15%, 22% { opacity: 0.25; }
  23%, 44% { opacity: 1; }
  45%, 100% { opacity: 0.06; }
}
@keyframes siren-r {
  0%, 49% { opacity: 0.06; }
  50%, 64% { opacity: 1; }
  65%, 72% { opacity: 0.25; }
  73%, 94% { opacity: 1; }
  95%, 100% { opacity: 0.06; }
}
@keyframes siren-w {
  0%, 4% { opacity: 0.42; }
  5%, 49% { opacity: 0; }
  50%, 54% { opacity: 0.42; }
  55%, 100% { opacity: 0; }
}

.tile__yell {
  position: absolute;
  left: 50%; top: 46%;
  z-index: 6;
  padding: 0.5rem 1rem 0.46rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(14, 15, 18, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  color: #fff;
  font-family: var(--font);
  font-stretch: 112%;
  font-weight: 750;
  font-size: clamp(0.82rem, 1.8vw, 1.2rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -8px 18px -12px rgba(255, 255, 255, 0.28),
    0 14px 34px -16px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.72);
}
.tile__yell.is-on { animation: yell 1.7s var(--e-back) forwards; }
.tile__yell.is-last {
  border-color: rgba(255, 120, 110, 0.5);
  background: rgba(52, 10, 12, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 14px 40px -14px rgba(255, 60, 60, 0.55);
}
@keyframes yell {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.66); }
  12% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.07); }
  22% { transform: translate3d(-50%, -50%, 0) scale(1); }
  78% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -54%, 0) scale(0.97); }
}

.tile--pane.is-hit { animation: pane-hit 0.42s var(--e-out); }
@keyframes pane-hit {
  0%, 100% { transform: translate3d(0, 0, 0); }
  18% { transform: translate3d(-3px, 2px, 0); }
  38% { transform: translate3d(3px, -2px, 0); }
  62% { transform: translate3d(-2px, -1px, 0); }
  82% { transform: translate3d(1px, 1px, 0); }
}@media (prefers-reduced-motion: reduce) {
  .tile__yell.is-on { animation: none; opacity: 1; transform: translate3d(-50%, -50%, 0); }
  .tile--pane.is-hit { animation: none; }
  .is-broken .tile__siren i { animation: none !important; opacity: 0.7; }
}

.tile--mark {
  background: var(--deep);
  border-color: color-mix(in srgb, var(--tint) 34%, var(--deep));
}
.tile--mark::before { opacity: 0; }
.tile--mark .tile__fill { opacity: 1; background: var(--deep); }
.tile--mark .tile__media { opacity: 0.55; transform: scale(1.02); }
.tile--mark:hover .tile__media,
.tile--mark:focus-visible .tile__media { opacity: 0.9; transform: scale(1.06); }
.tile__loop {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}

.tile__mark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0 16%;
  pointer-events: none;
  transition: transform 0.7s var(--e-out);
}
.tile__mark img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
}
.tile--mark:hover .tile__mark,
.tile--mark:focus-visible .tile__mark { transform: scale(1.05); }

/* nunateq fuehrt zwei Farben: Anthrazit #1C1C1C und den violetten Punkt
   hinter dem Q. Hier stand vorher ein Dauer-hue-rotate ueber den ganzen
   Farbkreis - die Kachel lief damit durch Gruen, Orange und Rot. Weg damit;
   was bleibt, ist ein sehr langsames Wandern desselben Violetts. */
.tile--logo {
  background: #1c1c1c;
  border-color: color-mix(in srgb, var(--tint) 24%, #1c1c1c);
}
.tile--logo:hover,
.tile--logo:focus-visible {
  border-color: color-mix(in srgb, var(--tint) 58%, #1c1c1c);
}
.tile--logo .tile__fill {
  opacity: 1;
  background:
    radial-gradient(54% 64% at 84% 94%,
      color-mix(in srgb, var(--tint) 24%, transparent) 0%, transparent 72%),
    radial-gradient(84% 74% at 8% -8%, rgba(255, 255, 255, 0.055) 0%, transparent 62%),
    #1c1c1c;
  background-size: 150% 150%, 134% 134%, 100% 100%;
  animation: logoDrift 26s ease-in-out infinite alternate;
}
@keyframes logoDrift {
  0% { background-position: 24% 100%, 0% 0%, 0 0; }
  100% { background-position: 0% 66%, 34% 26%, 0 0; }
}

/* Der Hintergrund beim Hovern: der Punkt der Wortmarke laedt die Kachel
   auf. Das Violett waechst aus der Ecke, in der er steht. */
.tile--logo::before {
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(60% 68% at 84% 94%,
      color-mix(in srgb, var(--tint) 76%, transparent) 0%,
      color-mix(in srgb, var(--tint) 26%, transparent) 44%,
      transparent 78%),
    linear-gradient(330deg,
      color-mix(in srgb, var(--tint) 22%, transparent) 0%, transparent 54%);
  transition: opacity 0.62s var(--e-soft);
}
.tile--logo:hover::before,
.tile--logo:focus-visible::before { opacity: 1; }
.tile--logo .tile__frame {
  border-color: color-mix(in srgb, var(--tint) 20%, transparent);
  transition: opacity 0.5s var(--e-soft) 0.16s, transform 0.75s var(--e-back) 0.16s,
    border-color 0.6s var(--e-soft);
}
.tile--logo:hover .tile__frame,
.tile--logo:focus-visible .tile__frame {
  border-color: color-mix(in srgb, var(--tint) 46%, transparent);
}

.tile__aurora {
  position: absolute;
  inset: -30%;
  z-index: 2;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--tint) 46%, transparent) 70deg,
    transparent 150deg,
    color-mix(in srgb, var(--tint) 26%, transparent) 250deg,
    transparent 330deg);
  filter: blur(34px);
  opacity: 0.26;
  animation: auroraSpin 34s linear infinite;
  transition: opacity 0.62s var(--e-soft);
}
@keyframes auroraSpin { to { transform: rotate(360deg); } }
/* In Ruhe nur zu ahnen, beim Hovern deutlich - aber im selben Violett. */
.tile--logo:hover .tile__aurora,
.tile--logo:focus-visible .tile__aurora { opacity: 0.62; animation-duration: 16s; }

.tile__logo {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0 13%;
  pointer-events: none;
  transition: transform 0.7s var(--e-out);
}
.tile__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.7));
}
.tile--logo:hover .tile__logo,
.tile--logo:focus-visible .tile__logo { transform: scale(1.06); }

.tile__sheen {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 40%,
    rgba(255, 255, 255, 0.26) 50%, transparent 60%);
  transform: translateX(-130%);
  opacity: 0;
}
.tile:hover .tile__sheen,
.tile:focus-visible .tile__sheen { animation: sheen 1.05s var(--e-out) 0.06s; }
@keyframes sheen {
  0% { transform: translateX(-130%); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

.tile--shot {
  background: var(--deep);
  border-color: color-mix(in srgb, var(--tint) 34%, var(--deep));
  transition: transform 0.5s var(--e-out), box-shadow 0.5s var(--e-soft),
    border-color 0.6s var(--e-soft), background-color 0.6s var(--e-soft),
    --tint 0.75s var(--e-soft);
}
.tile--shot:hover,
.tile--shot:focus-visible { --tint: #ff8a3d; }
.tile--shot::before { opacity: 0; }
.tile--shot .tile__fill {
  opacity: 1;
  background:
    linear-gradient(158deg, #1b2320 0%, var(--deep) 70%);
}
.tile--shot .tile__media {
  opacity: 1;
  transform: scale(1.02);
  z-index: 2;
}
.tile--shot:hover .tile__media,
.tile--shot:focus-visible .tile__media { transform: scale(1.075); }
.tile--shot .tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--deep) 62%, transparent) 0%,
    transparent 46%);
  transition: opacity 0.5s var(--e-soft);
}
.tile--shot:hover .tile__media::after { opacity: 0.5; }

.tile__stamp {
  position: absolute;
  left: 7%;
  top: 12%;
  z-index: 4;
  display: grid;
  pointer-events: none;
  font-weight: 900;
  font-size: clamp(0.95rem, 2.05vw, 1.85rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: #f4fbff;
  text-shadow:
    0 0 14px color-mix(in srgb, var(--tint) 70%, transparent),
    0 3px 18px rgba(0, 0, 0, 0.75);
  transition: text-shadow 0.6s var(--e-soft);
}
.tile__stamp i {
  font-style: normal;
  transition: transform 0.55s var(--e-out);
  transition-delay: calc(var(--n, 0) * 40ms);
}
.tile__stamp i:nth-child(2) {
  margin-left: 0.14em;
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in srgb, var(--tint) 55%, #f4fbff);
}
.tile__stamp i:nth-child(3) { margin-left: 0.28em; }
.tile--shot:hover .tile__stamp i:nth-child(1) { transform: translateX(-0.06em); }
.tile--shot:hover .tile__stamp i:nth-child(2) { transform: translateX(0.1em); }
.tile--shot:hover .tile__stamp i:nth-child(3) { transform: translateX(0.22em); }

.tile--film {
  appearance: none;
  width: 100%;
  padding: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--deep);
  border: 1px solid color-mix(in srgb, var(--tint) 34%, var(--deep));
}
.tile--film::before { opacity: 0; }
.tile--film .tile__fill { opacity: 1; background: var(--deep); }
.tile--film .tile__media { opacity: 0.78; transform: scale(1.02); }
.tile--film:hover .tile__media,
.tile--film:focus-visible .tile__media { opacity: 1; transform: scale(1.06); }

.tile--film .tile__mark {
  padding: 0 14%;
  transform: scale(0.94);
  transition: transform 0.7s var(--e-back), filter 0.5s var(--e-soft);
}
.tile--film .tile__mark img { filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.72)); }
.tile--film:hover .tile__mark,
.tile--film:focus-visible .tile__mark { transform: scale(1.02) translate3d(0, -2%, 0); }

/* Notizzettel unten rechts, fuehrt ins Kontaktformular. */
.note {
  position: fixed;
  font-family: var(--font);
  right: clamp(0.9rem, 2.4vw, 2rem);
  bottom: clamp(0.9rem, 2.4vw, 2rem);
  z-index: 120;
  width: clamp(9.6rem, 15vw, 13rem);
  padding: 1.15rem 0.95rem 0.9rem;
  text-align: left;
  cursor: pointer;
  color: #23231f;
  background:
    linear-gradient(178deg, #fdf6c8 0%, #f6e79a 62%, #efdc85 100%);
  border: 0;
  border-radius: 2px 10px 3px 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 16px 30px -16px rgba(13, 13, 12, 0.7),
    0 3px 8px -4px rgba(13, 13, 12, 0.4);
  transform: rotate(-3.2deg);
  transform-origin: 84% 8%;
  transition:
    transform 0.55s var(--e-back),
    box-shadow 0.45s var(--e-soft),
    filter 0.45s var(--e-soft);
}
.note::before {
  content: "";
  position: absolute;
  top: -0.62rem;
  left: 50%;
  width: 3.6rem;
  height: 1.35rem;
  background: rgba(226, 232, 226, 0.72);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(13, 13, 12, 0.08);
  box-shadow: 0 2px 5px -3px rgba(13, 13, 12, 0.6);
  transform: translate3d(-50%, 0, 0) rotate(2.4deg);
  transition: width 0.5s var(--e-back), transform 0.5s var(--e-back);
}
.note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.15rem;
  height: 1.15rem;
  background: linear-gradient(315deg, #e6e5e1 46%, rgba(13, 13, 12, 0.22) 47%, transparent 62%);
  transition: width 0.45s var(--e-back), height 0.45s var(--e-back);
}
.note__line {
  display: block;
  font-size: clamp(0.88rem, 1.32vw, 1.08rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.note__line + .note__line { margin-top: 0.1rem; }
.note__line:nth-child(2) { padding-left: 0.35rem; opacity: 0.78; }
.note__sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.note__sub i {
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--e-back);
}
.note__scribble {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 2.35rem;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(35, 35, 31, 0.32) 0 6px, transparent 6px 11px);
  opacity: 0.5;
}

.note:hover,
.note:focus-visible {
  transform: rotate(0.6deg) translate3d(0, -0.5rem, 0) scale(1.05);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 30px 44px -20px rgba(13, 13, 12, 0.8),
    0 6px 12px -6px rgba(13, 13, 12, 0.45);
  filter: saturate(1.15);
}
.note:hover::before,
.note:focus-visible::before { width: 5.2rem; transform: translate3d(-50%, -0.12rem, 0) rotate(-1.6deg); }
.note:hover::after,
.note:focus-visible::after { width: 1.9rem; height: 1.9rem; }
.note:hover .note__sub i,
.note:focus-visible .note__sub i { width: 1.9rem; }
.note:active { transform: rotate(-1deg) translate3d(0, -0.1rem, 0) scale(0.99); }

.is-menu-open .note,
.is-contact .note,
.is-card .note,
.is-scene .note { opacity: 0.55; }
.note { transition-property: transform, box-shadow, filter, opacity; }@media (max-width: 700px) {
  .note {
    width: 8.4rem;
    padding: 0.9rem 0.75rem 0.7rem;
  }
  .note__scribble { display: none; }
  .note__sub { margin-top: 0.45rem; letter-spacing: 0.1em; }
}@media (prefers-reduced-motion: reduce) {
  .note, .note::before, .note::after, .note__sub i { transition-duration: 0.01ms !important; }
}

.tile__info {
  position: relative;
  z-index: 4;
  height: 100%;
  padding: clamp(0.7rem, 1.3vw, 1.1rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--bg);
  opacity: 0;
  pointer-events: none;
}
.tile__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.tile__title { align-self: end; display: block; font-size: clamp(0.95rem, 1.7vw, 1.4rem); }
.tile__tags { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; }
.tile--empty { pointer-events: none; }
.rule { align-self: center; width: 2rem; height: 1px; border-radius: 1px; background: currentColor; opacity: 0.4; }

/* Textnavigation unter dem Raster: erreichbar fuer Tastatur und Suchmaschinen */
.page__cta {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--deep);
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 80%, transparent);
  transition: border-color 0.3s var(--e-soft), letter-spacing 0.4s var(--e-out);
}
.page__cta:hover { border-color: var(--deep); letter-spacing: 0.01em; }

/* Jahreszeiten: Farbklima, Wetterschicht, Statusmeldung.
   Zum Ausprobieren ?season=winter oder ?date=2026-12-24 an die Adresse haengen. */
:root[data-season="winter"] {
  --bg: #e7eaee;
  --line: rgba(13, 20, 30, 0.16);
  --ink-40: rgba(13, 20, 30, 0.44);
  --season: #7f9dc4;
}
:root[data-season="spring"] {
  --bg: #e9eae2;
  --season: #8fb27a;
}
:root[data-season="summer"] {
  --bg: #eee9dd;
  --season: #d8a24e;
}
:root[data-season="autumn"] {
  --bg: #eae3d8;
  --line: rgba(40, 24, 12, 0.16);
  --ink-40: rgba(40, 24, 12, 0.44);
  --season: #b5713a;
}
:root[data-mood="fest"] { --season: #b7443f; }

.weather {
  position: fixed;
  inset: 0;
  z-index: 115;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--e-soft);
}
.weather.is-on { opacity: 0.7; }
:root[data-season="summer"] .weather.is-on { opacity: 0.5; }
.is-menu-open .weather,
.is-contact .weather,
.is-card .weather { opacity: 0; }

.status {
  position: fixed;
  left: clamp(0.9rem, 2.4vw, 1.8rem);
  bottom: clamp(0.9rem, 2.4vw, 1.8rem);
  z-index: 119;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: min(22rem, 46vw);
  margin: 0;
  padding: 0.46rem 0.8rem 0.42rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  color: var(--ink-40);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0.6rem, 0);
  transition: opacity 0.7s var(--e-soft), transform 0.8s var(--e-back);
}
.status.is-on { opacity: 1; transform: none; }
.status__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status__dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--season, var(--accent));
  animation: status-pulse 3.2s var(--e-soft) infinite;
}
.status.is-holiday {
  color: color-mix(in srgb, var(--season) 76%, var(--deep));
  border-color: color-mix(in srgb, var(--season) 42%, transparent);
}
@keyframes status-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Damit die feste Statusmeldung nichts verdeckt, endet der Inhalt darüber. */
.stage, .page { padding-bottom: clamp(3.4rem, 7vw, 5.2rem); }@media (max-width: 760px) {
  .status {
    max-width: 54vw;
    padding: 0.4rem 0.62rem 0.36rem;
    font-size: 0.5rem;
    letter-spacing: 0.14em;
  }
  .status__dot { width: 5px; height: 5px; }
}@media (prefers-reduced-motion: reduce) {
  .status__dot { animation: none; }
  .weather { display: none; }
}

.index__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(0.9rem, 2.4vw, 1.8rem);
  margin: clamp(1.4rem, 3.5vw, 2.6rem) 0 0;
  padding-top: clamp(0.9rem, 2vw, 1.4rem);
  border-top: 1px solid var(--line);
  color: var(--ink-40);
}
.index__nav a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--e-soft), letter-spacing 0.4s var(--e-out);
}
.index__nav a:hover { color: var(--deep); letter-spacing: 0.19em; }
body.is-scene .index__nav { opacity: 0.35; transition: opacity 0.5s var(--e-soft); }

.curtain {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: var(--deep);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}
.curtain__mark {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(2.2rem, 4vw, 3.2rem);
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  background: url(../img/logo-white.svg) center / contain no-repeat;
  opacity: 0;
}
.curtain.is-in { animation: curtain-in 0.66s var(--e-cam) forwards; }
.curtain.is-out { animation: curtain-out 0.82s var(--e-cam) 0.05s forwards; }
.curtain.is-in .curtain__mark { animation: mark-in 0.7s var(--e-out) 0.2s forwards; }
.curtain.is-out .curtain__mark { animation: mark-out 0.34s var(--e-soft) forwards; }
@keyframes curtain-in {
  to { transform: translate3d(0, 0, 0); border-radius: 0; }
}
@keyframes curtain-out {
  from { transform: translate3d(0, 0, 0); border-radius: 0; }
  to { transform: translate3d(0, -100%, 0); border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@keyframes mark-in {
  from { opacity: 0; transform: translate3d(-50%, -40%, 0) scale(0.86); }
  to { opacity: 0.9; transform: translate3d(-50%, -50%, 0) scale(1); }
}
@keyframes mark-out {
  from { opacity: 0.9; }
  to { opacity: 0; }
}

/* Die Seite tritt beim Verlassen einen Schritt zurueck */
body.is-leaving .stage,
body.is-leaving .page,
body.is-leaving .header,
body.is-leaving .note,
body.is-leaving .status {
  opacity: 0.45;
  transform: translate3d(0, -0.5rem, 0) scale(0.99);
  transition: opacity 0.5s var(--e-soft), transform 0.66s var(--e-cam);
}
body[data-transition-in] .stage,
body[data-transition-in] .page { animation: page-in 0.9s var(--e-out) 0.28s both; }
@keyframes page-in {
  from { opacity: 0; transform: translate3d(0, 1.1rem, 0) scale(0.995); }
  to { opacity: 1; transform: none; }
}

.page {
  padding: calc(var(--header-h) + clamp(2.5rem, 9vw, 6rem)) var(--pad) var(--pad);
  min-height: 100svh;
  max-width: 74rem;
  margin: 0 auto;
}
.page__title { font-size: clamp(2rem, 7.5vw, 5.5rem); }
.page__meta {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.35rem 0;
  margin: clamp(2rem, 5vw, 3.5rem) 0;
}
.page__meta .k { display: block; color: var(--ink-40); margin-bottom: 0.35rem; }
.page__body { max-width: 62ch; font-size: clamp(0.95rem, 1.2vw, 1.05rem); }
.page__body > * { margin: 0 0 1.1rem; }
.page__body h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0.9rem;
}
.page__body h3 {
  font-size: 1rem;
  font-weight: 650;
  margin: 1.6rem 0 0.4rem;
}
.page__body ul { padding-left: 1.1rem; }
.page__body li { margin-bottom: 0.4rem; }
.page__body a { text-decoration: underline; text-underline-offset: 0.2em; }
.page__figure { margin: clamp(2rem, 6vw, 4rem) 0 0; }
.page__figure img { border-radius: var(--r); }
.page__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 7vw, 5rem);
  padding-top: 1.25rem;
}
.page__nav a { transition: opacity 0.3s var(--e-soft), transform 0.5s var(--e-out); display: inline-block; }
.page__nav a:hover { opacity: 0.5; }
.page__nav a:first-child:hover { transform: translate3d(-4px, 0, 0); }
.page__nav a:last-child:hover { transform: translate3d(4px, 0, 0); }@media (max-width: 899px) {
  :root { --header-h: 4rem; }

  .stage { height: auto; place-items: start center; }
  .frame { width: 100%; gap: 0.9rem; }
  .frame__head {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .head__title { font-size: clamp(1.5rem, 6.5vw, 2.4rem); }
  .head__meta { text-align: left; }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;
    gap: 0.6rem;
  }
  .cell { aspect-ratio: 1 / 1; }

  /* Reihenfolge auf schmalen Schirmen: ID Card, A Noir Story, Lade Express,
     Sahasra, Let's campaign - danach wie im Quelltext. */
  .grid .cell:nth-child(5) { order: 1; }
  .grid .cell:nth-child(2) { order: 2; }
  .grid .cell:nth-child(3) { order: 3; }
  .grid .cell:nth-child(4) { order: 4; }
  .grid .cell:nth-child(8) { order: 5; }
  .grid .cell:nth-child(1) { order: 6; }
  .grid .cell:nth-child(6) { order: 7; }
  .grid .cell:nth-child(7) { order: 8; }
  .grid .cell:nth-child(9) { order: 9; }
}@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .cell { aspect-ratio: 3 / 2; }
}@media (hover: none) {
  .tile {
    background: var(--deep);
    border-color: color-mix(in srgb, var(--tint) 45%, var(--deep));
    box-shadow: 0 0 34px -14px color-mix(in srgb, var(--tint) 70%, transparent);
  }
  .tile::before,
  .tile::after { display: none; }
  .tile__fill { opacity: 1; }
  .tile--grad .tile__fill {
    background:
      radial-gradient(122% 94% at 14% 4%,
        color-mix(in srgb, var(--tint) 86%, var(--deep)) 0%, transparent 66%),
      linear-gradient(148deg,
        color-mix(in srgb, var(--tint) 52%, var(--deep)) 0%, var(--deep) 68%);
  }
  .tile__media { opacity: 1; transform: none; }
  .tile__media img { transform: scale(1.03); }
  .tile__frame { opacity: 1; transform: none; }
  .tile__info { opacity: 1; }
  .tile__info::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top,
        color-mix(in srgb, var(--tint) 22%, rgba(13, 13, 12, 0.92)) 0%,
        rgba(13, 13, 12, 0) 58%),
      linear-gradient(to bottom, rgba(13, 13, 12, 0.7) 0%, rgba(13, 13, 12, 0) 26%),
      rgba(13, 13, 12, 0.18);
  }
  /* Ohne Zeiger steht die Beschriftung dauerhaft - dann darf sie auch
     gelesen werden koennen. */
  .tile__title { font-size: clamp(1.7rem, 7.6vw, 2.7rem); }
  .tile__tags { opacity: 0.85; font-size: clamp(0.625rem, 2.9vw, 0.8125rem); }
  .tile__top { font-size: clamp(0.625rem, 2.9vw, 0.8125rem); }
  .tile--cover { background: #010101; }
  .tile--empty {
    background: var(--bg);
    border-color: var(--line);
    box-shadow: none;
  }
  .tile--empty .tile__frame { opacity: 0; }
  .tile--id .tile__info, .tile--pane .tile__info { display: none; }
  .tile--empty .tile__info { color: var(--ink-40); }
  .tile--empty .tile__info::before { display: none; }
}

/* Auf dem Handy steht in den Kacheln nichts mehr - das Bild traegt allein.
   Nur A Noir Story behaelt seinen Namen, dafuer in voller Groesse. */
@media (hover: none) and (max-width: 899px) {
  .tile__info { display: none; }
  .tile--label .tile__info { display: grid; }
  .tile--label .tile__top,
  .tile--label .tile__tags { display: none; }
  .tile--label .tile__title {
    font-size: clamp(3rem, 16vw, 5.2rem);
    line-height: 0.88;
    letter-spacing: -0.03em;
  }

  /* Die Welt-Kachel behaelt ihren Namen, aber schmal und links unten - die
     Figur steht rechts der Mitte und soll frei bleiben. */
  .tile--world .tile__info { display: grid; }
  .tile--world .tile__top,
  .tile--world .tile__tags { display: none; }
  .tile--world .tile__title {
    max-width: 48%;
    font-size: clamp(1.5rem, 6.6vw, 2.3rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 18px rgba(4, 14, 9, 0.85);
  }
  /* Der Name steht oben links im dunklen Wald - unten ist das Gras hell
     und unruhig. Ein weicher Schleier von oben und von links traegt ihn. */
  .tile--world .tile__info::before {
    background:
      linear-gradient(to bottom, rgba(4, 14, 9, 0.72) 0%, rgba(4, 14, 9, 0) 46%),
      linear-gradient(to right, rgba(4, 14, 9, 0.5) 0%, rgba(4, 14, 9, 0) 56%);
  }
}@media (prefers-reduced-motion: reduce) {
  .field { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .frag, .cell, .mask > i {
    transform: none !important;
    opacity: 1 !important;
  }
}
@keyframes soundBar {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}
@keyframes cardMark {
  from { opacity: 0; transform: scale(0.7) rotate(-25deg); }
}
@keyframes cardItem {
  from { opacity: 0; transform: translateX(0.7rem); }
}

/* Hochformat: der obere Rand ist eng. Kompass unter die Kopfzeile, Plan nach
   unten, alles in einer Zeile statt umbrechend. */
@media (hover: none) and (pointer: coarse) {
  .world__compass {
    top: 6.2rem;
    max-width: 88vw;
    white-space: nowrap;
    padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  }
  .world__target { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
  .world__dist { white-space: nowrap; }
  .world__touch { top: 9.6rem; }
  .world__plan { top: auto; bottom: 1rem; left: 1rem; }
  .world__bagBtn { top: 3.7rem; }
  /* Die Karte ist unten eine Leiste - der Plan darf dann verschwinden */
  .world.is-carded .world__plan { opacity: 0; }
}
@keyframes itemDrop {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(-8px) rotate(var(--r)) scale(calc(var(--s) * 0.9)); }
}
@keyframes itemFresh { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }


/* Liste der Fallstudien auf /projekte. Bewusst schlicht: Bild, Jahr,
   Rolle, Name, ein Satz - alles im Fluss der uebrigen Unterseiten. */
.works {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 2.6rem);
}
.works__link {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 2rem);
  align-items: start;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-top: 1px solid var(--line);
  transition: border-color 0.5s var(--e-soft);
}
.works__item:last-child .works__link { border-bottom: 1px solid var(--line); }
.works__link:hover { border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.works__shot {
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--deep);
}
.works__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.9s var(--e-out), filter 0.6s var(--e-soft);
  filter: saturate(0.85);
}
.works__link:hover .works__shot img,
.works__link:focus-visible .works__shot img { transform: scale(1.05); filter: none; }
.works__text { display: block; }
.works__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  color: var(--ink-40);
  margin: 0 0 0.5rem;
}
.works__title {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1;
  margin: 0 0 0.6rem;
}
.works__say {
  display: block;
  max-width: 46ch;
  margin: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}
.works__more {
  display: inline-block;
  margin-top: 0.9rem;
  color: var(--ink-40);
  transition: transform 0.5s var(--e-out), color 0.5s var(--e-soft);
}
.works__link:hover .works__more,
.works__link:focus-visible .works__more { color: var(--ink); transform: translate3d(4px, 0, 0); }

@media (max-width: 720px) {
  .works__link { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .works__shot img, .works__more { transition: none; }
}