/* Spiele-Hubs (/spiele/, /spiele/taeglich/) – angeglichen an die Wir-„Mehr“-Seite:
   Abschnittsüberschriften, App-Kacheln im Raster bzw. iOS-artige gruppierte Liste, Glas-Karten. */
:root { --hb-surface: rgba(22,20,34,.62); --hb-line: rgba(255,255,255,.07); --hb-accent: var(--accent, #6D5BFF); --hb-t3: #7c7788; --hb-display: "Fraunces", "Iowan Old Style", Georgia, serif; }
.hb-wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 calc(16px + env(safe-area-inset-right,0px)) calc(44px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px)); box-sizing: border-box; }
.hb-tools { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; }
.hb-search { position: relative; display: block; flex: 1; min-width: 0; }
.hb-search input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px 0 40px; border-radius: 14px; border: 1px solid var(--hb-line); background: var(--hb-surface); color: inherit; font: inherit; font-size: 1rem; outline: none; }
.hb-search input:focus { border-color: var(--hb-accent); }
.hb-search svg { position: absolute; z-index: 1; pointer-events: none; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--hb-t3); stroke-width: 2; stroke-linecap: round; }
.hb-seg { flex: none; display: flex; padding: 3px; gap: 2px; border-radius: 13px; background: var(--hb-surface); border: 1px solid var(--hb-line); }
.hb-seg button { width: 40px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--hb-t3); display: grid; place-items: center; cursor: pointer; }
.hb-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.hb-seg svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 4px 12px; }
.hb-head h2 { margin: 0; font: 600 21px/1.2 var(--hb-display); letter-spacing: -.01em; }
.hb-head span { color: var(--hb-t3); font-size: .8rem; text-align: right; }
.hb-sec[hidden], .hb-tile[hidden], .hb-row[hidden] { display: none !important; }
/* Raster: App-Kacheln */
.hb-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px 8px; padding: 2px 0; }
@media (min-width: 600px) { .hb-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 12px; } }
.hb-tile { position: relative; display: grid; justify-items: center; gap: 7px; min-width: 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hb-ico { position: relative; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); transition: transform .18s cubic-bezier(.3,1.4,.5,1); }
@media (min-width: 600px) { .hb-ico { width: 68px; height: 68px; border-radius: 18px; } }
.hb-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hb-tile:active .hb-ico { transform: scale(.9); }
.hb-tile:hover .hb-ico { border-color: color-mix(in srgb, var(--hb-accent) 60%, transparent); }
.hb-lbl { font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hb-sub { display: none; }
.hb-badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; font-size: 11px; font-weight: 800; box-sizing: border-box; border: 2px solid #07060c; }
.hb-badge.ok { background: #2fae76; color: #fff; } .hb-badge.run { background: var(--hb-accent); color: #fff; }
.hb-badge svg { width: 12px; height: 12px; stroke-width: 3; }
.hb-fire { display: inline-flex; align-items: center; gap: 2px; color: #ffb340; font-size: 11px; font-weight: 800; }
.hb-fire svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.hb-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #3ccf8e; border: 2px solid #07060c; }
/* Liste: gruppierte Glas-Karte wie .menu.group */
.hb-list { border-radius: 24px; overflow: hidden; background: var(--hb-surface); border: 1px solid var(--hb-line); }
.hb-row { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 14px 8px 16px; color: inherit; text-decoration: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.hb-row + .hb-row { border-top: 1px solid var(--hb-line); }
.hb-row:active { background: rgba(255,255,255,.04); }
@media (hover:hover) { .hb-row:hover { background: rgba(255,255,255,.03); } }
.hb-row .hb-mi { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.hb-row .hb-mi svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hb-row .hb-mt { flex: 1; min-width: 0; }
.hb-row .hb-mt b { display: block; font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-row .hb-mt span { display: block; font-size: 13px; color: var(--hb-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-row .hb-st { flex: none; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--hb-t3); }
.hb-st .ok { color: #3ccf8e; display: inline-flex; } .hb-st .ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hb-st .run { color: #a99dff; }
.hb-chev { flex: none; color: var(--hb-t3); width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-pill { flex: none; font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: #a9a5b3; white-space: nowrap; }
.hb-empty { color: var(--hb-t3); text-align: center; padding: 24px 0; }