/* games.css — /games nach Enricos GPT-Entwurf vom 24.09.2026 (914 px breit, Inhalt 827 px → hier 1292 px,
   also Faktor ~1,56). Bilder aus dem Entwurf in web/public/img/games (4× hochgerechnet, Remacri).
   Farben je Zeile: BedWars-Größen über data-mode (--m aus tokens.css), die anderen Spiele über data-ton
   (start.css). Knöpfe, Punkte und Abzeichen ziehen beides über --m. */

/* ---------------------------------------------------------------- Seite */
.gx-seite { display: flex; flex-direction: column; gap: 40px; padding-top: 44px; padding-bottom: 44px; }

/* Eine Zeile: Bild neben Text, jede zweite gespiegelt */
.gx-zeile { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); gap: 40px; align-items: center; scroll-margin-top: calc(var(--head-h) + 20px); }
.gx-zeile[data-ton] { --m: var(--t); }
.gx-flip .gx-bild { order: 2; }
.gx-bild { position: relative; aspect-ratio: 2.17; border-radius: 12px; overflow: hidden; background: #0b1221;
           box-shadow: 0 18px 40px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04); }
.gx-bild img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform .6s ease; }
.gx-zeile:hover .gx-bild img { transform: scale(1.035); }

.gx-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.gx-titel { display: flex; align-items: center; gap: 14px; }
.gx-titel h2 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.025em; color: var(--m); }
.gx-zeile[data-ton] .gx-titel h2 { color: var(--t-hell); }
.gx-label {
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--m); background: color-mix(in srgb, var(--m) 12%, transparent); border: 1px solid color-mix(in srgb, var(--m) 55%, transparent);
}
.gx-zeile[data-ton] .gx-label { color: var(--t-hell); }
.gx-lead { margin: 18px 0 0; font-size: 16.5px; line-height: 1.55; color: #e6edf6; max-width: 600px; }
.gx-lead b { color: #fff; font-weight: 800; }
.gx-mehr { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #a9b6c7; max-width: 600px; }

.gx-fakten { display: flex; flex-wrap: wrap; align-items: center; margin: 22px 0 0; padding: 0; list-style: none; }
.gx-fakten li { display: inline-flex; align-items: center; gap: 9px; padding: 0 20px; font-size: 15px; color: #dbe3ee; border-left: 1px solid #27354a; }
.gx-fakten li:first-child { padding-left: 0; border-left: 0; }
.gx-fakten li > svg { width: 19px; height: 19px; color: #c9d6e6; }
.gx-live { display: inline-flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.gx-punkt { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }

.gx-knoepfe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.gx-knoepfe .btn { height: 46px; padding: 0 22px; font-size: 15px; }
.gx-los {
  color: #fff; border: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, color-mix(in srgb, var(--m) 82%, white 18%), var(--m));
  box-shadow: 0 0 18px color-mix(in srgb, var(--m) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.gx-los:hover { filter: brightness(1.08); }
.gx-rang { color: #e6edf6; background: rgba(8, 15, 27, .6); border: 1px solid #2a3a52; }
.gx-rang:hover { border-color: #3d5374; color: #fff; }
.gx-knoepfe .btn svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Rund ums Spielen */
.gx-rund { padding-top: 34px; border-top: 1px solid #1a2638; }
.gx-rund h2, .gx-ideen h2 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--txt); }
.gx-unter { margin: 8px 0 0; font-size: 15px; color: #a9b6c7; }
.gx-rund-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.gx-rund-spalten article { display: flex; gap: 20px; padding: 4px 28px 4px 28px; border-left: 1px solid #1f2d42; }
.gx-rund-spalten article:first-child { padding-left: 0; border-left: 0; }
.gx-rund-spalten article > svg { width: 44px; height: 44px; flex: none; color: #2c9dff; stroke-width: 1.6; }
.gx-rund-spalten h3 { margin: 2px 0 0; font-size: 18px; font-weight: 800; color: var(--txt); }
.gx-rund-spalten p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #a9b6c7; }
.gx-rund-spalten a, .gx-textlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 700; color: #2c9dff; text-decoration: none; }
.gx-rund-spalten a svg, .gx-textlink svg { width: 14px; height: 14px; transition: transform .2s ease; }
.gx-rund-spalten a:hover svg, .gx-textlink:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- Deine Ideen fürs Netzwerk */
.gx-ideen { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 44px; align-items: center; padding-top: 34px; border-top: 1px solid #1a2638; }
.gx-ideen-text p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: #b8c4d3; max-width: 520px; }
.gx-ideen-knoepfe { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.gx-ideen-knoepfe .btn { height: 46px; padding: 0 22px; font-size: 15px; }
.gx-ideen-knoepfe .btn svg { width: 15px; height: 15px; }
.gx-ideen-knoepfe .gx-textlink { margin-top: 0; }
.gx-ideen-bild { aspect-ratio: 2.48; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04); }
.gx-ideen-bild img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- Deine nächste Runde wartet. */
.gx-runde { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid #1a2638; }
.gx-runde-ico { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 12px; color: #2c9dff; border: 2px solid rgba(44, 157, 255, .55); background: rgba(44, 157, 255, .06); }
.gx-runde-ico svg { width: 30px; height: 30px; }
.gx-runde-text { flex: 1; min-width: 240px; }
.gx-runde-text h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--txt); }
.gx-runde-text p { margin: 6px 0 0; font-size: 15px; color: #a9b6c7; }
.gx-runde-ip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gx-ipfeld { display: inline-flex; align-items: center; gap: 16px; height: 54px; padding: 0 12px 0 20px; border-radius: 9px; background: rgba(8, 15, 27, .7); border: 1px solid #2a3a52; }
.gx-ipfeld > span { font: 600 16px/1 var(--f-mono); color: #eef3f9; }
.gx-ipfeld button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; border: 0; background: none; color: #c9d6e6; cursor: pointer; }
.gx-ipfeld button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.gx-ipfeld button svg { width: 19px; height: 19px; }
.gx-kopieren { height: 54px; padding: 0 28px; font-size: 16px; }
.gx-kopieren [data-copy-label] { min-width: 7.5em; text-align: center; }

/* ---------------------------------------------------------------- Schmale Fenster */
@media (max-width: 1100px) {
  .gx-zeile { gap: 28px; }
  .gx-titel h2 { font-size: 30px; }
  .gx-rund-spalten { grid-template-columns: 1fr; gap: 22px; }
  .gx-rund-spalten article { padding: 0; border-left: 0; }
}
@media (max-width: 860px) {
  .gx-zeile, .gx-ideen { grid-template-columns: 1fr; gap: 20px; }
  .gx-flip .gx-bild { order: 0; }
}
@media (max-width: 560px) {
  .gx-fakten li { padding: 4px 12px; font-size: 14px; }
  .gx-knoepfe .btn, .gx-ideen-knoepfe .btn { flex: 1; }
  .gx-runde-ip, .gx-ipfeld { width: 100%; }
  .gx-ipfeld { justify-content: space-between; }
  .gx-kopieren { width: 100%; }
}