/* BEYONDV Portal - Seitenlayouts. Nur Anordnung; Farben/Zeiten kommen aus tokens.css. */

/* ================================================================= Startseite (Overhaul 06.10.2026): Szene oben */
.home { display: flex; flex-direction: column; gap: var(--s5); }
.sh {
  --px: 0; --py: 0;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, calc(100dvh - 120px), 820px);
  display: flex; flex-direction: column;
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke2);
  background: #050605;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  transition: border-color 1.2s, box-shadow 1.2s;
}
.sh > canvas { position: absolute; inset: 0; z-index: -1; display: block; }
.sh.ev-blood { border-color: rgba(240, 70, 50, 0.5); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(200, 30, 20, 0.3); }
.sh.ev-toxic { border-color: rgba(160, 230, 80, 0.4); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 50px rgba(120, 200, 40, 0.2); }
.sh.ev-drop { border-color: rgba(250, 180, 80, 0.38); }
.sh.ev-storm { border-color: rgba(140, 170, 255, 0.35); }
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s5) var(--s5) 0; }
.sh-live {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 14px;
  border-radius: var(--r-pill); background: rgba(8, 10, 9, 0.74); border: 1px solid var(--stroke2);
  font-size: 13.5px; animation: bv-pop 0.5s var(--spring) both 0.2s;
}
.sh-live b { font-weight: 500; }
.sh-live .dim { color: var(--text-dim); }
.sh-event {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500;
  animation: bv-pop 0.5s var(--spring) both 0.35s;
}
.sh-event.blood { color: #ffd2ca; background: rgba(140, 18, 10, 0.78); border: 1px solid rgba(255, 90, 70, 0.6); box-shadow: 0 0 22px rgba(240, 60, 40, 0.45); }
.sh-event.toxic { color: #dcffb0; background: rgba(50, 90, 8, 0.78); border: 1px solid rgba(170, 240, 90, 0.55); }
.sh-event.drop { color: #ffe2b0; background: rgba(110, 62, 8, 0.78); border: 1px solid rgba(250, 180, 80, 0.55); }
.sh-event.storm { color: #d8e3ff; background: rgba(28, 42, 88, 0.78); border: 1px solid rgba(140, 170, 255, 0.5); }
.sh-center {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s4);
  padding: var(--s6) var(--s7) calc(var(--s7) + 24px);
  max-width: 980px;
  transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 6px), 0);
}
.sh-logo { height: 54px; width: auto; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.85)); animation: bv-fade-up 0.7s var(--out) both 0.1s; }
.sh h1 {
  font-size: clamp(40px, 5.4vw, 80px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);
}
.sh h1 .l { display: block; overflow: hidden; padding-bottom: 0.04em; }
.sh h1 .l > span { display: inline-block; }
.sh h1 em {
  font-style: normal;
  background: linear-gradient(95deg, #e9ffc0, var(--a) 40%, #f2c94c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(var(--a-rgb), 0.35));
}
.sh-lead { font-size: clamp(16px, 1.4vw, 19px); color: #ddd7cb; max-width: 54ch; line-height: 1.6; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); margin: 0; animation: bv-fade-up 0.7s var(--out) both 0.45s; }
.sh-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); animation: bv-fade-up 0.7s var(--out) both 0.55s; }
.sh-second { min-height: 58px; padding: 0 22px; border-radius: var(--r); background: rgba(8, 10, 9, 0.6); border-color: var(--stroke3); font-size: 15px; }
/* Der Spielen-Knopf wie im Launcher: groß, leuchtend, ein Lichtfleck unter dem Zeiger, ein Glanz läuft im Herzschlag um */
.sh-play {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 16px;
  height: 76px; padding: 0 34px 0 14px; border-radius: var(--r);
  color: var(--on-a); overflow: visible;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 92%, white 8%), var(--a2));
  box-shadow: 0 14px 38px rgba(var(--a-rgb), 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 0.28s var(--out), box-shadow 0.3s;
}
.sh-play.free { transition: transform 0.7s var(--spring), box-shadow 0.3s; }
.sh-play:hover { color: var(--on-a); box-shadow: 0 18px 46px rgba(var(--a-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 7px rgba(var(--a-rgb), 0.14); }
.sh-play:active { transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) + 1px), 0) scale(0.98); }
.sh-play .spot { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(200px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.32), transparent 62%); }
.sh-play:hover .spot { opacity: 1; }
.sh-play .ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.16); transition: transform 0.4s var(--spring); }
.sh-play:hover .ico { transform: scale(1.1); }
.sh-play .txt { display: flex; flex-direction: column; gap: 2px; }
.sh-play .txt b { font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
.sh-play .txt small { font-size: 12.5px; opacity: 0.8; }
.sh-play .beam { position: absolute; inset: -3px; z-index: -1; border-radius: calc(var(--r) + 3px); overflow: hidden; pointer-events: none; }
.sh-play .beam i { position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(transparent 0 60%, rgba(255, 255, 255, 0.9) 74%, rgba(var(--a-rgb), 0.9) 80%, transparent 90%); }
:root.beat .sh-play .beam i { animation: sh-beam 1.6s cubic-bezier(0.45, 0.05, 0.35, 1); }
@keyframes sh-beam { to { rotate: 360deg; } }
/* Kritzelei: "hier geht's los" mit Pfeil zum Knopf (nur breite Fenster) */
.sh-doodle { position: absolute; left: 344px; top: 66px; width: 120px; height: 60px; fill: none; stroke: #f2c94c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.9; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
  stroke-dasharray: 260; stroke-dashoffset: 260; animation: sh-draw 1.1s var(--out) forwards 1.2s; }
.sh-note { position: absolute; left: 470px; top: 106px; white-space: nowrap; pointer-events: none; font-size: 17px; color: #f2c94c; transform: rotate(-6deg); letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); opacity: 0; animation: bv-fade 0.5s var(--ease) forwards 1.9s; }
@keyframes sh-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 1180px) { .sh-doodle, .sh-note { display: none; } }
:root[data-motion='off'] .sh-doodle { animation: none; stroke-dashoffset: 0; }
:root[data-motion='off'] .sh-note { animation: none; opacity: 1; }
/* Live-Leiste unten in der Szene */
.sh-strip {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin: 0 var(--s4) var(--s4); min-height: 58px; padding: 6px 8px;
  border-radius: var(--r); background: rgba(8, 10, 9, 0.82); border: 1px solid var(--stroke);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.sh-strip-head { display: flex; align-items: center; gap: 9px; padding: 0 14px 0 8px; align-self: stretch; border-right: 1px solid var(--stroke); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); }
.sh-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: var(--r-sm); white-space: nowrap; transition: background 0.2s; animation: bv-fade-up 0.45s var(--out) both; animation-delay: calc(0.5s + var(--i, 0) * 0.06s); }
.sh-item:hover { background: rgba(255, 255, 255, 0.05); }
.sh-item > .ic { color: var(--a); }
.sh-item small { display: block; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); line-height: 1.15; }
.sh-item b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.sh-item.hot { background: rgba(240, 90, 75, 0.18); }
.sh-item.hot > .ic, .sh-item.hot b { color: #ff9d8f; }
.sh-item.warm > .ic, .sh-item.warm b { color: var(--warn); }
.sh-item.toxic > .ic, .sh-item.toxic b { color: var(--toxic); }
.sh-bar { display: block; width: 70px; height: 4px; margin-top: 3px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: inherit; transition: width 0.8s var(--out); }
.sh-off { display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 14px; color: var(--text-dim); }
.sh-off b { color: var(--text); font-weight: 500; }
.sh-scene {
  position: absolute; right: var(--s5); top: 76px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(8, 10, 9, 0.6); border: 1px solid var(--stroke); color: var(--text-dim); font-size: 13px; text-align: left;
  transition: color var(--normal) var(--ease), border-color var(--normal) var(--ease), transform 0.3s var(--spring);
}
.sh-scene span { display: flex; flex-direction: column; line-height: 1.15; }
.sh-scene small { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.sh-scene:hover { color: var(--text); border-color: var(--stroke3); transform: translateY(-1px); }
.sh-scene:hover .ic:last-child { transform: rotate(180deg); }
.sh-scene .ic { color: var(--a); transition: transform 0.5s var(--spring); }
@media (max-width: 900px) {
  .sh { min-height: 600px; border-radius: var(--r-lg); }
  .sh-top { padding: var(--s4) var(--s4) 0; }
  .sh-center { padding: var(--s5) var(--s4) var(--s6); max-width: none; }
  .sh-logo { height: 40px; }
  .sh-play { height: 68px; padding-right: 24px; }
  .sh-play .txt b { font-size: 19px; }
  /* am Handy im Fluss zwischen Knöpfen und Live-Leiste - schwebend lag sie über "Konto anlegen" */
  .sh-scene { position: relative; top: auto; right: auto; order: 1; align-self: flex-end; margin: calc(-1 * var(--s4)) var(--s4) var(--s3); }
  .sh-strip { order: 2; }
  .sh-item.opt { display: none; }
  .sh-strip { margin: 0 var(--s2) var(--s2); }
}

/* ================================================================= Startseite: Neu hier (Zettel an der Wand) */
.steps3 { display: flex; flex-direction: column; gap: var(--s4); }
.steps3-head h2 { font-size: clamp(22px, 2.4vw, 30px); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }
.steps3 ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.steps3 .note {
  --nc: var(--a);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: var(--s5) var(--s5) var(--s5); border-radius: var(--r-lg);
  background: linear-gradient(170deg, color-mix(in srgb, var(--nc) 10%, #1b1f1d), #151817 70%);
  border: 1px solid color-mix(in srgb, var(--nc) 28%, transparent);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.5s var(--spring), box-shadow 0.3s var(--ease);
}
.steps3 .note.amber { --nc: var(--amber); } .steps3 .note.sky { --nc: var(--sky); }
.steps3 .note:hover { transform: rotate(0deg) translateY(-4px) scale(1.01); box-shadow: 0 24px 46px rgba(0, 0, 0, 0.55); }
.steps3 .tape { position: absolute; top: -11px; left: 50%; width: 86px; height: 22px; margin-left: -43px; border-radius: 3px; transform: rotate(-3deg);
  background: rgba(236, 232, 222, 0.16); border: 1px solid rgba(236, 232, 222, 0.12); backdrop-filter: blur(2px); }
.steps3 .n { position: absolute; right: 18px; top: 10px; font-size: 64px; line-height: 1; color: color-mix(in srgb, var(--nc) 30%, transparent); font-weight: 600; }
.steps3 .n-ico { color: var(--nc); --size: 26px; }
.steps3 b { font-size: 19px; font-weight: 500; }
.steps3 .btn { margin-top: auto; }
@media (max-width: 900px) { .steps3 ol { grid-template-columns: minmax(0, 1fr); } .steps3 .note { transform: none; } }

/* ================================================================= Allgemeines 12er-Raster der Seiten
   (Konto, Charakter, Nachrichten, Server, Team) */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 1280px) { .span-3 { grid-column: span 6; } .span-4 { grid-column: span 6; } .span-5, .span-7 { grid-column: span 12; } .span-8 { grid-column: span 12; } }
@media (max-width: 760px) { .dash > * { grid-column: span 12 !important; } }

/* ================================================================= Startseite: Kachel-Raster */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); }
.b-4 { grid-column: span 4; } .b-5 { grid-column: span 5; } .b-6 { grid-column: span 6; } .b-7 { grid-column: span 7; } .b-12 { grid-column: span 12; }
@media (max-width: 1280px) { .b-4 { grid-column: span 6; } .b-5, .b-7 { grid-column: span 12; } }
@media (max-width: 760px) { .bento > * { grid-column: span 12 !important; } }
.tile { overflow: hidden; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--s4); }
.mini-grid > .wide { grid-column: 1 / -1; }
.mini-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--stroke); min-width: 0; }
.mini-grid b { font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.me-title { font-size: 24px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Blutmond */
.moon-tile { min-height: 260px; background: radial-gradient(120% 90% at 85% 0%, rgba(240, 90, 75, 0.18), transparent 55%), linear-gradient(180deg, #1c1615, #141110); border-color: rgba(240, 90, 75, 0.22); }
.moon-tile .moon { position: absolute; right: -40px; top: -40px; width: 210px; height: 210px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 36%, #ff9b84, #e0402c 48%, #8d1c10 75%); box-shadow: 0 0 80px rgba(240, 70, 40, 0.45), inset -18px -18px 40px rgba(60, 0, 0, 0.45); opacity: 0.85;
  transition: transform 1.2s var(--out), box-shadow 1.2s; }
.moon-tile .moon i { position: absolute; inset: 0; border-radius: 50%; background:
  radial-gradient(circle at 30% 60%, rgba(70, 0, 0, 0.35) 0 9%, transparent 10%), radial-gradient(circle at 62% 30%, rgba(70, 0, 0, 0.3) 0 7%, transparent 8%),
  radial-gradient(circle at 58% 70%, rgba(70, 0, 0, 0.25) 0 12%, transparent 13%); }
.moon-tile:hover .moon { transform: translate(-10px, 10px) scale(1.04); }
.moon-tile.active { border-color: rgba(255, 90, 70, 0.6); box-shadow: var(--shadow), 0 0 50px rgba(220, 40, 25, 0.35); }
.moon-tile.active .moon { box-shadow: 0 0 120px rgba(255, 60, 30, 0.75), inset -18px -18px 40px rgba(60, 0, 0, 0.45); }
.moon-tile .card-head h2 { color: #f0b3a8; }
.moon-tile .card-head .ic { color: var(--blood); }
.moon-count { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: var(--s5); }
.moon-count b { font-size: 64px; line-height: 1; font-weight: 600; color: #fff1ec; text-shadow: 0 0 30px rgba(240, 90, 75, 0.45); }
.moon-count b small { font-size: 22px; font-weight: 500; margin-left: 8px; color: #f0b3a8; }
.moon-count b.hot { color: #ff7a66; } .moon-count b.warm { color: var(--warn); }
.moon-count > span { color: #cdb8b3; font-size: 14px; max-width: 30ch; }
.sticker { position: absolute; right: 18px; bottom: 18px; z-index: 1; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #2a0905; background: #ffb4a6; transform: rotate(-7deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); transition: transform 0.45s var(--spring); }
.moon-tile:hover .sticker { transform: rotate(4deg) scale(1.06); }

/* Kenne deinen Feind: Steckbrief */
.enemy-tile { background: radial-gradient(110% 80% at 0% 0%, rgba(242, 168, 60, 0.12), transparent 50%), linear-gradient(180deg, #1c1b17, #151513); border-color: rgba(242, 168, 60, 0.18); }
.wanted { position: relative; display: flex; gap: 16px; align-items: flex-start; margin-top: 6px; padding: 16px; border-radius: var(--r); min-height: 118px;
  background: rgba(0, 0, 0, 0.22); border: 1px dashed rgba(242, 168, 60, 0.35); transform: rotate(-0.8deg); animation: en-in 0.5s var(--out) both; }
@keyframes en-in { from { opacity: 0; transform: rotate(-0.8deg) translateX(18px); } }
.wanted .w-ico { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 16px; color: var(--amber); background: rgba(242, 168, 60, 0.12); border: 1px solid rgba(242, 168, 60, 0.3); }
.wanted b { display: block; font-size: 19px; font-weight: 500; margin-bottom: 4px; }
.wanted p { margin: 0 0 8px; color: var(--text-dim); font-size: 14.5px; line-height: 1.45; }
.wanted .stamp { position: absolute; right: 10px; top: -10px; padding: 3px 10px; border: 2px solid rgba(240, 90, 75, 0.85); border-radius: 6px; color: #ff8a7c; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; transform: rotate(8deg); background: rgba(20, 8, 6, 0.85); }
.w-danger { display: inline-flex; gap: 4px; }
.w-danger i { width: 16px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.w-danger i.on { background: linear-gradient(90deg, var(--amber), var(--blood)); }
.w-dots { display: flex; gap: 5px; margin-top: var(--s4); }
.w-dots button { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); transition: background 0.2s, width 0.3s var(--spring); }
.w-dots button.on { width: 32px; background: var(--amber); }

/* Ehrentafel: kleines Treppchen */
.mini-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 4px 0 var(--s3); }
.mini-podium .mp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 30px; border-radius: var(--r) var(--r) 6px 6px; color: var(--text); text-align: center; min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); border: 1px solid var(--stroke); transition: transform 0.35s var(--spring); }
.mini-podium .mp:hover { transform: translateY(-4px); color: var(--text); }
.mini-podium .mp > span { max-width: 100%; }
.mini-podium .mp.p1 { padding-top: 18px; padding-bottom: 46px; border-color: rgba(246, 203, 58, 0.45); background: linear-gradient(180deg, rgba(246, 203, 58, 0.16), rgba(246, 203, 58, 0.02)); }
.mini-podium .mp.p2 { border-color: rgba(201, 205, 210, 0.35); }
.mini-podium .mp.p3 { border-color: rgba(200, 149, 106, 0.4); }
.mini-podium .step { position: absolute; bottom: 6px; font-style: normal; font-size: 18px; font-weight: 600; color: var(--text-muted); }
.mini-podium .p1 .step { color: var(--gold); } .mini-podium .p2 .step { color: #c9cdd2; } .mini-podium .p3 .step { color: #c8956a; }
.mini-podium .mp.empty { visibility: hidden; }

/* Karte: Vorschau aus Kartenraster und einem Punkt */
.map-tile { display: flex; flex-direction: column; min-height: 240px; color: var(--text); text-decoration: none; }
.map-tile:hover { color: var(--text); }
.map-tile .map-bg { position: absolute; inset: 0; z-index: -1; opacity: 0.6; transition: transform 1.2s var(--out);
  background: radial-gradient(60% 60% at 62% 55%, rgba(87, 178, 242, 0.12), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px; }
.map-tile:hover .map-bg { transform: scale(1.08); }
.map-tile .map-pin { position: absolute; left: 64%; top: 52%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 0 4px rgba(240, 90, 75, 0.25), 0 0 20px rgba(240, 90, 75, 0.7); }
.map-tile .map-pin i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blood); opacity: 0; }
:root.beat .map-tile .map-pin i { animation: bv-ring 1.6s var(--ease) both; }
.map-copy { display: flex; flex-direction: column; gap: 4px; margin-top: auto; max-width: 46ch; }
.map-copy b { font-size: 22px; font-weight: 500; }
.map-go { align-self: flex-start; margin-top: var(--s3); }

/* Geschichte: breites Band mit dem Friedhofstor */
.lore-tile { display: flex; align-items: center; min-height: 300px; padding: var(--s6); color: var(--text); text-decoration: none; isolation: isolate; }
.lore-tile:hover { color: var(--text); }
.lore-tile .lore-bg { position: absolute; inset: -4px; z-index: -2; background: url('/img/titel/friedhof/grund.webp') center 45% / cover no-repeat; filter: sepia(0.25) saturate(0.95); transition: transform 6s var(--out); }
.lore-tile:hover .lore-bg { transform: scale(1.06); }
.lore-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.7) 45%, rgba(8, 9, 10, 0.1) 100%); }
.lore-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 520px; }
.lore-copy h2 { font-size: clamp(26px, 3vw, 40px); text-transform: uppercase; letter-spacing: 0.04em; }
.lore-copy p { color: #d6d0c4; margin: 0; }

.event-list { display: flex; flex-direction: column; gap: var(--s2); }
.event {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s3); border: 1px solid var(--line); background: rgba(22, 25, 24, 0.7);
  transition: border-color var(--normal) var(--ease);
}
.event:hover { border-color: var(--line-strong); }
.event .e-title { font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-dim); }
.event .e-value { font-size: 17px; color: var(--text); }
.event .e-side { font-size: 14px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.event.hot { border-color: color-mix(in srgb, var(--ec) 55%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--ec) 20%, transparent); }

.tps-gauge { position: relative; width: 120px; height: 66px; }
.tps-gauge svg { width: 100%; height: 100%; overflow: visible; }

.players { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow: auto; margin: 0 calc(var(--s3) * -1); }
.players.locked { position: relative; max-height: 220px; overflow: hidden; }
.players.locked > * { filter: blur(5px); opacity: 0.6; }
.players .lock {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--s3); align-items: center; justify-content: center;
  filter: none !important; opacity: 1 !important; text-align: center; padding: var(--s4);
  background: linear-gradient(180deg, rgba(18, 21, 20, 0.2), rgba(18, 21, 20, 0.9));
}

.me-card { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr); gap: var(--s4); align-items: center; }
@media (max-width: 640px) { .me-card { grid-template-columns: minmax(0, 1fr); } }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

.post-mini { display: flex; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.post-mini:last-child { border-bottom: 0; }
.post-mini .body { font-size: 15px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.lb-row { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: 0; }
.lb-row .pos { font-size: 18px; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.lb-row.p1 .pos { color: var(--gold); } .lb-row.p2 .pos { color: #c9cdd2; } .lb-row.p3 .pos { color: #c8956a; }

.announce {
  position: relative; display: flex; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 3px);
  border: 1px solid rgba(208, 138, 46, 0.45); background: linear-gradient(90deg, rgba(208, 138, 46, 0.12), rgba(208, 138, 46, 0.02));
  margin-bottom: var(--s4);
}
.announce::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: var(--warn); }

/* ================================================================= 3D-Figur */
.skinviewer { position: relative; width: 100%; touch-action: pan-y; user-select: none; }
.skinviewer .sv-canvas { width: 100%; height: 100%; cursor: grab; }
.skinviewer .sv-canvas:active { cursor: grabbing; }
.skinviewer .sv-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.skinviewer .sv-fail { position: absolute; inset: 0; }
.skinviewer .sv-poses { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 4px; background: rgba(10, 11, 10, 0.7); border: 1px solid var(--line); padding: 4px; }
.skinviewer .sv-poses .btn { border-color: transparent; }
.skinviewer .sv-poses .btn.active { border-color: var(--accent-dim); background: var(--olive-deep); }
.skinviewer .sv-hint { position: absolute; top: 8px; left: 0; right: 0; text-align: center; pointer-events: none; }
.skinviewer.compact .sv-poses { bottom: 4px; }

/* ================================================================= Server & Modpack */
.steps { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin: var(--s5) 0; }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s3); align-items: start; color: var(--text-dim); }
.steps .n { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent-dim); color: var(--accent-bright); font-size: 14px; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 760px) { .features { grid-template-columns: minmax(0, 1fr); } }
.feature {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); align-items: center;
  padding: var(--s3); border: 1px solid var(--line); background: rgba(22, 25, 24, 0.6);
  transition: border-color var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.feature:hover { border-color: var(--line-hover); transform: translateY(-2px); }
.feature .f-title { font-size: 14px; text-transform: uppercase; letter-spacing: var(--track-caps); }
.feature .f-text { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.rank-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5) var(--s4); border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 9%, rgba(18, 21, 20, 0.92)), rgba(18, 21, 20, 0.92) 60%);
  transition: border-color var(--normal) var(--ease), transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.rank-card::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--rc); transform: scaleX(0.25); transition: transform var(--slow) var(--ease); }
.rank-card:hover { border-color: color-mix(in srgb, var(--rc) 55%, transparent); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 28px color-mix(in srgb, var(--rc) 18%, transparent); }
.rank-card:hover::after { transform: scaleX(1); }
.rank-top { display: flex; gap: var(--s4); align-items: center; }
.rank-title { font-size: 24px; text-transform: uppercase; letter-spacing: 0.08em; }
.rank-card .rank-img { transition: transform var(--slow) var(--spring); }
.rank-card:hover .rank-img { transform: scale(1.1) rotate(-4deg); }
.kit { display: flex; flex-direction: column; gap: 6px; }
.faq { display: flex; flex-direction: column; }

/* ================================================================= Geschichte (Archiv) */
.lore { position: relative; max-width: 920px; margin: 0 auto; padding-left: 64px; }
@media (max-width: 760px) { .lore { padding-left: 0; } }
.lore-intro { min-height: calc(100dvh - var(--topbar) - 80px); display: flex; flex-direction: column; justify-content: center; gap: var(--s4); position: relative; }
.lore-intro h1 { font-size: clamp(38px, 6vw, 76px); text-transform: uppercase; line-height: 1; letter-spacing: 0.02em; }
.lore-intro .lead { font-size: 19px; color: var(--text-dim); max-width: 60ch; }
.stamp {
  align-self: flex-start; transform: rotate(-4deg);
  padding: 6px 14px; border: 2px solid rgba(196, 71, 58, 0.7); color: #e98b80;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.3em;
  box-shadow: inset 0 0 0 1px rgba(196, 71, 58, 0.25);
  animation: bv-stamp 600ms var(--spring) both 300ms;
}
@keyframes bv-stamp { from { transform: rotate(-4deg) scale(1.6); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
:root[data-motion='off'] .stamp { animation: none; }
.scroll-cue { margin-top: var(--s6); display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--s2); color: var(--text-dim); min-height: 44px; }
.scroll-cue span:first-child { width: 22px; height: 36px; border: 1px solid var(--line-strong); position: relative; }
.scroll-cue span:first-child::after { content: ''; position: absolute; left: 50%; top: 6px; width: 2px; height: 8px; margin-left: -1px; background: var(--accent); animation: bv-cue 1.6s var(--ease-io) infinite; }
@keyframes bv-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.lore-rail { position: fixed; left: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 5; }
@media (max-width: 1100px) { .lore-rail { display: none; } }
.lore-rail .rail-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); transform: translateX(-50%); }
.lore-rail .rail-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 0; transition: transform 120ms linear; }
.rail-dot { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line-strong); color: var(--text-muted); font-size: 12px; transition: all var(--normal) var(--ease); }
.rail-dot:hover { border-color: var(--line-hover); color: var(--text); }
.rail-dot.done { border-color: var(--accent-dim); color: var(--accent); }
.rail-dot.active { border-color: var(--accent); color: var(--bg); background: var(--accent); box-shadow: var(--glow); transform: scale(1.08); }
/* Briefstapel: jeder Brief klebt (top setzt lore.js je Brief 14 px tiefer) und der naechste
   schiebt sich darueber. margin-bottom ist die Scrollstrecke, die ein Brief zum Ankommen braucht. */
.letters { position: relative; padding: var(--s6) 0 46vh; }
.letter-anchor { display: block; height: 0; }
.letter {
  position: sticky; top: calc(var(--topbar) + 24px);
  max-width: 780px; margin: 0 auto 58vh;
  padding: 40px 56px 32px;
  color: #26271f;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 16%),
    linear-gradient(transparent 33.1%, rgba(60, 50, 30, 0.08) 33.3%, transparent 33.8%, transparent 66.4%, rgba(60, 50, 30, 0.07) 66.6%, transparent 67.1%),
    radial-gradient(ellipse at 20% 10%, rgba(255, 250, 235, 0.35), transparent 55%),
    linear-gradient(172deg, #e0d9c4 0%, #d4cbb2 55%, #c8bea3 100%);
  border: 1px solid #b5ab8f;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 90px rgba(110, 90, 50, 0.22);
  transform-origin: 50% 0;
  will-change: transform, filter;
  scroll-margin-top: calc(var(--topbar) + 24px);
}
.letter:last-of-type { margin-bottom: 0; }
.letter.tall { position: relative; top: auto !important; }
.letter::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url('/res/zsurvival/textures/gui/ui/grain.png'); background-size: 160px 160px;
  opacity: 0.32; mix-blend-mode: multiply;
}
.letter::after { /* Eselsohr */
  content: ''; position: absolute; right: -1px; top: -1px; width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--bg) 50%, #b9af93 50%, #cfc5aa 100%);
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.18);
}
.lt-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding-bottom: 14px; border-bottom: 2px solid #2d3022; }
.lt-brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #2d3022; line-height: 1.35; }
.lt-brand img { filter: saturate(0.7) brightness(0.55) contrast(1.3); }
.lt-brand small { font-size: 10px; letter-spacing: 0.22em; color: #5d5a48; }
.lt-stamp {
  margin-top: 2px; padding: 5px 12px; transform: rotate(-6deg);
  border: 2px solid rgba(160, 40, 30, 0.75); color: rgba(160, 40, 30, 0.85);
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase;
  mix-blend-mode: multiply; box-shadow: inset 0 0 0 1px rgba(160, 40, 30, 0.25);
}
.lt-meta { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 4px 14px; margin: 16px 0 20px; font-family: var(--mono); font-size: 13.5px; color: #3a3a2e; }
.lt-meta dt { text-transform: uppercase; letter-spacing: 0.14em; color: #6b6752; font-size: 11.5px; padding-top: 2px; }
.lt-meta dd { margin: 0; }
.lt-meta .lt-subject { font-family: var(--font); font-size: clamp(20px, 2.6vw, 28px); text-transform: uppercase; letter-spacing: 0.05em; color: #1d1e17; line-height: 1.15; margin-top: 2px; }
.lt-body { font-size: 18px; line-height: 1.72; color: #2a2b22; }
.lt-body p { margin-bottom: 14px; }
.lt-body strong { color: #121310; font-weight: 500; }
.lt-body em { color: #5b4a26; }
.lt-body blockquote { margin: 18px 0; padding: 12px 18px; border-left: 3px solid #637a3e; background: rgba(99, 122, 62, 0.1); font-style: italic; color: #24261c; }
.letter .redact { background: #121310; box-shadow: none; }
.letter .redact:hover, .letter .redact:focus, .letter .redact:focus-visible { color: #8a1e14; background: rgba(196, 71, 58, 0.16); }
.lt-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(45, 48, 34, 0.35); }
.lt-sign { font-size: 24px; font-style: italic; color: #273556; transform: rotate(-3deg); transform-origin: 0 100%; }
.lt-page { font-size: 12px; color: #6b6752; letter-spacing: 0.2em; }
@media (max-width: 760px) {
  .letter { padding: 26px 20px 22px; margin-bottom: 46vh; }
  .lt-body { font-size: 16px; }
  .lt-meta { grid-template-columns: 64px minmax(0, 1fr); font-size: 12.5px; }
}
[data-scroll-reveal] { opacity: 0; }
:root[data-motion='off'] [data-scroll-reveal] { opacity: 1; }
.redact {
  position: relative; color: transparent; background: #000; padding: 0 4px; cursor: help;
  box-shadow: inset 0 0 0 1px #1a1a1a;
  transition: color var(--slow) var(--ease), background-color var(--slow) var(--ease);
}
.redact:hover, .redact:focus, .redact:focus-visible { color: #f0d5d0; background: rgba(196, 71, 58, 0.18); outline: none; }
.lore-end { text-align: center; padding: var(--s8) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.lore-end h2 { font-size: clamp(26px, 3.6vw, 44px); text-transform: uppercase; letter-spacing: 0.05em; }

/* ================================================================= Community */
.community { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 960px) { .community { grid-template-columns: minmax(0, 1fr); } .threads { flex-direction: row; overflow-x: auto; } .thread-item { min-width: 220px; } }
.threads { position: sticky; top: calc(var(--topbar) + 16px); display: flex; flex-direction: column; gap: 4px; }
.thread-item {
  position: relative; display: flex; align-items: center; gap: var(--s3); text-align: left; width: 100%;
  min-height: 56px; padding: var(--s2) var(--s3) var(--s2) calc(var(--s3) + 2px);
  border: 1px solid var(--line); background: rgba(18, 21, 20, 0.82); color: var(--text-dim);
  transition: border-color var(--normal) var(--ease), color var(--normal) var(--ease), background-color var(--normal) var(--ease);
}
.thread-item::before { content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 3px; background: var(--accent); transform: scaleY(0); transition: transform var(--normal) var(--ease), top var(--normal) var(--ease), bottom var(--normal) var(--ease); }
.thread-item:hover { border-color: var(--line-hover); color: var(--text); }
.thread-item:hover::before { transform: scaleY(1); }
.thread-item.active { color: var(--text); border-color: rgba(var(--a-rgb), 0.35); background: linear-gradient(90deg, rgba(var(--a-rgb), 0.1), rgba(18, 21, 20, 0.82)); }
.thread-item.active::before { transform: scaleY(1); top: 0; bottom: 0; }
.thread-item .ic { color: var(--icon); }
.thread-item.active .ic { color: var(--accent-bright); }
.thread-item .t-name { font-size: 15px; }
.thread-item .t-count { font-size: 12px; color: var(--text-muted); }
.thread-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); color: var(--accent-bright); }
.thread-head h2 { font-size: 22px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
.composer { display: flex; flex-direction: column; gap: var(--s2); }
.composer.card { padding: var(--s4); }
.composer textarea { min-height: 88px; }
.post { padding: var(--s4) var(--s4) var(--s3); scroll-margin-top: calc(var(--topbar) + 24px); }
.post.flash { animation: bv-flash 1.8s var(--ease) both; }
@keyframes bv-flash { 0%, 30% { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow); } 100% { box-shadow: none; } }
.post-row { display: flex; gap: var(--s3); align-items: flex-start; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.post-meta .author { font-size: 15px; color: var(--text); }
.post-body { margin-top: 6px; font-size: 16px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: #d3cec4; }
.mention { color: var(--accent-bright); background: var(--accent-a12); padding: 0 3px; }
.post-actions { display: flex; flex-wrap: wrap; gap: 2px; margin-top: var(--s2); margin-left: -8px; }
.act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px;
  font-size: 13px; color: var(--text-dim); border: 1px solid transparent;
  transition: color var(--normal) var(--ease), border-color var(--normal) var(--ease), background-color var(--normal) var(--ease);
}
@media (pointer: coarse) { .act { min-height: 44px; } }
.act:hover { color: var(--text); border-color: var(--line); background: rgba(var(--a-rgb), 0.04); }
.act.like .heart { display: inline-flex; }
.act.like.on { color: #e98b80; }
.act.like.on .ic { color: #e06a5c; }
.replies { margin: var(--s3) 0 0 calc(40px + var(--s3)); padding-left: var(--s4); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); }
.post.is-reply { padding: var(--s2) 0; }
.composer.reply textarea { min-height: 64px; }
.hidden-post { opacity: 0.85; }
.hidden-note { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px dashed var(--line-strong); color: var(--text-dim); font-size: 14px; }
.hidden-note .ic { display: inline-block; margin-right: 6px; vertical-align: -2px; }

/* ================================================================= Bestenliste */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: end; max-width: 760px; margin-left: auto; margin-right: auto; }
.podium-place { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.podium-place .pp-name { font-size: 18px; }
.podium-place .pp-value { font-size: 22px; color: var(--text); }
.podium-place .pp-block {
  width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px;
  border: 1px solid var(--line-strong); border-bottom: 0;
  background: linear-gradient(180deg, rgba(var(--a-rgb), 0.14), rgba(18, 21, 20, 0.6));
  font-size: 34px; color: var(--text-dim);
  transform-origin: 50% 100%; animation: bv-rise 700ms var(--spring) both;
}
.podium-place.p1 .pp-block { height: 150px; border-color: rgba(224, 192, 98, 0.6); color: var(--gold); background: linear-gradient(180deg, rgba(224, 192, 98, 0.18), rgba(18, 21, 20, 0.6)); animation-delay: 420ms; }
.podium-place.p2 .pp-block { height: 110px; animation-delay: 270ms; }
.podium-place.p3 .pp-block { height: 80px; color: #c8956a; animation-delay: 120ms; }
.podium-place.p1 .head { box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgba(224, 192, 98, 0.35); }
@keyframes bv-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
:root[data-motion='off'] .podium-place .pp-block { animation: none; }

/* ================================================================= Shop */
.demo-banner { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); margin-bottom: var(--s5); border: 1px solid rgba(111, 143, 166, 0.5); background: linear-gradient(90deg, rgba(111, 143, 166, 0.14), rgba(111, 143, 166, 0.02)); color: var(--text); }
.demo-banner .ic { color: var(--info); }
.demo-banner b { font-weight: 500; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s5); margin-top: var(--s4); }
.shop-card {
  --gx: 50%; --gy: 50%;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5); border: 1px solid var(--line);
  background: linear-gradient(170deg, color-mix(in srgb, var(--rc) 10%, rgba(18, 21, 20, 0.94)), rgba(18, 21, 20, 0.94) 55%);
  box-shadow: var(--shadow);
  transition: transform 260ms var(--ease), border-color var(--normal) var(--ease), box-shadow var(--slow) var(--ease);
  transform-style: preserve-3d; will-change: transform;
}
.shop-card:hover { border-color: color-mix(in srgb, var(--rc) 60%, transparent); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55), 0 0 32px color-mix(in srgb, var(--rc) 16%, transparent); }
.shop-card .glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.10), transparent 45%); opacity: 0; transition: opacity var(--slow) var(--ease); }
.shop-card:hover .glare { opacity: 1; }
.shop-card .ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(45deg); width: 130px; text-align: center; padding: 3px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; background: var(--rc); color: #0a0b0a; }
.sc-visual { height: 110px; display: flex; align-items: center; justify-content: center; transform: translateZ(30px); }
.sc-visual img { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 50%, transparent)); transition: transform var(--slow) var(--spring); }
.shop-card:hover .sc-visual img { transform: scale(1.12) rotate(-3deg); }
.sc-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); color: var(--rc); background: color-mix(in srgb, var(--rc) 8%, transparent); }
.sc-name { font-size: 22px; text-transform: uppercase; letter-spacing: 0.08em; }
.sc-desc { color: var(--text-dim); font-size: 15px; margin: 0; }
.sc-perks { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.sc-perks li { display: flex; gap: 8px; align-items: center; }
.sc-perks .ic { color: var(--accent); }
.sc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.sc-price { font-size: 24px; }
.cart-lines { display: flex; flex-direction: column; gap: var(--s2); }
.cart-line { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.qty { display: inline-flex; align-items: center; gap: 8px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s4) 0 var(--s2); font-size: 22px; }
.order-done { display: flex; flex-direction: column; gap: var(--s3); text-align: center; align-items: center; }
.check-anim svg { width: 84px; height: 84px; fill: none; stroke: var(--accent); stroke-width: 2; }
.check-anim circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: bv-draw 600ms var(--ease) forwards; }
.check-anim path { stroke-width: 3; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bv-draw 400ms var(--ease) 450ms forwards; }
@keyframes bv-draw { to { stroke-dashoffset: 0; } }

/* ================================================================= Nachrichten */
.inbox { display: flex; flex-direction: column; gap: 4px; }
.inbox-item {
  position: relative; display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 3px);
  border: 1px solid var(--line); background: rgba(18, 21, 20, 0.82);
  transition: border-color var(--normal) var(--ease), background-color var(--normal) var(--ease);
}
.inbox-item:hover { border-color: var(--line-strong); }
.inbox-item.unread { border-color: rgba(var(--a-rgb), 0.32); background: linear-gradient(90deg, rgba(var(--a-rgb), 0.08), rgba(18, 21, 20, 0.82)); }
.inbox-item.unread::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.ii-main { display: flex; flex-direction: column; gap: 2px; color: inherit; min-width: 0; }
.ii-title { font-size: 15px; color: var(--text); }
.ii-body { font-size: 14px; color: var(--text-dim); }
.ii-actions { display: flex; gap: 2px; }

/* ================================================================= Charakter */
.dossier { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); gap: var(--s4); align-items: start; }
@media (max-width: 1100px) { .dossier { grid-template-columns: minmax(0, 1fr); } }
.dossier-figure { position: sticky; top: calc(var(--topbar) + 16px); padding: var(--s3); background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(var(--a-rgb), 0.10), rgba(18, 21, 20, 0.9) 70%); }
@media (max-width: 1100px) { .dossier-figure { position: relative; top: 0; } }
.equip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.equip-armor, .equip-hands { display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.slot .tiny { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hotbar { margin-top: var(--s4); display: flex; flex-direction: column; gap: 6px; }
.hotbar .hb { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; max-width: 420px; }
.hotbar .hb .item { --is: 100% !important; aspect-ratio: 1; height: auto; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--s4); background: rgba(18, 21, 20, 0.92); overflow: hidden; }
.stat-tile .ic { color: var(--accent); margin-bottom: 4px; }
.stat-tile .label { font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-dim); }
.stat-tile .value { font-size: 28px; color: var(--text); }
.weapon-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--s3); text-align: center; }
.weapon-podium .wp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 2px solid var(--line-strong); }
.weapon-podium .wp.p1 { border-color: var(--gold); padding-bottom: 22px; }
.weapon-podium .wp.p1 .item { border-color: rgba(224, 192, 98, 0.6); box-shadow: 0 0 22px rgba(224, 192, 98, 0.18); }
.weapon-podium .wp.p2 { padding-bottom: 14px; }
.dist.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s5); }
@media (max-width: 640px) { .dist.two-col { grid-template-columns: minmax(0, 1fr); } }
.skill { display: flex; gap: var(--s3); align-items: center; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--s2); }
.badge-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: var(--s3) var(--s2); border: 1px solid var(--line); color: var(--text-muted); background: rgba(10, 11, 10, 0.6);
  filter: grayscale(1); opacity: 0.55; transition: all var(--normal) var(--ease);
}
.badge-tile .bt-name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.badge-tile.earned { filter: none; opacity: 1; color: var(--text); border-color: rgba(224, 192, 98, 0.4); background: linear-gradient(180deg, rgba(224, 192, 98, 0.08), rgba(10, 11, 10, 0.6)); }
.badge-tile:hover { transform: translateY(-3px); opacity: 1; }
.link-wizard { display: flex; flex-direction: column; gap: var(--s3); max-width: 820px; }
.lw-step { position: relative; display: flex; gap: var(--s4); padding: var(--s5); border: 1px solid var(--line); background: var(--panel-a); opacity: 0.6; transition: opacity var(--slow) var(--ease), border-color var(--slow) var(--ease); }
.lw-step.active, .lw-step.waiting { opacity: 1; border-color: rgba(var(--a-rgb), 0.4); }
.lw-step.done { opacity: 1; }
.lw-step h3 { font-size: 18px; text-transform: uppercase; letter-spacing: var(--track-caps); margin-bottom: 6px; }
.lw-no { width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); font-size: 18px; color: var(--text-dim); }
.lw-step.active .lw-no, .lw-step.waiting .lw-no { border-color: var(--accent); color: var(--accent-bright); box-shadow: var(--glow); }
.lw-step.done .lw-no { background: var(--olive-deep); border-color: var(--accent-dim); color: var(--accent); }
.code-box { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s3) 0; }
.code-box .code { font-family: var(--mono); font-size: 42px; letter-spacing: 0.3em; color: var(--accent-bright); text-shadow: 0 0 18px rgba(var(--a-rgb), 0.35); }
.cmd { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0; padding: 6px 6px 6px var(--s3); background: var(--well); border: 1px solid #262923; }
.cmd code { flex: 1 1 auto; font-family: var(--mono); font-size: 18px; color: var(--text); }
.radar { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--accent-dim); margin: var(--s2) 0 var(--s3); overflow: hidden; background: radial-gradient(circle, rgba(var(--a-rgb), 0.1), transparent 70%); }
.radar::before, .radar::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(var(--a-rgb), 0.25); }
.radar::after { inset: 44%; background: var(--accent); }
.radar span { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(var(--a-rgb), 0.55), transparent 25%); animation: bv-sweep 2.2s linear infinite; }
:root[data-motion='off'] .radar span { animation: none; }
.demo-link { display: flex; flex-direction: column; gap: var(--s3); border-style: dashed; }

/* ================================================================= Anmeldung */
.auth-wrap { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100dvh - var(--topbar) - 140px); display: flex; align-items: center; justify-content: center; padding: var(--s6) var(--s4);
  border-radius: var(--r-xl); border: 1px solid var(--stroke); }
/* Hinter der Anmeldung eine unserer Szenen, ruhig und dunkel */
.auth-wrap::before { content: ''; position: absolute; inset: -6px; z-index: -2; background: var(--page-scene, none) center 50% / cover no-repeat; filter: blur(2px) saturate(0.9); transform: scale(1.04); }
.auth-wrap::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 50%, rgba(8, 9, 10, 0.55), rgba(8, 9, 10, 0.9)); }
@media (max-width: 900px) { .auth-wrap { border-radius: var(--r-lg); padding: var(--s5) var(--s3); } }
.auth-card { width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s5); }
.auth-card::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.auth-mark { display: flex; justify-content: center; }
.auth-mark img { filter: drop-shadow(0 0 18px rgba(var(--a-rgb), 0.4)); animation: bv-pop 0.6s var(--spring) both 0.1s; }
@keyframes bv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
:root[data-motion='off'] .auth-mark img { animation: none; }
.auth-title { font-size: 30px; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-alt { text-align: center; color: var(--text-dim); font-size: 15px; }
.form-error { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid rgba(196, 71, 58, 0.6); background: rgba(196, 71, 58, 0.1); color: #f0d5d0; font-size: 14px; }

/* ================================================================= Konto */
.account-top { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.plain-list { list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--text-dim); }
.plain-list li { position: relative; padding-left: 18px; }
.plain-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--accent); }

/* ================================================================= Leitstelle */
.kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ticket-board { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (max-width: 1000px) { .ticket-board { grid-template-columns: minmax(0, 1fr); } }
.tb-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - 260px); overflow: auto; padding-right: 4px; }
.tb-view { min-height: 520px; padding: 0; display: flex; flex-direction: column; }
.tb-conv { display: flex; flex-direction: column; height: calc(100dvh - 260px); min-height: 520px; }
.tb-head { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; padding: var(--s4); border-bottom: 1px solid var(--line); }
.tb-msgs { flex: 1 1 auto; overflow: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.tb-reply { border-top: 1px solid var(--line); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.note-input { border-color: rgba(208, 138, 46, 0.6); background: rgba(208, 138, 46, 0.05); }
.report { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); }

/* ================================================================= Kommandozentrale */
.proc-state { display: flex; gap: var(--s4); align-items: center; }
.proc-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(196, 71, 58, 0.15); flex: 0 0 auto; }
.proc-dot.on { background: var(--good); box-shadow: 0 0 0 4px rgba(127, 163, 90, 0.18), 0 0 18px rgba(127, 163, 90, 0.5); animation: bv-pulse 2s var(--ease-io) infinite; }
.proc-dot.wait { background: var(--warn); box-shadow: 0 0 0 4px rgba(208, 138, 46, 0.18); animation: bv-pulse 1s var(--ease-io) infinite; }
:root[data-motion='off'] .proc-dot { animation: none !important; }
.console {
  margin: 0; height: 420px; overflow: auto; padding: var(--s3);
  background: #050605; border: 1px solid #1d201b; color: #9fb58a;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.console .l-warn { color: #e0a060; }
.console .l-join { color: var(--khaki); }
.console .l-say { color: var(--accent-bright); }

/* ================================================================= Karte */
.map-page { position: relative; flex: 1 1 auto; min-height: calc(100dvh - var(--topbar)); }
@media (max-width: 900px) { .map-page { min-height: calc(100dvh - var(--topbar) - 64px); } }
.map-host { position: absolute; inset: 0; background: #0b0f10; }
.map-page .leaflet-container { background: #0b0f10; font-family: var(--font); }
.pixel-map { image-rendering: pixelated; }
.tiles-crisp .map-tiles { image-rendering: pixelated; }
/* Tageslicht live: Helligkeit/Saettigung der Kacheln, Toenung als eigene Ebene (multipliziert) */
.map-tiles, .pixel-map { filter: brightness(var(--map-b, 1)) saturate(var(--map-s, 1)); transition: filter 2s ease; }
.leaflet-tint-pane { mix-blend-mode: multiply; pointer-events: none; }
.map-backdrop { position: absolute; left: -60000px; top: -60000px; width: 120000px; height: 120000px; background: #0b0f10; pointer-events: none; }
.map-tint { position: absolute; left: -60000px; top: -60000px; width: 120000px; height: 120000px; opacity: 0; transition: opacity 2s ease, background-color 2s ease; }
.map-host::after { content: ''; position: absolute; inset: 0; z-index: 450; pointer-events: none; box-shadow: inset 0 0 160px 24px rgba(0, 0, 0, .5); }
.lg-light { width: 30px; height: 30px; display: grid; place-items: center; color: var(--acc2); flex: none; }
.lg-light.blood { color: #d0503f; }
.map-panel {
  position: absolute; z-index: 500; left: var(--s4); top: var(--s4); width: 290px; max-height: calc(100% - 32px); overflow: auto;
  display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
  background: var(--panel-a-strong); border: 1px solid var(--line-strong); box-shadow: var(--shadow-strong);
}
.map-panel.closed { width: auto; }
@media (max-width: 640px) { .map-panel { width: calc(100% - 32px); max-height: 46%; } }
.legend { display: flex; flex-direction: column; gap: 2px; }
.legend-item { display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s2); text-align: left; border: 1px solid transparent; color: var(--text); font-size: 14px; transition: all var(--normal) var(--ease); }
.legend-item:hover { border-color: var(--line); background: rgba(var(--a-rgb), 0.04); }
.legend-item.off { opacity: 0.4; }
.map-results { display: flex; flex-direction: column; border: 1px solid var(--line); }
.map-result { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.map-result:last-child { border-bottom: 0; }
.map-result:hover { background: rgba(var(--a-rgb), 0.06); }
.map-result .dot { width: 8px; height: 8px; transform: rotate(45deg); }
.map-result .tiny { margin-left: auto; }
.map-coords { position: absolute; z-index: 500; right: var(--s4); top: var(--s4); padding: 6px 10px; background: rgba(8, 9, 8, 0.85); border: 1px solid var(--line); font-size: 13px; color: var(--text); }
/* am Handy ist die offene Legende fast so breit wie die Karte - dann keine Koordinaten darüber */
@media (max-width: 640px) { .map-panel:not(.closed) ~ .map-coords { display: none; } }
.map-editbar { position: absolute; z-index: 500; left: 50%; top: var(--s4); transform: translateX(-50%); }
.map-marker-wrap { background: none; border: 0; }
.map-marker { position: relative; width: 44px; height: 58px; --mc: var(--accent); transition: transform 260ms var(--spring); transform-origin: 50% 93%; }
.map-marker .mk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-marker .mk-shadow { fill: rgba(0, 0, 0, 0.55); }
.map-marker .mk-stem { stroke: var(--mc); stroke-width: 1.5; opacity: 0.8; }
.map-marker .mk-foot { fill: var(--mc); }
.map-marker .mk-ring { fill: none; stroke: var(--mc); stroke-width: 1.2; opacity: 0; transform-origin: 22px 54px; }
:root.beat .map-marker.pulse .mk-ring { animation: bv-mk-ring 1.6s var(--ease) both; }
@keyframes bv-mk-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(4.2); opacity: 0; } }
:root[data-motion='off'] .map-marker.pulse .mk-ring { animation: none; }
.map-marker .mk-hex { fill: rgba(10, 11, 10, 0.92); stroke: var(--mc); stroke-width: 1.6; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mc) 55%, transparent)); transition: fill var(--normal) var(--ease); }
.map-marker .mk-hex-in { fill: none; stroke: color-mix(in srgb, var(--mc) 35%, transparent); stroke-width: 1; }
.map-marker .mk-ic { position: absolute; left: 13px; top: 13px; color: color-mix(in srgb, var(--mc) 88%, #fff); }
.map-marker:hover { transform: scale(1.18) translateY(-2px); }
.map-marker:hover .mk-hex { fill: color-mix(in srgb, var(--mc) 22%, rgba(10, 11, 10, 0.92)); }
.leaflet-marker-draggable .map-marker .mk-hex { stroke-dasharray: 4 3; }
.legend-item .hexi { margin: -2px 0; }
.legend-item.off .hexi { filter: grayscale(1); }
.lg-zone { width: 30px; height: 30px; flex: 0 0 auto; border: 1px dashed #7fa35a; background: rgba(127, 163, 90, 0.12); }
.leaflet-tooltip.map-tip { background: #0f110f; border: 1px solid var(--line-strong); color: var(--text); border-radius: 0; box-shadow: var(--shadow); font-size: 13px; padding: 4px 8px; }
.leaflet-tooltip.map-tip::before { display: none; }
.map-popup-wrap .leaflet-popup-content-wrapper { background: var(--panel-a-strong); color: var(--text); border-radius: 0; border: 1px solid var(--line-strong); box-shadow: var(--shadow-strong); }
.map-popup-wrap .leaflet-popup-tip { background: var(--panel-a-strong); border: 1px solid var(--line-strong); }
.map-popup-wrap .leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.5; }
.map-popup-wrap a.leaflet-popup-close-button { color: var(--text-dim); }
.map-popup .mp-kind { font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-caps); }
.map-popup .mp-title { font-size: 17px; margin: 2px 0; }
.map-popup .mp-coords { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.map-popup p { color: var(--text-dim); margin: 6px 0 10px; }
.leaflet-bar a { background: var(--panel-a-strong) !important; color: var(--text) !important; border-color: var(--line-strong) !important; border-radius: 0 !important; width: 40px !important; height: 40px !important; line-height: 40px !important; }
.leaflet-bar { border: 1px solid var(--line-strong) !important; border-radius: 0 !important; box-shadow: var(--shadow) !important; }
.leaflet-bar a:hover { background: var(--olive-deep) !important; }
.leaflet-control-zoom { margin-bottom: 96px !important; margin-right: 18px !important; }

/* ================================================================= Teamraenge, Rollen-Abzeichen */
.staff-ranks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.staff-rank { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid color-mix(in srgb, var(--rc) 40%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 12%, rgba(18, 21, 20, 0.92)), rgba(18, 21, 20, 0.92)); }
.role-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rc); }
.sb-user .role-badge { margin-left: auto; }

/* Hero: dritter Weg als Textverweis statt dritter Knopf (bleibt in einer Zeile) */
.hero .cta { align-items: center; }
.hero .story-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s3);
  font-size: 14px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-dim);
  transition: color var(--normal) var(--ease);
}
.hero .story-link .ic { --size: 18px; color: var(--icon); transition: transform var(--normal) var(--spring), color var(--normal) var(--ease); }
.hero .story-link:hover { color: var(--text); }
.hero .story-link:hover .ic { color: var(--accent-bright); transform: translateY(-1px) rotate(-6deg); }

/* "Veridia": ohne dunklen Schattenkasten, einmal ein heller Lichtstreif beim Laden */
.hero h1 .accent-word {
  text-shadow: none;
  background-image: linear-gradient(100deg, var(--accent-bright) 0%, var(--accent) 22%, var(--khaki) 40%,
    var(--accent) 56%, #f3efe6 64%, var(--accent) 72%, var(--khaki) 100%);
  background-size: 250% 100%;
  background-position: 0% 0;
}
:root[data-motion='on'] .hero h1 .accent-word { animation: bv-sheen 2.2s 1.1s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes bv-sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .accent-word { animation: none !important; } }
.hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.hero-sub .address { margin-top: 0; }

/* Zielrahmen am Signal "Veridia": rastet beim ersten Sichtbarwerden ein (home.js, .lock) */
.beacon-label .reticle {
  position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; pointer-events: none; opacity: 0;
  --rc: var(--danger);
  background:
    linear-gradient(var(--rc), var(--rc)) left top / 8px 1px no-repeat, linear-gradient(var(--rc), var(--rc)) left top / 1px 8px no-repeat,
    linear-gradient(var(--rc), var(--rc)) right top / 8px 1px no-repeat, linear-gradient(var(--rc), var(--rc)) right top / 1px 8px no-repeat,
    linear-gradient(var(--rc), var(--rc)) left bottom / 8px 1px no-repeat, linear-gradient(var(--rc), var(--rc)) left bottom / 1px 8px no-repeat,
    linear-gradient(var(--rc), var(--rc)) right bottom / 8px 1px no-repeat, linear-gradient(var(--rc), var(--rc)) right bottom / 1px 8px no-repeat;
  filter: drop-shadow(0 0 6px rgba(196, 71, 58, 0.6));
}
.beacon-label.lock .reticle { animation: bv-lock 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.beacon-label.lock .inner { animation: bv-type 640ms 520ms steps(18, end) both; }
.beacon-label.lock::before { animation: bv-wire 360ms 420ms var(--ease) both; }
@keyframes bv-lock {
  0% { opacity: 0; transform: scale(3.4) rotate(45deg); }
  45% { opacity: 1; transform: scale(0.86) rotate(0deg); }
  62% { transform: scale(1.12); }
  78% { transform: scale(0.96); }
  100% { opacity: 0.85; transform: scale(1); }
}
@keyframes bv-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bv-wire { from { transform: scaleX(0); transform-origin: 0 50%; } to { transform: scaleX(1); transform-origin: 0 50%; } }
.beacon-label.flip.lock::before { animation-name: bv-wire-l; }
@keyframes bv-wire-l { from { transform: scaleX(0); transform-origin: 100% 50%; } to { transform: scaleX(1); transform-origin: 100% 50%; } }
:root[data-motion='off'] .beacon-label .reticle { animation: none; opacity: 0.85; }
:root[data-motion='off'] .beacon-label .inner, :root[data-motion='off'] .beacon-label::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .beacon-label .reticle { animation: none !important; opacity: 0.85; }
  .beacon-label .inner, .beacon-label::before { animation: none !important; }
}

/* Karte: Marker fallen beim ersten Aufbau nacheinander ein (map.js, .drop) - "backwards", damit
   danach wieder die Hover-Bewegung gilt */
.map-marker.drop { animation: bv-mk-drop 700ms var(--d, 0ms) cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes bv-mk-drop {
  0% { transform: translateY(-34px) scale(0.55); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
:root[data-motion='off'] .map-marker.drop { animation: none; }
@media (prefers-reduced-motion: reduce) { .map-marker.drop { animation: none; } }

/* Shop: Vorteile nehmen den freien Platz, damit Kit-Knopf, Spielpreis und Preis in allen Karten auf
   einer Linie stehen */
.shop-card .sc-perks { flex: 1 1 auto; }

/* Server: "Verbinden" bleibt beim Scrollen durch die Funktionen stehen */
.sticky-card { position: sticky; top: calc(var(--topbar) + var(--s4)); align-self: start; }
@media (max-width: 1100px) { .sticky-card { position: static; } }

/* Server: die fünf Ränge als Leiter in einer Reihe (breite Schirme), verbunden durch eine Linie in
   den Rangfarben, die in den Lücken zwischen den Karten sichtbar ist */
@media (min-width: 1280px) {
  .rank-grid { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rank-grid .rank-top { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .rank-grid .rank-title { font-size: 21px; }
  .rank-grid::before {
    content: ''; position: absolute; left: 0; right: 0; top: 64px; height: 1px; z-index: -1;
    background: linear-gradient(90deg, #a9a69e, #8cc84b 25%, #45cfe0 50%, #e8b23a 75%, #b45cf0);
    opacity: 0.55; box-shadow: 0 0 8px rgba(var(--a-rgb), 0.35);
  }
}

/* Community: Markierung gleitet zum gewaehlten Thema (useSlide). .threads ist schon sticky und damit
   Bezugsrahmen der Markierung - kein position: relative (das verschoebe die Liste um "top"). */
.thread-mark {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; z-index: 2;
  border: 1px solid rgba(var(--a-rgb), 0.38);
  background: linear-gradient(90deg, rgba(var(--a-rgb), 0.12), rgba(var(--a-rgb), 0) 70%);
}
.thread-mark::before {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  background: var(--accent); box-shadow: 0 0 10px rgba(var(--a-rgb), 0.5);
}
.thread-mark[data-ready] {
  transition: transform 460ms cubic-bezier(0.22, 1.2, 0.36, 1), width 300ms var(--ease), height 300ms var(--ease), opacity var(--normal) var(--ease);
}
.threads .thread-item.active { border-color: var(--line); background: rgba(18, 21, 20, 0.82); }
.threads .thread-item.active::before { opacity: 0; }

/* Seitenkopf: Kennstrich zieht sich beim Aufbau auf, Abschnittslinien zeichnen sich */
:root[data-motion='on'] .page-head .kicker::before { animation: bv-dash 700ms 120ms var(--ease) both; transform-origin: 0 50%; }
@keyframes bv-dash { from { transform: scaleX(0); } to { transform: scaleX(1); } }
:root[data-motion='on'] .section-title .line { animation: bv-dash 900ms 200ms var(--ease) both; transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) { .page-head .kicker::before, .section-title .line { animation: none !important; } }

/* Siegertreppchen: Sockel wachsen 3 -> 2 -> 1, danach fallen Kopf, Name und Wert darauf; Platz 1
   mit Krone und Lichtkegel */
.podium-place > :not(.pp-block) { animation: bv-drop-in 640ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.podium-place.p3 > :not(.pp-block) { animation-delay: 560ms; }
.podium-place.p2 > :not(.pp-block) { animation-delay: 700ms; }
.podium-place.p1 > :not(.pp-block) { animation-delay: 860ms; }
@keyframes bv-drop-in { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
.podium-place.p1 { position: relative; }
.podium-place.p1::before {
  content: ''; position: absolute; left: 50%; top: -40px; width: 300px; height: calc(100% + 40px);
  transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 46% 44% at 50% 46%, rgba(224, 192, 98, 0.2), transparent 100%);
  animation: bv-fade 1.4s 1s var(--ease) backwards;
}
.pp-crown { color: var(--gold); filter: drop-shadow(0 0 10px rgba(224, 192, 98, 0.6)); margin-bottom: -2px; }
.pp-crown .ic { --size: 28px; }
:root[data-motion='off'] .podium-place > :not(.pp-block), :root[data-motion='off'] .podium-place.p1::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .podium-place > :not(.pp-block), .podium-place.p1::before { animation: none !important; } }

/* Online-Liste: wer neu dazukommt, gleitet herein (Zeilen sind je Spieler geschluesselt) */
:root[data-motion='on'] .players .player-row { animation: bv-fade-up 420ms var(--ease) both; }

/* Beschriftung an der Erde: auf schmalen Schirmen nur der Name (die Koordinaten passten nicht daneben) */
@media (max-width: 520px) { .beacon-label .inner span { display: none; } }

/* Geschichte: geneigte Briefe ragen auf dem Handy ueber den Rand - abschneiden statt seitlich
   scrollen lassen. "clip" (nicht hidden): kein eigener Scrollbereich, die Briefe kleben weiter. */
.letters { overflow-x: clip; overflow-clip-margin: 16px; }

/* "Veridia": Leuchten per text-shadow statt filter - der Filter legte eine eigene Ebene in Groesse des
   Wortes an, die vor der Erde als leicht dunkler Kasten zu sehen war. Bei durchsichtiger Schrift mit
   background-clip liegt der text-shadow hinter den Buchstaben. */
.hero h1 .accent-word { filter: none; text-shadow: 0 0 26px rgba(var(--a-rgb), 0.26); }

/* Oeffentliches Spielerprofil (pages/profile.js) */
.profile-bio { font-size: 16px; line-height: 1.65; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.stat-grid.tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .stat-grid.tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lb-name { color: var(--text); }
.lb-name:hover { color: var(--accent-bright); }

/* ================================================================= Gefechtsfunk (Killfeed, Startseite)
   Wie die Zeilen oben rechts im Spiel (KillfeedHud): Täter oder Todesart | Waffe/Icon | Opfer. Besondere
   Abschüsse (Bosse, Brutes ...) gold, eigene Tode rot, eigene Abschüsse oliv. Neue Zeilen gleiten herein. */
.killfeed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kf-row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 64px; gap: var(--s3); align-items: center;
  min-height: 42px; padding: 7px var(--s3) 7px calc(var(--s3) + 2px);
  background: rgba(22, 25, 24, 0.72); border: 1px solid var(--line);
}
.kf-row::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--line-strong); }
.kf-row.notable { background: linear-gradient(90deg, rgba(224, 192, 98, 0.1), rgba(22, 25, 24, 0.72) 60%); }
.kf-row.notable::before { background: var(--gold); box-shadow: 0 0 10px rgba(224, 192, 98, 0.6); }
.kf-row.me-killer::before { background: var(--accent); }
.kf-row.me-victim::before { background: var(--danger); }
.kf-row.fresh { animation: bv-kf-in 520ms var(--ease) both; }
.kf-row.fresh::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--accent); pointer-events: none; animation: bv-kf-flash 1.6s var(--ease) both; }
.kf-row.notable.fresh::after { border-color: var(--gold); }
.kf-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text); }
.kf-row > .kf-who:first-child { justify-content: flex-end; text-align: right; }
.kf-who .head { flex: none; }
.kf-who.player > .ic { color: var(--text-dim); flex: none; }
.kf-who.mob { color: var(--khaki); }
.kf-row.notable .kf-who.mob { color: var(--gold); }
.kf-who.cause { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-caps); }
.kf-how { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 22px; max-width: 150px; color: var(--accent); }
.kf-how img { flex: none; }
.kf-how .tiny { color: var(--khaki); }
.kf-row.notable .kf-how { color: var(--gold); }
.kf-row.me-victim .kf-how { color: var(--danger-text); }
.kf-at { text-align: right; white-space: nowrap; }
.kf-note { display: flex; align-items: center; gap: 6px; margin-top: var(--s3); }
@keyframes bv-kf-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes bv-kf-flash { from { opacity: 0.9; } to { opacity: 0; } }
/* Handy: Namen haben Vorrang - Waffe nur als Symbol, keine Zeitangabe, engere Abstände */
@media (max-width: 520px) {
  .kf-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 6px 8px 6px 10px; }
  .kf-at, .kf-how .tiny { display: none; }
  .kf-who { gap: 6px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .kf-row.fresh, .kf-row.fresh::after { animation: none; } }

/* ================================================================= Anticheat (Leitstelle)
   Wer fällt auf (Karten je Spieler) und die Meldungen. Stufe als fünf Striche wie ein Pegel. */
.ac-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.ac-filters .input { width: auto; min-width: 150px; }
.seg-chips { display: inline-flex; border: 1px solid var(--line); }
.seg-chips button {
  min-height: 34px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: rgba(22, 25, 24, 0.7);
  color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; transition: color var(--normal) var(--ease), background var(--normal) var(--ease);
}
.seg-chips button:last-child { border-right: 0; }
.seg-chips button:hover { color: var(--text); }
.seg-chips button.on { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, rgba(22, 25, 24, 0.7)); box-shadow: inset 0 -2px 0 var(--accent); }
.ac-player-chip { cursor: pointer; border: 1px solid currentColor; background: none; font: inherit; }
.ac-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s2); }
.ac-player {
  --tc: var(--text-dim);
  position: relative; display: flex; gap: var(--s3); align-items: center; text-align: left;
  padding: 10px 12px 10px 14px; border: 1px solid var(--line); background: rgba(22, 25, 24, 0.72); color: var(--text);
  font: inherit; cursor: pointer; transition: border-color var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.ac-player::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--tc); }
.ac-player:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ac-player.gold { --tc: var(--gold); } .ac-player.warn { --tc: var(--warn); } .ac-player.bad { --tc: var(--danger); }
.ac-level { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.ac-level i { display: block; width: 4px; background: var(--line-strong); }
.ac-level i:nth-child(1) { height: 4px; } .ac-level i:nth-child(2) { height: 6px; } .ac-level i:nth-child(3) { height: 8px; }
.ac-level i:nth-child(4) { height: 10px; } .ac-level i:nth-child(5) { height: 12px; }
.ac-level i.on { background: var(--text-dim); }
.ac-level.l3 i.on { background: var(--gold); } .ac-level.l4 i.on { background: var(--warn); } .ac-level.l5 i.on { background: var(--danger); }
.ac-table tr.fresh td { animation: bv-ac-in 1.6s var(--ease) both; }
@keyframes bv-ac-in { from { background: color-mix(in srgb, var(--warn) 18%, transparent); } to { background: transparent; } }
.linkish { padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.linkish:hover, .linkish:focus-visible { color: var(--accent); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ac-table tr.fresh td { animation: none; } .ac-player:hover { transform: none; } }

/* Täglicher Neustart (Startseite, Server-Seite) */
.daily-restart { display: flex; align-items: center; gap: 8px; margin-top: var(--s3); color: var(--text); }
.daily-restart > .ic { color: var(--warn); flex: none; }

/* Befehle im Spiel (Server-Seite): Befehl in Mono, daneben was er tut */
.commands { display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(18, 21, 20, 0.6); }
.command-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: var(--s4); align-items: baseline; padding: 10px var(--s4); border-bottom: 1px solid var(--line); }
.command-row:last-child { border-bottom: 0; }
.command-row .cmd { font-family: var(--mono); font-size: 14px; color: var(--accent); white-space: nowrap; background: none; border: 0; padding: 0; }
@media (max-width: 640px) { .command-row { grid-template-columns: 1fr; gap: 4px; } .command-row .cmd { white-space: normal; overflow-wrap: anywhere; } }

/* Sektor-Raster der Karte (wie die Ansagen im Spiel: "Sektor C4") */
.lg-grid {
  width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid rgba(var(--a-rgb), 0.45);
  background-image: linear-gradient(rgba(var(--a-rgb), 0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--a-rgb), 0.45) 1px, transparent 1px);
  background-size: 10px 10px; background-position: -1px -1px;
}
.leaflet-marker-icon.sector-label {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(var(--a-rgb), 0.55);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9); pointer-events: none; background: none; border: 0;
}
.sector-flash { animation: bv-sector-flash 2.6s var(--ease) both; }
@keyframes bv-sector-flash { 0%, 20% { stroke-opacity: 1; fill-opacity: 0.18; } 100% { stroke-opacity: 0; fill-opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sector-flash { animation: none; } }

/* Spielen: im Launcher Installieren und Starten, auf der Website der Download */
.play-page { display: flex; flex-direction: column; gap: var(--s5); padding-bottom: 88px; } /* Platz für den Support-Knopf unten rechts */
.play-hero { padding: var(--s5) 0 var(--s3); max-width: 760px; }
.play-hero h1 { font-size: clamp(30px, 5vw, 52px); text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 10px; }
.play-actions { gap: var(--s3); align-items: center; margin-top: var(--s4); }
.play-btn { min-width: 260px; min-height: 58px; font-size: 18px; letter-spacing: .18em; justify-content: center; }
.play-error { display: flex; gap: 8px; align-items: center; color: var(--bad, #c4473a); margin-top: var(--s3); }
.play-progress { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s4); max-width: 560px; }
.play-grid .between { justify-content: space-between; align-items: center; gap: 12px; }
a.play-btn { text-decoration: none; }
.play-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; color: var(--text-dim); }
.play-steps b { color: var(--text); font-weight: 600; }
.play-steps li::marker { color: var(--accent); font-weight: 600; }
.play-update { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); max-width: 900px; border: 1px solid var(--accent-a40); background: var(--olive-deep); }
.play-update > .ic { color: var(--accent-bright); flex: none; }
.play-update .play-error { margin-top: 0; }
.play-update-note { display: flex; gap: 6px; align-items: center; margin: 0; }
.play-manual { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); padding: var(--s3) var(--s4); max-width: 760px; border: 1px solid rgba(208, 138, 46, .45); background: rgba(208, 138, 46, .06); }
.play-manual > .row > .ic { color: var(--warn); }
.play-foreign { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); padding: var(--s3) var(--s4); max-width: 760px; border: 1px solid rgba(196, 71, 58, .55); background: rgba(196, 71, 58, .08); }
.play-foreign > .row > .ic { color: var(--bad, #c4473a); }
.play-foreign-list { margin: 0; padding-left: 18px; }
@media (max-width: 640px) { .play-update { flex-wrap: wrap; } }

/* --- Konto per Code aus dem Spiel, Sicherheit, Team (05.10.2026) --- */
.auth-steps, .plain-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); }
.auth-steps code, .plain-steps code, .account-notice code { font-family: var(--mono); color: var(--accent-bright); }
.code-input { letter-spacing: 0.2em; text-transform: uppercase; }
.account-notice { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s5); border-bottom: 1px solid rgba(var(--a-rgb), 0.35); background: rgba(var(--a-rgb), 0.08); font-size: 15px; }
.account-notice.warn { border-bottom-color: rgba(214, 164, 72, 0.5); background: rgba(214, 164, 72, 0.1); }
.account-notice > .ic { color: var(--accent); flex: 0 0 auto; }
.account-notice.warn > .ic { color: var(--warn); }
.stat-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: var(--s3) 0; }
.stat-trio > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s3); border: 1px solid var(--line); background: var(--panel-a); }
.stat-trio .k { font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-dim); }
.stat-trio b { font-size: 24px; color: var(--text); }
.recovery { gap: var(--s3); }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s4); padding: var(--s3); background: var(--well); border: 1px solid #262923; font-family: var(--mono); font-size: 16px; }
.sessions li::before { display: none; }
.sessions li { padding-left: 0; }
@media (max-width: 640px) {
  .account-notice { flex-wrap: wrap; padding: 10px var(--s4); }
  .stat-trio { grid-template-columns: 1fr; }
  .recovery-grid { grid-template-columns: 1fr; }
}

/* --- Rechtliches: Impressum, Datenschutz, Regeln (05.10.2026) --- */
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.legal-nav a { padding: 6px 14px; border: 1px solid var(--line); color: var(--text-dim); text-decoration: none; text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 13px; }
.legal-nav a.active, .legal-nav a:hover { border-color: var(--accent); color: var(--accent-bright); }
.legal { max-width: 880px; padding: var(--s6) var(--s6); line-height: 1.6; }
.legal h2 { font-size: 20px; text-transform: uppercase; letter-spacing: var(--track-caps); margin: var(--s6) 0 var(--s2); color: var(--text); }
.legal h2:first-of-type { margin-top: var(--s3); }
.legal h3 { font-size: 16px; margin: var(--s4) 0 var(--s1); color: var(--accent-bright); }
.legal p { margin: 0 0 var(--s3); color: var(--text-dim); }
.legal p b, .legal li b { color: var(--text); }
.legal code { font-family: var(--mono); color: var(--accent-bright); }
.legal a { color: var(--accent-bright); }
.legal .plain-list { margin: 0 0 var(--s3); }
.legal-missing { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px dashed rgba(214, 164, 72, 0.7); color: var(--warn); font-size: 13px; }
.rules-list { margin: 0 0 var(--s4); padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--text-dim); }
.rules-list b { color: var(--text); }
/* Mods & Lizenzen: Liste statt Tabelle, damit sie auch am Handy lesbar bleibt */
.legal.legal-wide { max-width: 1040px; }
.lic-list { list-style: none; margin: 0 0 var(--s4); padding: 0; border-top: 1px solid var(--line); }
.lic-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4px var(--s4); padding: 10px 0; border-bottom: 1px solid var(--line); }
.lic-main { min-width: 0; overflow-wrap: anywhere; }
.lic-main b { color: var(--text); }
.lic-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px; color: var(--text-dim); min-width: 0; }
.lic-license { color: var(--text); font-family: var(--mono); font-size: 13px; }
@media (max-width: 640px) { .legal { padding: var(--s4); } .lic-row { grid-template-columns: 1fr; } }

/* ================================================================= P6: Einstieg, einfache Erde, Kurzfassung Datenschutz */
/* "In drei Schritten nach Veridia" (Startseite, nur Gäste) */
.first-steps { margin: var(--s6) 0 var(--s5); }
.first-steps .fs-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s4); }
.first-steps .fs-head h2 { font-size: 26px; text-transform: uppercase; letter-spacing: 0.06em; }
.fs-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); counter-reset: none; }
.fs-step {
  position: relative; display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start;
  padding: var(--s5); background: var(--panel-a); border: 1px solid var(--line); min-width: 0;
  transition: border-color var(--normal) var(--ease), transform var(--slow) var(--ease);
}
.fs-step:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.fs-step b { font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.fs-step .btn { margin-top: auto; }
.fs-step .fs-n { position: absolute; right: var(--s4); top: var(--s3); font-size: 40px; line-height: 1; color: var(--line-strong); }
.fs-step .fs-ico { color: var(--accent); --size: 22px; }
.fs-step::after { content: ''; position: absolute; left: -1px; top: -1px; width: 22px; height: 2px; background: var(--accent); }
@media (max-width: 900px) { .fs-list { grid-template-columns: minmax(0, 1fr); } }

/* Server-Seite: ohne öffentliche Adresse ein Hinweis statt des Adressfelds */
.join-note { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); background: rgba(8, 9, 8, 0.85); }
.join-note .ic, .join-note svg { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }

/* Ohne 3D: Kopf statt Figur, gezeichnete Erde statt three.js */
.skin-flat { display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, rgba(var(--a-rgb), 0.12), transparent 62%); }
.flat-globe { position: absolute; inset: 0; animation: fg-in 900ms var(--ease) both; }
.flat-globe canvas { position: absolute; inset: 0; }
@keyframes fg-in { from { opacity: 0; transform: scale(0.96); } }
.fg-beacon { position: absolute; width: 0; height: 0; }
.fg-beacon i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 12px rgba(196, 71, 58, 0.9); }
.fg-beacon i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--danger); animation: fg-ping 2.4s var(--ease) infinite; }
.fg-beacon b { position: absolute; left: 14px; top: -22px; padding: 4px 10px 4px 10px; border-left: 2px solid var(--danger); background: linear-gradient(90deg, rgba(20, 10, 9, 0.85), rgba(20, 10, 9, 0)); font-weight: 500; font-size: 12px; letter-spacing: var(--track-wide); color: #f0d5d0; white-space: nowrap; }
@keyframes fg-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
:root[data-motion='off'] .fg-beacon i::after, :root[data-motion='off'] .flat-globe { animation: none; }
@media (prefers-reduced-motion: reduce) { .fg-beacon i::after, .flat-globe { animation: none; } }

/* "Was wir speichern" */
.datashort { display: flex; flex-direction: column; gap: var(--s4); max-width: 1080px; }
.ds-lead { font-size: 18px; max-width: 70ch; margin: 0 0 var(--s2); }
.ds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.datashort h2 { display: flex; align-items: center; gap: var(--s2); font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--s4); }
.ds-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.ds-col li { display: flex; gap: var(--s3); align-items: flex-start; }
.ds-col li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-col li b { font-weight: 500; }
.ds-col .ds-ico { flex: 0 0 auto; margin-top: 2px; color: var(--icon); }
.ds-col.keep h2 svg, .ds-col.keep .ds-ico { color: var(--accent); }
.ds-col.never h2 svg { color: var(--danger); }
.ds-col.never li b { color: var(--text); }
.ds-col.never .ds-ico { color: var(--text-dim); }
.ds-col.never { background: linear-gradient(160deg, rgba(196, 71, 58, 0.06), var(--panel-a) 55%); }
.ds-col.keep { background: linear-gradient(160deg, rgba(var(--a-rgb), 0.07), var(--panel-a) 55%); }
.ds-times dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.ds-row { display: flex; justify-content: space-between; gap: var(--s4); padding: 10px 0; border-bottom: 1px solid var(--line); }
.ds-row dt { color: var(--text-dim); }
.ds-row dd { margin: 0; text-align: right; }
.ds-cta { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; border-color: var(--line-strong); }
.ds-cta h2 { margin-bottom: 0; }
@media (max-width: 860px) { .ds-grid, .ds-times dl { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================= Overhaul 06.10.2026: Seiten-Bausteine rund wie im Launcher */
.hero-kpis, .stat-grid, .kpi-row, .commands, .map-results, .seg-chips, .console, .map-panel { border-radius: var(--r); overflow: hidden; }
.address, .event, .announce, .feature, .rank-card, .thread-item, .hidden-note, .demo-banner, .shop-card, .inbox-item, .badge-tile,
.lw-step, .cmd, .form-error, .staff-rank, .kf-row, .ac-player, .play-update, .play-manual, .play-foreign, .stat-trio > div,
.recovery-grid, .fs-step, .join-note, .letter, .act, .map-coords, .legend-item { border-radius: var(--r); }
.steps .n, .lw-no, .sc-icon, .rail-dot, .thread-mark, .lg-grid, .lg-zone { border-radius: 12px; }
.podium-place .pp-block { border-radius: var(--r) var(--r) 0 0; }
.legal-nav a, .ac-player-chip, .hero .live-badge, .legal-missing { border-radius: var(--r-pill); }
.scroll-cue span:first-child { border-radius: 12px; }
.feature, .event, .inbox-item, .badge-tile, .thread-item, .rank-card, .shop-card, .lw-step, .fs-step, .kf-row {
  transition: border-color var(--normal) var(--ease), background-color var(--normal) var(--ease), transform 0.35s var(--spring);
}
.feature:hover, .inbox-item:hover, .badge-tile:hover, .thread-item:hover, .rank-card:hover, .shop-card:hover { transform: translateY(-2px); border-color: var(--stroke3); }
.steps .n, .lw-no { background: linear-gradient(180deg, color-mix(in srgb, var(--a) 90%, white 10%), var(--a2)); color: var(--on-a); border-color: transparent; box-shadow: 0 4px 14px rgba(var(--a-rgb), 0.3); }

/* Spielen (Website): Kopf mit Szene, Schritte als Zettel, kurze ehrliche Punkte */
.play-head { min-height: 300px; }
.play-head .play-actions { margin-top: var(--s4); gap: var(--s3); }
.play-head .play-btn { min-height: 60px; padding: 0 28px; font-size: 17px; border-radius: var(--r); }
.play-head .play-btn .ic { --size: 22px; }
.play-head .pill { background: rgba(8, 10, 9, 0.7); }
@media (max-width: 640px) { .play-head .pill { height: auto; min-height: 34px; padding: 7px 14px; white-space: normal; line-height: 1.35; } }
.play-req .row { gap: var(--s3); }
.play-req .row > span:last-child { text-align: right; }
.play-page { display: flex; flex-direction: column; gap: var(--s5); }
.play-page .steps3 { margin: var(--s2) 0; }
.play-facts { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.play-facts li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-dim); }
.play-facts li .ic { color: var(--good); margin-top: 3px; }
.play-sum { margin-top: var(--s4); }
.play-sum summary { cursor: pointer; }

/* Nachrichten: nach Tagen gruppiert, Art als farbiger Punkt, kompakte Zeilen */
.inbox-day { margin: var(--s4) 0 6px; font-size: 11.5px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-muted); }
.inbox-day:first-child { margin-top: 0; }
.mx { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r);
  border: 1px solid transparent; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.mx + .mx { margin-top: 2px; }
.mx:hover { background: rgba(255, 255, 255, 0.035); border-color: var(--stroke); }
.mx.unread { background: rgba(var(--a-rgb), 0.06); border-color: rgba(var(--a-rgb), 0.22); }
.mx .mx-ico { --kc: var(--a); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--kc);
  background: color-mix(in srgb, var(--kc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--kc) 35%, transparent); }
.mx:not(.unread) .mx-ico { filter: saturate(0.5); opacity: 0.8; }
.mx .mx-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text); text-decoration: none; }
.mx .mx-main:hover { color: var(--text); }
.mx .mx-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx.unread .mx-title { font-weight: 600; }
.mx .mx-body { font-size: 13.5px; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx .mx-side { display: flex; align-items: center; gap: 2px; }
.mx .mx-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; margin-right: 6px; }
.mx .mx-act { opacity: 0; transition: opacity var(--fast) var(--ease); }
.mx:hover .mx-act, .mx:focus-within .mx-act { opacity: 1; }
@media (hover: none) { .mx .mx-act { opacity: 1; } }
/* Am Handy Zeit und Knöpfe unter den Text - nebeneinander blieben vom Text nur ein paar Buchstaben */
@media (max-width: 560px) {
  .mx { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: 'ico main' 'ico side'; row-gap: 2px; }
  .mx .mx-ico { grid-area: ico; align-self: start; }
  .mx .mx-main { grid-area: main; }
  .mx .mx-side { grid-area: side; justify-content: space-between; }
}
.inbox-tickets { position: sticky; top: calc(var(--topbar) + 16px); }