/* VirginCraft – Minecraft-Stil: Original-Texturen (vom Server unter /mc/… aus der Minecraft-Datei),
   Original-Schrift, Inventar-Panels, Buttons wie im Spiel, Chat-Ereignisse. */

/* Original-Minecraft-Schrift: der Server baut sie aus den Pixelbildern der Minecraft-Datei.
   Schriftgrößen am besten in Vielfachen von 8px (16, 24, 32 …), dann ist jeder Pixel scharf. */
@font-face { font-family: "Minecraft"; src: url(/mc/font/regular.ttf) format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Minecraft"; src: url(/mc/font/bold.ttf) format("truetype"); font-weight: 600 900; font-display: swap; }

:root {
  --text: #ffffff;
  --text-gray: #aaaaaa;
  --shadow: #3f3f3f;
  --panel: #c6c6c6;
  --panel-text: #3f3f3f;
  --panel-muted: #5a5a5a;
  --slot: #8b8b8b;
  --green: #55ff55;
  --red: #ff5555;
  --yellow: #ffff55;
  --gold: #ffaa00;
  --aqua: #55ffff;
  --purple: #aa00aa;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --nav-h: 58px;
  --px: 3px; /* ein "Minecraft-Pixel" */
  --font: "Minecraft", "Pixelify Sans", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  color: var(--text);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: none; /* Pixelkanten nicht weichzeichnen (macOS) */
  font-smooth: never;
  image-rendering: pixelated; /* alle Bilder (Skins, Items, Blöcke) scharf statt verwaschen */
  background-color: #1b140f;
  background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url(/mc/block/dirt.png);
  background-size: auto, 64px 64px;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.muted { color: var(--text-gray); font-weight: 400; }
.small { font-size: 16px; }
.dot { width: 10px; height: 10px; background: var(--green); display: inline-block; flex: none; box-shadow: 2px 2px 0 #153f15; }
.dot.off { background: var(--red); box-shadow: 2px 2px 0 #3f1515; }
.sh, h1, h2, h3, .lead, .nav, .mc-btn, .title-sub, .foot { text-shadow: 2px 2px 0 var(--shadow); }
img.ico { width: 24px; height: 24px; flex: none; vertical-align: middle; }

/* ---------- Bausteine: Button, Textfeld, Panel, Slot ---------- */
.mc-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px; cursor: pointer; white-space: nowrap; user-select: none;
  color: #fff; font-weight: 500;
  background: #727272; border: 2px solid #000; /* Ersatz, falls die Textur fehlt */
  border-image: url(/mc/gui/sprites/widget/button.png) 3 fill / 6px / 0 stretch;
  transition: transform 0.08s ease-out;
}
.mc-btn:hover, .mc-btn:focus-visible { border-image-source: url(/mc/gui/sprites/widget/button_highlighted.png); color: #ffffa0; outline: none; }
.mc-btn.active { border-image-source: url(/mc/gui/sprites/widget/button_highlighted.png); color: var(--yellow); }
.mc-btn:active { transform: translateY(1px); }
.mc-btn span { color: var(--text-gray); }
.mc-btn.active span, .mc-btn:hover span { color: inherit; opacity: 0.8; }

.mc-field {
  display: flex; align-items: center; height: 40px; padding: 0 12px;
  background: #000; border: 2px solid #a0a0a0;
}
.mc-field:focus-within { border-color: #fff; }
.mc-field input { border: 0; outline: 0; background: none; width: 100%; font-size: 16px; color: #e0e0e0; }
.mc-field input::placeholder { color: #707070; }

.mc-panel {
  background: var(--panel); color: var(--panel-text); text-shadow: none;
  box-shadow:
    inset var(--px) var(--px) 0 #ffffff,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #555555,
    0 0 0 var(--px) #000000;
  border-radius: 2px;
}
.mc-slot {
  background: var(--slot);
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #ffffff;
}
.mc-tooltip { /* dunkles, halbdurchsichtiges Kästchen wie hinter dem Chat */
  background: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 0 0 2px rgba(0, 0, 0, 0.6);
}

/* ---------- Navigationsleiste ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 2px solid #000; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06);
}
.nav-inner { max-width: 1180px; height: 100%; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 24px; }
.brand img { box-shadow: 0 0 0 2px #000; }
.tabs { display: flex; gap: 6px; }
.tabs .mc-btn { min-height: 36px; padding: 0 16px; }
.status {
  margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 16px; white-space: nowrap;
  background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

/* ---------- Titelbildschirm (3D) ---------- */
.title-screen {
  position: relative; height: min(76vh, 640px); min-height: 480px; overflow: hidden;
  background: linear-gradient(#78a7ff, #c4dcff 70%, #e8f1ff); /* Ersatz ohne WebGL/Panorama */
  border-bottom: 2px solid #000;
}
.title-screen::after { /* Lesbarkeit links + weicher Übergang nach unten */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 45%, transparent 65%),
    linear-gradient(transparent 70%, rgba(0, 0, 0, 0.55));
}
.island {
  position: absolute; inset: 0; cursor: grab; touch-action: pan-y;
  opacity: 0; transition: opacity 0.8s var(--ease);
}
.island.ready { opacity: 1; }
.island.grabbing { cursor: grabbing; }
.island-canvas { display: block; width: 100%; height: 100%; }
.title-inner {
  position: relative; z-index: 1; height: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  pointer-events: none;
}
.title-inner a { pointer-events: auto; }
.logo {
  position: relative; margin: 0; line-height: 0.95; font-weight: 700;
  font-size: 96px; letter-spacing: 0.02em;
  display: flex; flex-direction: column;
  text-shadow: none;
  /* Stein-Textur in der Schrift, darunter mehrere Schatten = 3D-Kante wie beim Minecraft-Logo */
  color: #b9b9b9;
  background: url(/mc/block/stone.png) 0 0 / 0.42em 0.42em;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #1c1c1c;
  filter:
    drop-shadow(0 3px 0 #4a4a4a) drop-shadow(0 3px 0 #333) drop-shadow(0 3px 0 #222)
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}
.logo span:last-child { margin-left: 0.6em; }
.splash {
  position: relative; align-self: flex-start; margin: -1.5em 0 0 380px;
  color: var(--yellow); font-size: 24px; font-weight: 600; white-space: nowrap;
  text-shadow: 2px 2px 0 #3f3f00;
  transform: rotate(-17deg); transform-origin: left center;
  animation: splash 0.9s ease-in-out infinite alternate;
}
@keyframes splash { from { scale: 1; } to { scale: 1.08; } }
.title-sub { margin: 26px 0 18px; font-size: 16px; color: #e8e8e8; }
.title-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(400px, 100%); }
.title-buttons .wide { grid-column: 1 / -1; }
.title-buttons .mc-btn { min-height: 44px; font-size: 16px; }
.island-hint {
  position: absolute; right: 18px; bottom: 14px; z-index: 1; pointer-events: none;
  padding: 4px 10px; font-size: 16px; color: #ddd;
  background: rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 0 #000;
}
html.no-3d .island, html.no-3d .island-hint { display: none; }
html.no-3d .title-screen { background: url(/mc/gui/title/background/panorama_0.png) center / cover; }
body.on-map .title-screen { display: none; }

/* ---------- Seitenkopf ---------- */
.page-head { padding: 54px 0 26px; }
.page-title { margin: 0; font-size: 48px; line-height: 1.05; font-weight: 700; }
.lead { margin: 10px 0 0; font-size: 16px; color: var(--text-gray); }
.status-line { display: flex; align-items: center; gap: 10px; }

/* ---------- Werkzeugleiste ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 34px; }
.search { flex: 1 1 260px; max-width: 380px; }
.select { padding: 0 8px 0 4px; }
.select select { appearance: none; -webkit-appearance: none; background: none; border: 0; outline: 0; cursor: pointer; padding: 0 22px 0 10px; text-shadow: inherit; }
.select::after { content: "▼"; position: absolute; right: 12px; font-size: 0.625rem; pointer-events: none; }
.select option { background: #1e1e1e; color: #fff; }
.segmented { display: inline-flex; gap: 6px; margin-left: auto; }
.seg-thumb { display: none; }

/* ---------- Spieler-Karten (Inventar-Optik) ---------- */
.list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.list-head h3 { margin: 0; font-size: 24px; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px; }
.card {
  position: relative; cursor: pointer; outline: none; padding: 9px;
  animation: appear 0.5s var(--ease) both;
}
.card:hover, .card:focus-visible {
  --lift: -6px;
  box-shadow: inset var(--px) var(--px) 0 #fff, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #555,
    0 0 0 var(--px) #fff, 0 14px 0 -4px rgba(0, 0, 0, 0.35);
}
.card:active { --press: 0.98; }
.card .skin {
  position: relative; height: 236px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(60% 45% at 50% 95%, rgba(255, 255, 255, 0.08), transparent 70%), linear-gradient(#3a3a3a, #111);
  box-shadow: inset 3px 3px 0 #373737, inset -3px -3px 0 #ffffff;
  transform-style: preserve-3d;
}
.card .skin img {
  height: 196px; margin-bottom: 16px;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.35));
  transform: translateZ(36px); transition: opacity 0.3s var(--ease);
}
.card .skin .skin-3d {
  position: absolute; inset: 3px; width: calc(100% - 6px) !important; height: calc(100% - 6px) !important;
  opacity: 0; transform: translateZ(36px); transition: opacity 0.3s var(--ease); pointer-events: none;
}
.card .skin.live img { opacity: 0; }
.card .skin.live .skin-3d { opacity: 1; }
.pill {
  position: absolute; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 16px; font-weight: 600; text-shadow: 1px 1px 0 #000;
  background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  transform: translateZ(48px);
}
.pill.left { left: 10px; color: var(--green); }
.pill.right { right: 10px; color: var(--gold); }
.pill .dot { width: 8px; height: 8px; box-shadow: none; animation: blink 1.6s steps(2, jump-none) infinite; }
.card .info { padding: 12px 6px 4px; transform: translateZ(18px); }
.card .name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta { display: flex; gap: 14px; margin-top: 4px; font-size: 16px; color: var(--panel-muted); }
.card .meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card .meta img.ico { width: 18px; height: 18px; }
.empty { text-align: center; color: var(--text-gray); padding: 64px 0; font-size: 16px; }

/* ---------- Stats ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tile { display: flex; align-items: center; gap: 14px; padding: 16px; animation: appear 0.5s var(--ease) both; }
.tile .slot { width: 54px; height: 54px; display: grid; place-items: center; flex: none; transform: translateZ(20px); }
.tile .slot img.ico { width: 36px; height: 36px; }
.tile .label { font-size: 16px; color: var(--panel-muted); }
.tile .value { margin-top: 4px; font-size: 24px; line-height: 1.1; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; transform: translateZ(24px); }
.tile .value small { font-size: 16px; font-weight: 600; color: var(--panel-muted); margin: 0 4px 0 2px; }
.section { margin: 60px 0 20px; font-size: 32px; font-weight: 700; }
.section .muted { font-weight: 500; }

.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dim { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
.dim .title { font-size: 24px; font-weight: 700; }
.dim .state { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 9px; font-size: 16px; font-weight: 600; background: rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 0 #000; }
.dim.open .state { color: var(--green); }
.dim.locked .state { color: var(--red); }
.dim .count { margin-left: auto; text-align: right; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: #8b0000; }
.dim .count small { display: block; font-size: 16px; font-weight: 400; color: var(--panel-muted); margin-top: 2px; }

.online-list { display: flex; flex-wrap: wrap; gap: 12px; }
.chip-player {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; font-size: 16px;
  background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08); text-shadow: 2px 2px 0 #000;
}
.chip-player img { width: 28px; height: 28px; }
.online-list .empty-note { color: var(--text-gray); }

/* Ereignisse als Chat */
.events { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: rgba(0, 0, 0, 0.45); max-width: 900px; }
.event { display: flex; align-items: center; gap: 10px; padding: 4px 6px; font-size: 16px; line-height: 1.35; text-shadow: 2px 2px 0 #3f3f3f; }
.event:hover { background: rgba(255, 255, 255, 0.06); }
.event img { width: 20px; height: 20px; flex: none; }
.event .txt b { font-weight: 500; }
.event .tag { color: var(--green); text-shadow: 2px 2px 0 #153f15; }
.event .when { margin-left: auto; padding-left: 12px; color: #8a8a8a; font-size: 16px; white-space: nowrap; text-shadow: none; }
.events .empty-note { color: var(--text-gray); padding: 4px 6px; }

.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 60px 0 20px; }
.section-head .section { margin: 0; }
.board-cats { margin-left: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.board-cats::-webkit-scrollbar { display: none; }
.board-cats .mc-btn { min-height: 36px; padding: 0 14px; }
.boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.board { padding: 18px 18px 10px; animation: appear 0.4s var(--ease) both; }
.board h3 { margin: 0; font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 10px; text-shadow: none; }
.board h3 img.ico { width: 28px; height: 28px; }
.board .desc { margin: 2px 0 12px; color: var(--panel-muted); font-size: 16px; }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 2px solid #a8a8a8; font-size: 16px; }
.board .pos { width: 22px; text-align: center; color: var(--panel-muted); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.board li:nth-child(1) .pos { color: #b07800; }
.board li:nth-child(2) .pos { color: #6f7b86; }
.board li:nth-child(3) .pos { color: #8a5a2b; }
.board li img { width: 22px; height: 22px; flex: none; }
.board .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board .none { color: var(--panel-muted); padding: 8px 4px; border-top: 2px solid #a8a8a8; }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: 80px; padding: 20px 0 40px; border-top: 2px solid rgba(255, 255, 255, 0.12);
  font-size: 16px; color: var(--text-gray);
}

/* ---------- 3D: Kippen zur Maus ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(1000px) translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--press, 1));
  transition: transform 0.6s var(--ease), box-shadow 0.2s ease-out;
  will-change: transform;
}
[data-tilt].tilting { transition: transform 0.12s ease-out, box-shadow 0.2s ease-out; }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.28), transparent 45%);
  opacity: 0; transition: opacity 0.4s var(--ease); mix-blend-mode: soft-light;
}
[data-tilt].tilting::after { opacity: 1; }
.tile, .board, .dim { position: relative; }

/* ---------- 3D: Würfel für Nether und End (Original-Texturen) ---------- */
.cube-wrap { width: 72px; height: 72px; perspective: 400px; flex: none; transform: translateZ(30px); }
.cube { position: relative; width: 48px; height: 48px; margin: 12px; transform-style: preserve-3d; animation: cube-spin 14s linear infinite; }
.cube i { position: absolute; inset: 0; background-size: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.cube i:nth-child(1) { transform: translateZ(24px); }
.cube i:nth-child(2) { transform: rotateY(180deg) translateZ(24px); filter: brightness(0.8); }
.cube i:nth-child(3) { transform: rotateY(90deg) translateZ(24px); filter: brightness(0.86); }
.cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(24px); filter: brightness(0.86); }
.cube i:nth-child(5) { transform: rotateX(90deg) translateZ(24px); filter: brightness(1.12); }
.cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(24px); filter: brightness(0.6); }
.cube-nether i { background-image: url(/mc/block/netherrack.png), var(--tex-nether); }
.cube-end i { background-image: url(/mc/block/end_stone.png), var(--tex-end); }
.dim.locked .cube { animation-duration: 40s; }
@keyframes cube-spin { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }

/* ---------- Spieler-Fenster (Inventar) ---------- */
.player-dialog { padding: 0; border: 0; background: none; color: var(--panel-text); max-width: min(880px, calc(100vw - 32px)); width: 100%; overflow: visible; }
.player-dialog::backdrop { background: rgba(0, 0, 0, 0.6); animation: fade 0.25s ease-out both; }
.player-dialog.closing::backdrop { animation: fade 0.2s ease-out reverse both; }
.pd-sheet { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; padding: 14px; animation: sheet-in 0.35s var(--ease) both; }
.player-dialog.closing .pd-sheet { animation: sheet-out 0.2s ease-in both; }
@keyframes sheet-in { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.95) translateY(6px); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.pd-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; cursor: pointer;
  color: #fff; font-size: 16px; text-shadow: 2px 2px 0 #3f3f3f;
  background: #727272; border: 2px solid #000;
  border-image: url(/mc/gui/sprites/widget/button.png) 3 fill / 6px / 0 stretch;
}
.pd-close:hover { border-image-source: url(/mc/gui/sprites/widget/button_highlighted.png); color: #ffffa0; }
.pd-stage {
  position: sticky; top: 0; align-self: start; height: min(520px, calc(100dvh - 60px)); min-height: 340px; display: flex; align-items: flex-end; justify-content: center; cursor: grab;
  background: radial-gradient(55% 40% at 50% 92%, rgba(255, 255, 255, 0.08), transparent 70%), linear-gradient(#3a3a3a, #0c0c0c);
  box-shadow: inset 3px 3px 0 #373737, inset -3px -3px 0 #ffffff;
}
.pd-stage:active { cursor: grabbing; }
.pd-stage img { height: 320px; margin-bottom: 44px; filter: drop-shadow(0 12px 0 rgba(0, 0, 0, 0.35)); transition: opacity 0.3s var(--ease); }
.pd-stage .skin-3d { position: absolute; inset: 3px; width: calc(100% - 6px) !important; height: calc(100% - 6px) !important; opacity: 0; transition: opacity 0.35s var(--ease); }
.pd-stage.live img { opacity: 0; }
.pd-stage.live .skin-3d { opacity: 1; }
.pd-hint { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; font-size: 16px; color: #bbb; text-shadow: 1px 1px 0 #000; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.pd-stage.live .pd-hint { opacity: 1; }
.pd-body { padding: 16px 10px 8px; }
.pd-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; color: var(--panel-muted); }
.pd-body h2 { margin: 4px 0 18px; font-size: 32px; line-height: 1.05; font-weight: 700; text-shadow: none; overflow-wrap: anywhere; }
.pd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-stat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.pd-stat img.ico { width: 30px; height: 30px; }
.pd-label { display: block; font-size: 16px; color: #e6e6e6; text-shadow: 1px 1px 0 #3f3f3f; }
.pd-value { display: block; font-size: 16px; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; font-variant-numeric: tabular-nums; }

/* ---------- Profil: Zusatzangaben im Spieler-Fenster ---------- */
.pd-sheet { max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: thin; }
.pd-extra { margin-top: 14px; }
.pd-ranks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pd-rank { padding: 2px 8px; font-size: 16px; color: #e6e6e6; background: #5a5a5a; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #888; text-shadow: 1px 1px 0 #3f3f3f; }
.pd-rank b { font-weight: 500; }
.pd-rank.top { color: var(--yellow); background: #6b5a1a; }
.pd-facts { margin: 0 0 6px; font-size: 16px; color: var(--panel-muted); }
.pd-facts .sep { margin: 0 8px; }
.pd-h { margin: 14px 0 6px; font-size: 16px; font-weight: 700; color: var(--panel-text); }
.pd-list { list-style: none; margin: 0; padding: 0; }
.pd-list li { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px; border-top: 2px solid #a8a8a8; font-size: 16px; line-height: 1.3; }
.pd-list .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pd-list .when { margin-left: auto; color: var(--panel-muted); white-space: nowrap; }
.pd-list .tag { color: #1a7a1a; }
.pd-list a { text-decoration: underline; }

/* ---------- Feed ---------- */
.fe-right { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fe-login { min-height: 36px; padding: 0 14px; }
.fe-me { font-size: 16px; color: #ddd; text-shadow: 2px 2px 0 var(--shadow); }
.fe-me a { text-decoration: underline; color: var(--yellow); }
.chat-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; max-width: 900px; }
.chat-send[hidden] { display: none; }
.chat-send .mc-field { flex: 1 1 240px; min-width: 0; }
.chat-send .mc-field input { width: 100%; }
.chat-send-err { flex-basis: 100%; color: #ff6b6b; font-size: 16px; }
.chat-send-err:empty { display: none; }
.fe-lock { display: flex; align-items: center; gap: 16px; max-width: 900px; margin-bottom: 16px; padding: 16px 18px; font-size: 16px; }
.fe-lock-icon { font-size: 40px; line-height: 1; }
.fe-flash { max-width: 900px; margin: 0 0 14px; padding: 10px 14px; font-size: 16px; text-shadow: 1px 1px 0 #000; background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); }
.fe-flash.ok { color: var(--green); }
.fe-flash.err { color: #ff9a9a; }
.fe-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 16px; color: var(--green); background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08); }
.fe-live.off { color: var(--red); }
.fe-live .dot { animation: blink 1.6s steps(2, jump-none) infinite; }
.feed-box { max-width: 900px; max-height: 620px; overflow-y: auto; scrollbar-width: thin; }
.fe-h { margin: 28px 0 14px; font-size: 24px; }
.fe-day { margin: 10px 0 4px; padding: 2px 6px; font-size: 16px; color: var(--yellow); text-shadow: 2px 2px 0 #3f3f00; border-bottom: 2px solid rgba(255, 255, 255, 0.12); }
.fe-day:first-child { margin-top: 0; }
.fe-face { display: inline-flex; }
.fe-prefix { margin-right: 6px; padding: 0 6px; font-size: 16px; color: #ff9d9d; background: rgba(170, 0, 0, 0.45); text-shadow: 1px 1px 0 #000; }
.fe-sep { color: #bbb; }
.fe-msg { color: #fff; overflow-wrap: anywhere; }
.fe-join, .fe-leave { color: #aaa; }
.fe-join .txt, .fe-leave .txt { color: #aaa; }
.fe-death .txt { color: #ff9a9a; }
.event .txt { min-width: 0; overflow-wrap: anywhere; }
a.chip-player:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Bestenliste ---------- */
.lb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.lb-chips .mc-btn { min-height: 38px; padding: 0 14px; }
.lb-chips img.ico { width: 22px; height: 22px; }
.lb-main { max-width: 900px; padding: 18px 20px 12px; }
.lb-list { list-style: none; margin: 8px 0 0; padding: 0; }
.lb-list li { display: grid; grid-template-columns: 28px minmax(120px, 190px) 1fr auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 2px solid #a8a8a8; font-size: 16px; }
.lb-list li.none { display: block; color: var(--panel-muted); }
.lb-list .pos { text-align: center; font-weight: 700; color: var(--panel-muted); font-variant-numeric: tabular-nums; }
.lb-list li:nth-child(1) .pos { color: #b07800; }
.lb-list li:nth-child(2) .pos { color: #6f7b86; }
.lb-list li:nth-child(3) .pos { color: #8a5a2b; }
.lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-who:hover { text-decoration: underline; }
.lb-who img { width: 26px; height: 26px; flex: none; }
.lb-who .dot { width: 8px; height: 8px; box-shadow: none; }
.lb-bar { height: 14px; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
.lb-bar i { display: block; height: 100%; background: linear-gradient(#7ee05a, #3e9a22); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.lb-list li:nth-child(1) .lb-bar i { background: linear-gradient(#ffd75a, #d18a00); }
.lb-list .val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 720px) {
  .lb-list li { grid-template-columns: 24px 1fr auto; }
  .lb-bar { display: none; }
}

/* ---------- Orte ---------- */
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.place { padding: 16px 18px; animation: appear 0.4s var(--ease) both; display: flex; flex-direction: column; gap: 10px; }
.pl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pl-top h3 { margin: 0; font-size: 24px; font-weight: 700; overflow-wrap: anywhere; text-shadow: none; }
.pl-dim { font-size: 16px; color: var(--panel-muted); white-space: nowrap; }
.pl-coords { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; }
.pl-coords code { font: inherit; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; font-variant-numeric: tabular-nums; }
.pl-copy { min-height: 30px; padding: 0 10px; }
.pl-hint { font-size: 16px; color: var(--panel-muted); }
.pl-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.pl-by { font-size: 16px; color: var(--panel-muted); min-width: 0; overflow-wrap: anywhere; }
.pl-by a { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; }
.pl-by img { width: 18px; height: 18px; }
.pl-bottom .mc-btn { min-height: 34px; padding: 0 12px; }
.empty code { color: var(--yellow); }
.pl-actions { display: inline-flex; gap: 8px; }
#orte-form { margin-bottom: 26px; }
#orte-form .fe-lock { flex-wrap: wrap; }
#orte-form .fe-lock .fe-login { margin-left: auto; }
.place-form { max-width: 900px; padding: 16px 18px 12px; }
.pf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.pf-head h3 { margin: 0; font-size: 24px; font-weight: 700; text-shadow: none; }
.pf-head .fe-me { color: var(--panel-muted); text-shadow: none; }
.pf-head .fe-me a { color: var(--panel-text); }
.pf-grid { display: grid; grid-template-columns: 2fr 1.2fr repeat(3, 1fr); gap: 10px; }
.pf-field { display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: var(--panel-muted); min-width: 0; }
.pf-field input, .pf-field select { height: 40px; padding: 0 10px; width: 100%; font: inherit; color: #e0e0e0; background: #000; border: 2px solid #a0a0a0; border-radius: 0; outline: 0; }
.pf-field input:focus, .pf-field select:focus { border-color: #fff; }
.pf-field select option { background: #1e1e1e; color: #fff; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-msg { min-height: 24px; margin: 8px 0 0; font-size: 16px; color: var(--panel-muted); }
.pf-msg.ok { color: #1a7a1a; }
.pf-msg.err { color: #a00000; }
@media (max-width: 720px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } .pf-name, .pf-grid > .pf-field:nth-child(2) { grid-column: 1 / -1; } }

/* ---------- Server-Verlauf ---------- */
.hist-tiles { margin-bottom: 22px; }
.hist-panel { padding: 16px 18px 14px; margin-bottom: 22px; }
.hist-panel h4 { margin: 0 0 10px; font-size: 24px; font-weight: 700; text-shadow: none; }
.hist-panel h4 .muted { font-size: 16px; font-weight: 400; color: var(--panel-muted); }
.chart { position: relative; background: #151515; box-shadow: inset 3px 3px 0 #373737, inset -3px -3px 0 #fff; padding: 8px 6px 2px; }
.chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.chart .gl { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.chart .gt { fill: #9a9a9a; font: 12px var(--font); }
.chart .ref { stroke: #55ff55; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0.7; }
.chart .off { fill: rgba(255, 85, 85, 0.28); }
.chart .cross { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
.chart .tip { position: absolute; top: 10px; translate: -50% 0; padding: 4px 8px; font-size: 16px; line-height: 1.25; color: #fff; text-shadow: 1px 1px 0 #000; background: rgba(0, 0, 0, 0.85); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15); pointer-events: none; white-space: nowrap; }
.hours { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding: 10px 10px 6px; background: #151515; box-shadow: inset 3px 3px 0 #373737, inset -3px -3px 0 #fff; }
.hb { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.hb i { display: block; width: 100%; background: linear-gradient(#7ee05a, #3e9a22); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.hb.now i { background: linear-gradient(#ffd75a, #d18a00); }
.hb span { height: 18px; margin-top: 4px; font-size: 14px; color: #9a9a9a; }

/* ---------- Hinweisleiste + Wartungsseite ---------- */
.banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; font-size: 16px; text-align: center; color: #ffd5d5; background: rgba(120, 0, 0, 0.75); border-bottom: 2px solid #000; text-shadow: 1px 1px 0 #000; }
.banner[hidden] { display: none; }
.maintenance { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px; overflow-y: auto;
  background: rgba(0, 0, 0, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.maintenance[hidden] { display: none; }
.mt-card { width: min(560px, 100%); padding: 30px 28px 26px; text-align: center; animation: sheet-in 0.4s var(--ease) both; }
.mt-icon { font-size: 64px; line-height: 1; margin-bottom: 10px; animation: mt-bob 2.4s ease-in-out infinite; }
.mt-card h2 { margin: 0 0 12px; font-size: 40px; line-height: 1.05; font-weight: 700; text-shadow: none; }
.mt-text { margin: 0 0 14px; font-size: 16px; white-space: pre-line; overflow-wrap: anywhere; }
.mt-eta { margin: 0 0 14px; padding: 8px 12px; font-size: 16px; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; background: var(--slot); box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
.mt-eta[hidden] { display: none; }
.mt-note { margin: 0; font-size: 16px; color: var(--panel-muted); }
.mt-card .mc-btn { margin-top: 18px; }
.mt-card .mc-btn[hidden] { display: none; }
body.in-maintenance { overflow: hidden; }
@keyframes mt-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(6deg); } }
.mt-card h2, .mt-eta, .mt-note { overflow-wrap: anywhere; }
@media (max-width: 720px) { .mt-card h2 { font-size: 28px; } }
@media (max-width: 400px) { .mt-card h2 { font-size: 24px; } }

/* ---------- Karte ---------- */
body.on-map { overflow: hidden; }
body.on-map .foot { display: none; }
.page-map { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 1; background: #000; }
.page-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 18px; font-size: 16px; background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  transition: opacity 0.3s; pointer-events: none;
}
.map-hint.hidden { opacity: 0; }

/* ---------- Heatmap-Knopf auf der Karte ---------- */
.heat-ctl { position: absolute; left: 12px; bottom: 18px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: calc(100% - 24px); }
.heat-ctl[hidden], .heat-legend[hidden] { display: none; }
.heat-ctl .mc-btn { min-height: 38px; }
/* Hauptknöpfe (Ort erstellen, Orte, Heatmap) alle gleich lang */
.heat-ctl > .mc-btn, .heat-row { width: min(240px, 100%); }
.heat-ctl > .mc-btn { justify-content: center; }
.heat-row { display: flex; gap: 8px; }
/* Zugeklappt: nur der Optionen-Knopf bleibt sichtbar */
.heat-ctl.collapsed > :not(.ctl-toggle) { display: none !important; }
.heat-ctl.collapsed > .ctl-toggle { width: auto; }
.heat-row #own-btn { flex: 1; min-width: 0; }
.pin-toggle { flex: none; width: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.pin-toggle i { display: block; width: 16px; height: 16px; background: #e0443a; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55); }
.pin-toggle.on i { background: #3fd45a; }
.place-form { display: flex; flex-direction: column; gap: 8px; width: min(300px, 100%); }
.place-form[hidden] { display: none; }
.own-panel { width: min(320px, 100%); max-height: 45vh; overflow-y: auto; }
.own-panel[hidden] { display: none; }
.own-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.own-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.own-go { flex: 1; min-width: 0; text-align: left; background: rgba(255, 255, 255, 0.06); border: 0; color: #fff; font: inherit; padding: 6px 8px; cursor: pointer; overflow-wrap: anywhere; text-shadow: 1px 1px 0 #000; }
.own-go:hover, .own-go:focus-visible { background: rgba(255, 255, 255, 0.18); outline: 2px solid #ffff80; outline-offset: -2px; }
.own-list small, .own-panel small { display: block; color: #ddd; font-size: 14px; }
.own-note { margin-top: 4px; color: #7dff7d !important; }
.own-del { min-height: 32px !important; flex: none; }
.place-form .mc-field input { width: 100%; }
.place-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.place-form small:empty { display: none; }
.heat-ctl .mc-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.heat-legend { padding: 8px 12px; font-size: 16px; color: #fff; text-shadow: 1px 1px 0 #000; }
.heat-scale { display: flex; align-items: center; gap: 8px; }
.heat-scale i { width: 110px; height: 12px; background: linear-gradient(90deg, rgba(255, 235, 0, 0.5), rgba(255, 120, 0, 0.7), rgba(255, 0, 0, 0.9)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.heat-legend small { display: block; margin-top: 4px; font-size: 14px; color: #ddd; }
@media (max-width: 720px) {
  .heat-ctl { bottom: 14px; max-width: calc(100% - 90px); } /* Platz lassen für die Zoom-Knöpfe der Karte rechts unten */
  .heat-scale { font-size: 14px; gap: 6px; }
  .heat-scale i { width: 50px; flex: none; }
  .heat-legend { padding: 6px 10px; }
}

/* ---------- Bewegung ---------- */
@keyframes appear { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.35; } }
.page.entering { animation: appear 0.4s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  [data-tilt] { transform: none; will-change: auto; transition: none !important; }
  .cube { transform: rotateX(-22deg) rotateY(35deg); }
  .island { transition: opacity 0.3s ease; }
}

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .boards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .title-screen { height: auto; min-height: 640px; }
  .title-screen::after { background: linear-gradient(transparent 35%, rgba(0, 0, 0, 0.7) 75%); }
  .title-inner { position: absolute; inset: auto 0 0 0; height: auto; padding-bottom: 28px; align-items: center; text-align: center; }
  .logo { align-items: center; font-size: 64px; }
  .splash { font-size: 16px; }
  .logo span:last-child { margin-left: 0; }
  .splash { align-self: center; margin: -0.4em 0 0 9rem; }
  .title-buttons { margin: 0 auto; }
  .island-hint { top: 12px; bottom: auto; right: 12px; }
  .pd-sheet { grid-template-columns: 1fr; max-height: calc(100dvh - 32px); overflow-y: auto; }
  .pd-stage { position: relative; height: 300px; min-height: 300px; }
  .pd-stage img { height: 220px; margin-bottom: 32px; }
}
@media (max-width: 720px) {
  .nav-inner { padding: 0 14px; }
  .page-head { padding: 40px 0 22px; }
  .page-title { font-size: 32px; }
  .section { font-size: 24px; }
  .logo { font-size: 48px; }
  .segmented { margin-left: 0; }
  .search { max-width: none; }
  .dims, .boards { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .card .skin { height: 190px; }
  .card .skin img { height: 150px; }
  .dim { flex-wrap: wrap; }
  .dim .count { margin-left: 0; width: 100%; text-align: left; }
  .event { font-size: 16px; }
}
/* ---------- Layout-Schalter: kompakt (Standard) oder klassisch (WEB_LAYOUT in der .env) ---------- */
html:not([data-layout="klassisch"]) .only-klassisch { display: none !important; }
html[data-layout="klassisch"] .only-kompakt { display: none !important; }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 30px; }
.subtabs .mc-btn { min-height: 38px; padding: 0 18px; }
/* Klassisch hat sieben Reiter: früher auf zwei Zeilen umbrechen */
@media (max-width: 1320px) {
  html[data-layout="klassisch"] { --nav-h: 96px; }
  html[data-layout="klassisch"] .nav-inner { flex-wrap: wrap; align-content: center; gap: 8px 12px; padding: 0 22px; }
  html[data-layout="klassisch"] .status { margin-left: auto; padding: 4px 8px; gap: 6px; }
  html[data-layout="klassisch"] .tabs { order: 3; margin: 0 -22px; padding: 0 22px 2px; width: calc(100% + 44px); overflow-x: auto; scrollbar-width: none; }
  html[data-layout="klassisch"] .tabs::-webkit-scrollbar { display: none; }
  html[data-layout="klassisch"] .tabs .mc-btn { flex: none; padding: 0 16px; }
}

/* ---------- Fortschritts-Tracker ---------- */
.fp-list li { grid-template-columns: 28px minmax(120px, 190px) 1fr auto; }
.fp-list .val small { color: var(--panel-muted); font-weight: 400; margin-left: 4px; }
.fp-bar { display: block; height: 14px; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
.fp-bar i { display: block; height: 100%; background: linear-gradient(#7ee05a, #3e9a22); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.fp-bar.big { height: 20px; margin: 6px 0 14px; }
.fp-head { display: flex; gap: 18px; align-items: center; padding: 16px 20px; max-width: 900px; }
.fp-skin { height: 120px; flex: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25)); }
.fp-head-main { flex: 1; min-width: 0; }
.fp-select { margin-bottom: 8px; max-width: 100%; }
.fp-total { font-size: 16px; color: var(--panel-text); }
.fp-total b { font-size: 24px; }
.fp-total .muted { color: var(--panel-muted); }
.fp-h { margin: 34px 0 10px; font-size: 24px; }
.fp-h + .fp-bar { margin-bottom: 14px; max-width: 420px; }
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fp-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; font-size: 16px; line-height: 1.3; color: var(--panel-text); background: var(--panel); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #555, 0 0 0 2px #000; min-width: 0; }
.fp-card > div { min-width: 0; }
.fp-card b { display: block; font-weight: 700; overflow-wrap: anywhere; }
.fp-card.ok .fp-mark { color: #1a7a1a; }
.fp-card.miss { background: #9c9c9c; color: #3a3a3a; }
.fp-card.miss b { color: #333; }
.fp-card.none { background: #d8c26a; }
.fp-card.none .fp-mark { color: #8a5a00; }
.fp-mark { flex: none; width: 20px; font-weight: 700; }
.fp-desc { display: block; margin-top: 2px; font-size: 16px; color: var(--panel-muted); overflow-wrap: anywhere; }
.fp-card.miss .fp-desc { color: #444; }
.fp-when { display: block; margin-top: 2px; font-size: 14px; color: #1a7a1a; }
.fp-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.fp-who img { width: 22px; height: 22px; display: block; }
.fp-who .muted { color: var(--panel-muted); margin-left: 4px; }
.fp-more { font-size: 14px; color: var(--panel-muted); }
.fp-never { font-weight: 700; color: #7a4a00; }
.fact-link { text-decoration: underline; }
@media (max-width: 720px) {
  .fp-head { flex-direction: column; align-items: stretch; padding: 14px 12px; gap: 10px; }
  .fp-skin { height: 96px; align-self: center; }
  .fp-grid { grid-template-columns: 1fr; }
  .fp-list li { grid-template-columns: 24px 1fr auto; }
  .fp-list .fp-bar { display: none; }
}

/* ---------- Navigation auf Tablet und Handy: zwei Zeilen ----------
   Oben Logo + Server-Status, darunter die Reiter zum seitlichen Wischen (sechs Reiter passen sonst nicht neben das Logo). */
@media (max-width: 1140px) {
  :root { --nav-h: 96px; }
  .nav-inner { flex-wrap: wrap; align-content: center; gap: 8px 12px; padding: 0 22px; }
  .brand { gap: 8px; }
  .brand img { width: 26px; height: 26px; }
  .status { margin-left: auto; padding: 4px 8px; gap: 6px; font-size: 16px; }
  .tabs { order: 3; margin: 0 -22px; padding: 0 22px 2px; width: calc(100% + 44px); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .mc-btn { flex: none; padding: 0 16px; }
}
@media (max-width: 720px) {
  .nav-inner { padding: 0 14px; }
  .brand { font-size: 16px; }
  .tabs { margin: 0 -14px; padding: 0 14px 2px; width: calc(100% + 28px); }
}

/* ---------- Handy-Feinschliff ---------- */
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .segmented { flex-wrap: wrap; max-width: 100%; }
  .segmented .mc-btn { min-height: 36px; padding: 0 12px; }
  .toolbar { gap: 8px; margin-bottom: 24px; }
  .toolbar .select, .toolbar .search { flex: 1 1 100%; max-width: none; }
  .splash { margin: -0.4em 0 0 3.5rem; max-width: 60vw; white-space: normal; text-align: center; }
  .card .meta { flex-wrap: wrap; gap: 2px 10px; }
  .tile .value { white-space: normal; overflow-wrap: anywhere; }
  .tiles > *, .grid > *, .boards > *, .places > *, .dims > * { min-width: 0; }
  .fe-right { margin-left: 0; width: 100%; }
  .fe-live { margin-left: auto; }
  .fe-lock { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fe-lock-icon { font-size: 32px; }
  .feed-box { max-height: 70vh; }
  .event { align-items: flex-start; gap: 8px; }
  .event img, .fe-face { margin-top: 2px; flex: none; }
  .event .txt { flex: 1; min-width: 0; }
  .event .when { padding-left: 4px; font-size: 14px; margin-top: 2px; }
  .events { padding: 6px; }
  .lb-main { padding: 14px 12px 8px; }
  .lb-list li { gap: 8px; font-size: 16px; }
  .places { grid-template-columns: 1fr; }
  .pl-bottom { flex-wrap: wrap; }
  #orte-form #pf-pos, .pf-actions .mc-btn { flex: 1 1 100%; }
  .place-form { padding: 14px 12px 10px; }
  .pf-head { flex-direction: column; align-items: flex-start; }
  .hist-panel { padding: 12px 10px; }
  .hist-panel h4 { font-size: 16px; }
  .chart svg { height: 180px; }
  .hours { gap: 2px; padding: 8px 6px 4px; }
  .hb span { font-size: 12px; }
  .player-dialog { max-width: calc(100vw - 16px); }
  .pd-close { position: fixed; top: 20px; right: 20px; background-color: #444; } /* bleibt beim Scrollen im Fenster sichtbar */
  .pd-stage { height: 260px; min-height: 260px; }
  .list-head h3 { white-space: nowrap; }
  .pd-sheet { padding: 10px; gap: 8px; }
  .pd-body { padding: 8px 4px; }
  .pd-body h2 { font-size: 24px; }
  .pd-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pd-stat { padding: 6px 8px; gap: 6px; }
  .pd-stat img.ico { width: 24px; height: 24px; }
  .pd-list li { flex-wrap: wrap; }
  .banner { font-size: 16px; padding: 8px 12px; }
  .maintenance { padding: 12px; }
  .mt-card { padding: 22px 16px 18px; }
  .foot { margin-top: 48px; }
}
@media (max-width: 400px) {
  .brand span { display: none; } /* nur das Logo, damit Logo + Server-Status in eine Zeile passen */
}
@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .tile .slot { width: 44px; height: 44px; }
  .tile .slot img.ico { width: 28px; height: 28px; }
}