/* web.css — die oeffentliche Seite. Kopf, Fuss, Startseite und die Bausteine,
   die sich mehrere Seiten teilen (Seitenkopf, Rangkarte, Modus-Kachel). */

/* ================================================================== Kopf */

.hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 11, 22, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(28, 39, 66, .8);
}
.hd-in { display: flex; align-items: center; gap: 22px; height: var(--head-h); }

.logo { display: inline-flex; align-items: center; line-height: 1; flex: none; }
/* Loraplex-Logo (Fuchs + Wortmarke) als eine SVG-Datei; der Rand steckt schon in der Datei. */
.logo-bild { display: block; height: 50px; width: auto; }   /* Fuchs mittig zum Schriftzug (25.09.) */
.ft-brand .logo-bild { height: 40px; }
@media (max-width: 560px) { .logo-bild { height: 35px; } }
@media (max-width: 390px) { .logo-bild { height: 31px; } }

.hd-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.hd-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: var(--head-h); padding: 0 14px;
  font-size: 14px; font-weight: 600; color: var(--txt-2);
  transition: color var(--t);
}
.hd-link svg { width: 16px; height: 16px; color: var(--txt-3); transition: color var(--t); }
.hd-link:hover { color: var(--txt); }
.hd-link:hover svg { color: var(--txt-2); }
.hd-link.on { color: var(--blue-lite); }
.hd-link.on svg { color: var(--blue); }
/* Der blaue Balken unter dem aktiven Eintrag — im Entwurf das einzige, was den Ort verraet. */
.hd-link.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--blue); box-shadow: 0 0 14px var(--blue-glow);
}

.hd-backend { border-color: var(--blue-line); color: var(--blue-lite); }
.hd-backend:hover { background: var(--blue-ghost); }
.hd-bell { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm);
           color: var(--txt-2); transition: background var(--t), color var(--t); position: relative; }
.hd-bell svg { width: 19px; height: 19px; }
.hd-bell:hover { background: rgba(255,255,255,.05); color: var(--txt); }

.hd-me { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 6px;
         border-radius: var(--r-sm); border: 1px solid transparent; transition: border-color var(--t), background var(--t); }
.hd-me:hover { background: rgba(255,255,255,.04); border-color: var(--line); }
.hd-me-txt { text-align: left; line-height: 1.15; }
.hd-me-txt b { display: block; font-size: 13.5px; font-weight: 700; }
.hd-me-txt i { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; color: var(--green); }
.hd-me-arrow { width: 13px; height: 13px; color: var(--txt-3); transition: transform var(--t), color var(--t); }

/* ---------------------------------------------------------------- Konto-Menue (layout.js userChip, 03.10.2026)
   Enrico: „das Profil-Dropdown ist viel zu unprofessionell“. Aufbau wie bei grossen Netzwerken: oben wer du bist
   (Kopf, Name, Rang), Coins und Level aus dem Spiel, die eigenen Seiten, das Team-Backend, abgesetzt „Abmelden“.
   Es ist ein <details> (geht ohne JavaScript); app.js macht daraus ein Menue. Gleiche Sprache wie die Sprachwahl. */
.menu-sum { display: block; list-style: none; cursor: pointer; border-radius: var(--r-sm); }
.menu-sum::-webkit-details-marker { display: none; }
.menu-sum::marker { content: ''; }
.menu-sum:focus { outline: none; }
.hd-ich[open] > .ich-pop, .hd-ich.open > .ich-pop { display: block; }
.hd-ich.open .hd-me, .hd-ich[open] .hd-me { background: rgba(255,255,255,.05); border-color: var(--line); }
.hd-ich.open .hd-me-arrow, .hd-ich[open] .hd-me-arrow { transform: rotate(180deg); color: var(--txt-2); }
.menu-sum:focus-visible .hd-me { outline: 2px solid var(--blue-lite); outline-offset: 2px; }
/* Unter dem Namen der Rang in seiner Farbe (statt „Online“ — dass man selbst online ist, sagt einem nichts). */
.hd-me-txt .hd-me-rang { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--txt-3); }
.hd-me-txt .hd-me-rang[data-rank="vip"], .hd-me-txt .hd-me-rang[data-rank="mod"] { color: #4ade80; }
.hd-me-txt .hd-me-rang[data-rank="vip_plus"] { color: #34d399; }
.hd-me-txt .hd-me-rang[data-rank="prime"] { color: #fbbf24; }
.hd-me-txt .hd-me-rang[data-rank="youtube"], .hd-me-txt .hd-me-rang[data-rank="admin"], .hd-me-txt .hd-me-rang[data-rank="owner"] { color: #f87171; }
.hd-me-txt .hd-me-rang[data-rank="helper"] { color: #60a5fa; }
.hd-me-txt .hd-me-rang[data-rank="dev"] { color: #2dd4bf; }

.ich-pop { width: min(296px, calc(100vw - 24px)); padding: 6px; border-radius: 14px;
           background: linear-gradient(180deg, #121d34 0%, #0d1629 100%); border: 1px solid rgba(255,255,255,.07);
           box-shadow: 0 30px 70px -22px rgba(0,0,0,.92), 0 0 0 1px rgba(3,6,14,.7), inset 0 1px 0 rgba(255,255,255,.05);
           transform-origin: top right; }
.hd-ich.menu.open .ich-pop { animation: ich-ein .16s cubic-bezier(.2,.9,.3,1); }
@keyframes ich-ein { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* Wer du bist — der ganze Kopf fuehrt aufs eigene Profil. */
.ich-pop .ich-kopf { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-radius: 10px; color: var(--txt); }
.ich-pop .ich-kopf:hover, .ich-pop .ich-kopf:focus-visible { background: rgba(255,255,255,.035); outline: none; }
.ich-av { flex: none; width: 44px; height: 44px; border-radius: 9px;
          box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 18px -8px rgba(0,0,0,.85); }
.ich-wer { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ich-wer > b { max-width: 100%; font: 800 15px/1.1 var(--f-head); color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich-pop .ich-kopf .ich-rang { height: 21px; padding: 0 8px; gap: 5px; border-radius: 6px; font-size: 11px; }
.ich-pop .ich-kopf .ich-rang svg { width: 11px; height: 11px; color: currentColor; }

/* Coins und Level aus dem Spiel */
.ich-werte { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 0 4px 8px; }
.ich-wert { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-width: 0;
            padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); }
.ich-wert svg { grid-row: 1 / 3; width: 18px; height: 18px; }
.ich-wert b { font: 800 14px/1.15 var(--f-head); color: var(--txt); font-variant-numeric: tabular-nums;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich-wert small { font-size: 11px; line-height: 1.25; color: var(--txt-3); }
.ich-wert-coins svg { color: #fbbf24; }
.ich-wert-level svg { color: var(--blue-lite); }

/* Die Eintraege: gleiche Hoehe, Symbol + Text, Hover in der Akzentfarbe; Abmelden rot. */
.ich-gruppe { margin: 0; padding: 6px 0 0; border-top: 1px solid rgba(255,255,255,.06); }
.ich-gruppe + .ich-gruppe { margin-top: 6px; }
.ich-pop .ich-gruppe a, .ich-pop .ich-gruppe button { display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 11px;
            border-radius: 9px; font: 600 13.5px/1 var(--f-body); color: var(--txt-2); text-align: left; }
.ich-pop .ich-gruppe a svg, .ich-pop .ich-gruppe button svg { flex: none; width: 16px; height: 16px; color: var(--txt-3); transition: color var(--t); }
.ich-pop .ich-gruppe a:hover, .ich-pop .ich-gruppe a:focus-visible,
.ich-pop .ich-gruppe button:hover, .ich-pop .ich-gruppe button:focus-visible { background: rgba(95,169,255,.08); color: var(--txt); outline: none; }
.ich-pop .ich-gruppe a:hover svg, .ich-pop .ich-gruppe a:focus-visible svg,
.ich-pop .ich-gruppe button:hover svg, .ich-pop .ich-gruppe button:focus-visible svg { color: var(--blue-lite); }
.ich-pop .ich-gruppe .ich-team { color: var(--blue-lite); }
.ich-pop .ich-gruppe .ich-team svg { color: var(--blue-lite); }
.ich-pop .ich-gruppe .ich-team .ich-ext { width: 13px; height: 13px; margin-left: auto; opacity: .7; }
.ich-pop .ich-gruppe .ich-ab:hover, .ich-pop .ich-gruppe .ich-ab:focus-visible { background: rgba(239,68,68,.1); color: #fca5a5; }
.ich-pop .ich-gruppe .ich-ab:hover svg, .ich-pop .ich-gruppe .ich-ab:focus-visible svg { color: #f87171; }

.hd-burger { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--txt-2); }
.hd-burger svg { width: 22px; height: 22px; margin: 0 auto; }
.hd-anmelden { display: none; }

/* ---------------------------------------------------------------- Glocke (Benachrichtigungen)
   Der Knopf traegt die Zahl der ungelesenen, das Fenster darunter die letzten 30 (web/glocke.js).
   Regeln mit .gl-pop davor: .menu-pop a svg aus ui.css wuerde die Symbole sonst klein und grau machen. */
.hd-bell-zahl { position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
                display: grid; place-items: center; font: 800 10.5px/1 var(--f-head); color: #fff; background: #ef4444;
                box-shadow: 0 0 0 2px #0a1020; pointer-events: none; }
.hd-bell-zahl[hidden] { display: none; }
.hd-glocke.open .hd-bell { background: rgba(255,255,255,.06); color: var(--txt); }
.gl-pop { width: 390px; max-width: calc(100vw - 24px); right: -6px; padding: 0; overflow: hidden; }
.gl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 12px;
           border-bottom: 1px solid var(--line-soft); }
.gl-kopf b { font: 800 15px/1 var(--f-head); color: var(--txt); }
.gl-kopf-neu { padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--blue-lite); background: var(--blue-ghost); }
.gl-kopf-neu[hidden] { display: none; }
.gl-liste { max-height: min(470px, 68vh); overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.gl-pop .gl-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px;
                   font-size: 13.5px; line-height: 1.42; color: var(--txt-2); }
.gl-pop .gl-item + .gl-item { margin-top: 2px; }
.gl-pop .gl-item:hover { background: rgba(255,255,255,.045); color: var(--txt-2); }
.gl-pop .gl-item.neu { background: rgba(47,144,255,.08); }
.gl-pop .gl-item.neu:hover { background: rgba(47,144,255,.13); }
.gl-bild { position: relative; flex: none; width: 40px; height: 40px; }
.gl-bild img { display: block; width: 40px; height: 40px; border-radius: 9px; image-rendering: pixelated; }
.gl-pop .gl-sym { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
                  background: var(--blue-ghost); border: 1px solid var(--blue-line); color: var(--blue-lite); }
.gl-pop .gl-sym svg { width: 19px; height: 19px; color: var(--blue-lite); }
.gl-pop .gl-art { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 20px; height: 20px;
                  border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--card-top); }
.gl-pop .gl-art svg { width: 11px; height: 11px; color: #fff; }
.gl-pop .gl-art[data-ton="gruen"] { background: var(--green); }
.gl-pop .gl-art[data-ton="lila"]  { background: var(--purple); }
.gl-pop .gl-art[data-ton="gelb"]  { background: var(--amber); }
.gl-bild .gl-sym + .gl-art { display: none; }                      /* ohne Kopf steht das Symbol schon gross da */
.gl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gl-satz { color: var(--txt-2); }
.gl-satz b { color: var(--txt); font-weight: 700; }
.gl-item.neu .gl-satz { color: var(--txt); }
.gl-info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--txt-3); }
.gl-txt time { font-size: 11.5px; color: var(--txt-4); }
.gl-item.neu time { color: var(--blue-lite); font-weight: 600; }
.gl-punkt { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--blue);
            box-shadow: 0 0 0 3px rgba(47,144,255,.2); }
.gl-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 26px 32px; text-align: center; }
.gl-leer-sym { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 14px;
               background: var(--blue-ghost); border: 1px solid var(--blue-line); color: var(--blue-lite); }
.gl-leer-sym svg { width: 24px; height: 24px; }
.gl-leer b { font: 800 15px var(--f-head); color: var(--txt); }
.gl-leer p { font-size: 13px; line-height: 1.55; color: var(--txt-3); }
.gl-leer code { font-family: var(--f-mono); font-size: 12px; color: var(--blue-lite); }
.gl-laedt { padding: 26px 18px; text-align: center; font-size: 13px; color: var(--txt-3); }
.gl-pop .gl-zu { display: none; }                     /* .menu-pop button (ui.css) wuerde es sonst zeigen */
@media (max-width: 980px) {
  /* .hd hat backdrop-filter — fixed richtet sich damit am Kopf aus: direkt darunter. Auf dem Handy oeffnet
     das Fenster aus dem Menue (Account-Karte), der Knopf im Kopf ist dort ausgeblendet. */
  .gl-pop { position: fixed; top: calc(var(--head-h) + 6px); left: auto; right: 12px; width: min(440px, calc(100vw - 24px)); max-width: none; }
  .gl-pop .gl-zu { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; margin: -6px -8px -6px 0;
                   border-radius: 8px; color: var(--txt-2); }
  .gl-pop .gl-zu svg { width: 18px; height: 18px; color: var(--txt-2); }
  .gl-kopf-neu { margin-left: auto; }
}

/* ---------------------------------------------------------------- Menue fuer schmale Fenster
   Nach Enricos Entwurf (24.09.2026): die ganze Flaeche. Oben Logo + X, die Karte „Jetzt spielen“ mit der
   Adresse, „Entdecken“, Hilfe, unten das Konto. Titel und Schrift wie die Seitenkoepfe (Changa, zweifarbig). */
.lx-menu { position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain;
           padding: env(safe-area-inset-top, 0px) 16px calc(26px + env(safe-area-inset-bottom, 0px));
           background: radial-gradient(ellipse 90% 45% at 85% 0%, rgba(47,144,255,.13), transparent 70%),
                       radial-gradient(ellipse 70% 40% at 0% 100%, rgba(47,144,255,.08), transparent 70%), var(--bg);
           animation: lx-menu-ein .2s ease; }
.lx-menu[hidden] { display: none; }
@keyframes lx-menu-ein { from { opacity: 0; transform: translateY(-6px); } }
body.menue-offen { overflow: hidden; }
.lx-menu-in { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.lx-menu-kopf { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); }
.lx-menu-zu { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--txt);
              background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.lx-menu-zu svg { width: 22px; height: 22px; }

.lx-menu-spielen { position: relative; isolation: isolate; overflow: hidden; padding: 20px 18px 18px; border-radius: 16px;
                   border: 1px solid rgba(47,144,255,.38); box-shadow: 0 18px 40px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.lx-menu-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 88% 38%; }
.lx-menu-spielen::before { content: ''; position: absolute; inset: 0; z-index: -1;
                           background: linear-gradient(90deg, rgba(5, 9, 17, .92) 0%, rgba(5, 9, 17, .72) 45%, rgba(5, 9, 17, .25) 100%); }
.lx-menu-kicker { margin: 0; font: italic 600 14.5px/1.2 'Inter', var(--f-body); color: #c4cedc; }
.lx-menu-titel { margin: 4px 0 0; font: 800 36px/1 'Changa', var(--f-head); text-transform: uppercase; word-spacing: 5px; }
.lx-menu-titel .a, .lx-menu-titel .b { display: inline-block; -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-menu-titel .a { background-image: linear-gradient(180deg, #ffffff 0%, #eef2f7 38%, #c5cedb 70%, #a2adbe 100%); }
.lx-menu-titel .b { background-image: linear-gradient(180deg, #5cc8ff 0%, #22a2ff 45%, #1086ff 75%, #0f6fe6 100%);
                    filter: drop-shadow(0 0 10px rgba(24, 140, 255, .5)); }
.lx-menu-ip { display: flex; align-items: center; gap: 12px; max-width: 360px; height: 50px; margin-top: 14px; padding-left: 14px;
              overflow: hidden; border-radius: 11px; background: rgba(5, 12, 22, .8); border: 1px solid rgba(130, 165, 210, .32); }
.lx-menu-ip > svg { width: 19px; height: 19px; flex: none; color: #c9d6e6; }
.lx-menu-ip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1 var(--f-mono); color: #eef3f9; }
.lx-menu-ip button { display: grid; place-items: center; width: 54px; height: 100%; flex: none; color: #fff;
                     background: linear-gradient(180deg, #0ab6fd 0%, #0798fc 55%, #0288f7 100%); }
.lx-menu-ip button svg { width: 20px; height: 20px; }
.lx-menu-ip button.copied { background: linear-gradient(180deg, #2fd46c, var(--green-deep)); }

.lx-menu-ueber { margin: 10px 6px 0; font: 700 11.5px/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #8fb3e6; }
.lx-menu-nav { display: flex; flex-direction: column; gap: 4px; }
.lx-menu-nav a { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px; border-radius: 12px;
                 border: 1px solid transparent; font: 700 16.5px/1 var(--f-head); color: #dfe8f5; transition: background var(--t); }
.lx-menu-nav a > svg:first-child { width: 22px; height: 22px; flex: none; color: #aebcd2; }
.lx-menu-nav a:active { background: rgba(255,255,255,.05); }
.lx-menu-pfeil { width: 17px; height: 17px; margin-left: auto; color: #6f809b; }
.lx-menu-nav a.on { color: #5fb4ff; border-color: rgba(47,144,255,.38);
                    background: linear-gradient(90deg, rgba(47,144,255,.22), rgba(47,144,255,.06)); box-shadow: inset 3px 0 0 var(--blue); }
.lx-menu-nav a.on > svg:first-child, .lx-menu-nav a.on .lx-menu-pfeil { color: #5fb4ff; }
.lx-menu-linie { height: 1px; margin: 4px 2px; background: var(--line-soft); }

.lx-menu-konto { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding: 18px; border-radius: 16px;
                 background: linear-gradient(180deg, #0d182b, #0a1322); border: 1px solid var(--line); }
.lx-menu-ich { display: flex; align-items: center; gap: 14px; }
.lx-menu-av { width: 58px; height: 58px; flex: none; border-radius: 12px; border: 1px solid var(--line-strong); image-rendering: pixelated; }
.lx-menu-ich-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lx-menu-ich-txt .lx-menu-ueber { margin: 0; font-size: 10.5px; }
.lx-menu-ich-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 21px/1.1 var(--f-head); color: var(--txt); }
.lx-menu-ich-txt i { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 13px; color: var(--txt-3); }
.lx-menu-glocke { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px;
                  color: var(--txt); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.lx-menu-glocke svg { width: 21px; height: 21px; }
.lx-menu-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.lx-menu-knoepfe a { display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; border-radius: 11px;
                     font: 700 14.5px/1 var(--f-head); color: #6cb8ff; background: rgba(47,144,255,.07); border: 1px solid rgba(47,144,255,.28); }
.lx-menu-knoepfe a svg { width: 18px; height: 18px; }
.lx-menu-ab, .lx-menu-an { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 46px;
                           padding-top: 4px; border-top: 1px solid var(--line-soft); font: 700 15px/1 var(--f-head); color: var(--txt-2); }
.lx-menu-an { color: #6cb8ff; }
.lx-menu-ab svg, .lx-menu-an svg { width: 18px; height: 18px; }
.lx-menu-neu { display: flex; align-items: center; gap: 14px; }
.lx-menu-neu-sym { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%;
                   color: var(--blue-lite); background: var(--blue-ghost); border: 1px solid var(--blue-line); }
.lx-menu-neu-sym svg { width: 24px; height: 24px; }
.lx-menu-neu b { display: block; font: 800 17px/1.2 var(--f-head); color: var(--txt); }
.lx-menu-neu p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--txt-3); }
.lx-menu-neu code { font-family: var(--f-mono); font-size: 12.5px; color: var(--blue-lite); }
.lx-menu-los { height: 50px; font-size: 15.5px; }
@media (min-width: 981px) { .lx-menu { display: none !important; } body.menue-offen { overflow: auto; } }
@media (prefers-reduced-motion: reduce) { .lx-menu { animation: none; } }

/* ================================================================== Fuss */

.ft { margin-top: 72px; border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, transparent, rgba(4,7,15,.7)); }
/* Drei Spalten, die mittlere genau in der Mitte: Logo links, Links mittig, IP rechts — egal, wie
   breit die Seiten gerade sind. Mit Flex + margin:auto rutschten die Links nach rechts, sobald
   rechts nichts mehr stand. */
.ft-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding-top: 30px; padding-bottom: 22px; }
.ft-brand { display: flex; align-items: center; gap: 16px; justify-self: start; }
.ft-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; justify-self: center; }
.ft-rechts { display: flex; align-items: center; gap: 10px; justify-self: end; }
.ft-ip { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px 0 13px; border-radius: var(--r-sm);
         background: var(--card-hi); border: 1px solid var(--line-soft); color: var(--txt-2); cursor: pointer;
         font: 600 12.5px/1 var(--f-mono); transition: all var(--t); }
.ft-ip-txt { min-width: 19ch; text-align: left; }
.ft-ip svg { width: 14px; height: 14px; color: var(--txt-4); flex: none; }
.ft-ip:hover { color: var(--txt); border-color: var(--line-strong); transform: translateY(-2px); }
.ft-ip:hover svg { color: var(--txt-2); }
.ft-ip.copied { border-color: rgba(52, 211, 153, .55); color: var(--txt); }
.ft-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--r-sm);
              font-size: 13px; color: var(--txt-2); transition: color var(--t), background var(--t); }
.ft-links a svg { width: 14px; height: 14px; color: var(--txt-4); }
.ft-links a:hover { color: var(--txt); background: rgba(255,255,255,.04); }
.ft-social { display: flex; gap: 8px; }
.ft-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm);
               background: var(--card-hi); border: 1px solid var(--line-soft); color: var(--txt-3);
               transition: all var(--t); }
.ft-social a svg { width: 17px; height: 17px; }
.ft-social a:hover { color: var(--txt); border-color: var(--line-strong); transform: translateY(-2px); }
.ft-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
            padding-top: 16px; padding-bottom: 26px; border-top: 1px solid var(--line-soft);
            font-size: 12px; color: var(--txt-4); }

/* ================================================================== Hero */

.hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* `min-width:0` ist hier keine Kosmetik: `.hero` ist ein Flex-Behaelter, und ein Flex-Element
   schrumpft ohne diese Zeile nie unter die Breite seines laengsten unumbrechbaren Inhalts.
   Auf einem Telefon schiebt ein einziger langer Knopf damit die ganze Seite nach rechts. */
.hero-in { position: relative; z-index: 2; width: 100%; min-width: 0; padding: 56px 0 72px; }
.hero-txt { max-width: 640px; }
.hero-kicker { font-family: var(--f-head); font-style: italic; font-weight: 600; font-size: 21px;
               color: #cfdcf8; letter-spacing: .01em; margin-bottom: 4px;
               text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero-h1 { font-size: 63px; font-weight: 800; line-height: 1.02; letter-spacing: -.028em;
           text-shadow: 0 6px 30px rgba(0,0,0,.65); }
.hero-h1 em { font-style: normal; color: var(--blue-lite);
              text-shadow: 0 0 34px rgba(47,144,255,.55), 0 6px 30px rgba(0,0,0,.6); }
.hero-sub { margin-top: 16px; font-size: 17px; line-height: 1.6; color: #c3d1ee; max-width: 540px;
            text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.hero-btns { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-feats { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.hero-feat { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #a7b8dc; }
.hero-feat svg { width: 17px; height: 17px; color: var(--blue-lite); }
/* Die handgeschriebene Notiz mit Pfeil — im Entwurf rechts neben der Figur. */
.hero-note { position: absolute; right: 5%; top: 56%; z-index: 3; text-align: center;
             transform: rotate(-7deg); pointer-events: none; }
.hero-note span { font-family: var(--f-hand); font-size: 26px; color: #dbe6ff; line-height: 1.15;
                  text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.hero-note svg { width: 76px; height: 34px; margin: 2px auto 0; color: #dbe6ff; opacity: .85; }
.hero-figure { position: absolute; right: 9%; bottom: 0; height: 84%; z-index: 1;
               filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }

/* ================================================================== Spielmodus-Karten */

.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }

.gc { overflow: hidden; display: flex; flex-direction: column; }
.gc-art { position: relative; height: 174px; overflow: hidden; }
.gc-art > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gc:hover .gc-art > img { transform: scale(1.06); }
/* Der Verlauf nach unten laesst das Bild in die Karte laufen, statt an einer Kante zu enden. */
.gc-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(11,18,33,.55) 68%, var(--card-bottom) 100%); }
.gc-head { position: absolute; left: 18px; right: 14px; bottom: 14px; z-index: 2;
           display: flex; align-items: center; gap: 12px; min-width: 0; }
.gc-ico { width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; flex: none;
          background: linear-gradient(160deg, color-mix(in srgb, var(--m) 85%, white 15%), var(--m-2));
          box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 22px -8px color-mix(in srgb, var(--m) 65%, transparent);
          color: #fff; }
.gc-ico svg { width: 27px; height: 27px; }
.gc-name { font-family: var(--f-head); font-weight: 800; letter-spacing: -.025em;
           /* Laenge schlaegt Groesse: "SURVIVALGAMES" hat 13 Zeichen, "BEDWARS" sieben. Eine feste
              Groesse laesst das eine aus der Karte laufen — also skaliert sie mit der Breite mit. */
           font-size: 27px; min-width: 0; white-space: nowrap;
           text-transform: uppercase; color: #fff; line-height: 1;
           text-shadow: 3px 3px 0 color-mix(in srgb, var(--m) 62%, #000 38%), 0 4px 22px rgba(0,0,0,.75); }
.gc-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.gc-desc { font-size: 13.5px; line-height: 1.55; color: var(--txt-2); flex: 1; }
.gc-desc b { color: var(--txt); font-weight: 700; }
.gc-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--txt-3); font-weight: 600; }
.gc-meta svg { width: 15px; height: 15px; color: var(--txt-4); }
.gc-meta b { color: var(--txt); }

/* ================================================================== Untere Reihe */

.home-low { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 22px; margin-top: 22px; align-items: start; }

.status-now { display: flex; align-items: center; gap: 12px; }
.status-now b { font-family: var(--f-head); font-size: 23px; font-weight: 800; color: var(--green); letter-spacing: -.02em; }
.status-pill { margin-left: auto; height: 30px; padding: 0 13px; display: inline-flex; align-items: center;
               border-radius: var(--r-pill); background: var(--card-hi); border: 1px solid var(--line);
               font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.status-pill b { color: var(--txt); } .status-pill i { font-style: normal; color: var(--txt-3); }
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 16px; }
.status-cell { text-align: center; padding: 10px 4px; border-radius: var(--r-sm);
               background: rgba(255,255,255,.022); border: 1px solid var(--line-soft); }
.status-cell .mi { width: 26px; height: 26px; margin: 0 auto 7px; border-radius: 7px; display: grid; place-items: center;
                   background: color-mix(in srgb, var(--m) 20%, transparent); color: var(--m); }
.status-cell .mi svg { width: 15px; height: 15px; }
.status-cell b { display: block; font-size: 11.5px; font-weight: 700; }
.status-cell i { display: block; font-style: normal; font-size: 11px; color: var(--txt-3); margin-top: 2px; }

.news-item { display: flex; gap: 14px; padding: 14px 0; }
.news-item + .news-item { border-top: 1px solid var(--line-soft); }
.news-thumb { width: 104px; height: 70px; border-radius: var(--r-sm); overflow: hidden; flex: none;
              border: 1px solid var(--line-soft); }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-txt { min-width: 0; flex: 1; }
.news-txt h4 { font-size: 14.5px; font-weight: 700; margin: 7px 0 4px; transition: color var(--t); }
.news-item:hover h4 { color: var(--blue-lite); }
.news-txt p { font-size: 12.5px; line-height: 1.5; color: var(--txt-3);
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-date { font-size: 11.5px; color: var(--txt-4); margin-top: 5px; }

.cta { text-align: center; padding: 30px 26px 26px; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: -40% -20% auto; height: 200px;
               background: radial-gradient(60% 100% at 50% 0%, rgba(47,144,255,.22), transparent 70%); }
.cta > * { position: relative; }
.cta h3 { font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
.cta p { font-size: 13.5px; color: var(--txt-2); line-height: 1.6; margin-bottom: 20px; }
.cta .hand { margin-top: 16px; display: block; }

/* ================================================================== Seitenkopf (alle Unterseiten)
   Dieselbe Handschrift wie Startseite und Statistik (start.css): kursive Zeile, zweifarbiger Titel in
   Changa, hoechstens ein Satz. Links dunkel fuer die Schrift, unten weich in den Seitengrund — keine
   harte Kante zum Inhalt. Markup: seitenkopf() in layout.js. */

/* Jeder Unterseiten-Kopf ist genau so hoch wie das Startseiten-Banner (start.css .start-hero) — Enrico:
   „mach alle gleich gross wie Index, perfekt“. Oberhalb von 760 px dieselbe feste Hoehe wie dort. */
.lx-kopf { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
           height: clamp(334px, 21.75vw, 470px); background: var(--bg); }
.lx-kopf-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lx-kopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 9, 17, .9) 0%, rgba(5, 9, 17, .66) 30%, rgba(5, 9, 17, .16) 60%, rgba(5, 9, 17, 0) 76%),
              linear-gradient(0deg, var(--bg) 0%, rgba(6, 10, 20, .55) 20%, rgba(6, 10, 20, 0) 46%);
}
.lx-kopf-in { position: relative; padding-top: 34px; padding-bottom: 40px; }
.lx-kicker { margin: 0; font: italic 600 20.5px/1.1 'Inter', var(--f-body); letter-spacing: -.01em; color: #c4cedc;
             text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.lx-titel { margin: 4px 0 0; font: 800 clamp(44px, 4.05vw, 62px)/1.02 'Changa', var(--f-head); letter-spacing: 0; word-spacing: 6px;
            text-transform: uppercase; }
.lx-titel .a, .lx-titel .b { display: inline-block; -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-titel .a { background-image: linear-gradient(180deg, #ffffff 0%, #eef2f7 38%, #c5cedb 70%, #a2adbe 100%);
               filter: drop-shadow(0 2px 0 rgba(3, 8, 16, .55)); }
.lx-titel .b { background-image: linear-gradient(180deg, #5cc8ff 0%, #22a2ff 45%, #1086ff 75%, #0f6fe6 100%);
               filter: drop-shadow(0 0 12px rgba(24, 140, 255, .55)) drop-shadow(0 2px 0 rgba(3, 8, 16, .5)); }
.lx-text { max-width: 600px; margin: 10px 0 0; font: 400 15.5px/1.55 'Inter', var(--f-body); color: #d9e3f1;
           text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.lx-text b { color: #fff; font-weight: 600; }
.lx-kopf-in > .badge { margin-top: 14px; }

/* Unter 761 px richtet sich die Startseite nach ihrem Inhalt (Knoepfe und Merkmale brechen um). In Chrome
   gemessen: bis 392 px 347–357 · bis 486 px 279–297 · bis 521 px 297–304 · bis 711 px 252 · bis 760 px 231 (ohne Merkmal-Zeile, 25.09.).
   Genau diese Werte bekommen die Unterseiten als Mindesthoehe — so sind sie auch auf dem Handy gleich gross. */
@media (max-width: 760px) {
  .lx-kopf { height: auto; min-height: 231px; }
  .lx-kopf-in { padding-top: 40px; padding-bottom: 34px; }
  .lx-kopf::before { background: linear-gradient(90deg, rgba(5, 9, 17, .86), rgba(5, 9, 17, .45)),
                                 linear-gradient(0deg, var(--bg) 0%, rgba(6, 10, 20, 0) 40%); }
  .lx-kicker { font-size: 17px; }
  .lx-titel { font-size: clamp(34px, 10vw, 52px); }
  .lx-text { font-size: 14.5px; }
}
@media (max-width: 711px) { .lx-kopf { min-height: 252px; } }
@media (max-width: 521px) { .lx-kopf { min-height: calc(200px + 20vw); } }
@media (max-width: 486px) { .lx-kopf { min-height: calc(203px + 19.35vw); } }
@media (max-width: 392px) { .lx-kopf { min-height: calc(279px + 20vw); } }
@media (max-width: 340px) { .lx-kopf { min-height: 347px; } }

.sect { padding-top: 30px; }
.sect-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sect-head h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; }
.sect-head h2 svg { width: 20px; height: 20px; color: var(--blue); }

/* ================================================================== Kleinteile */

.copy-ip { font-family: var(--f-mono); }
.copied { color: var(--green) !important; border-color: rgba(34,197,94,.4) !important; }

.soon { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
        padding: 70px 24px; }
.soon-ico { width: 64px; height: 64px; border-radius: var(--r-lg); display: grid; place-items: center;
            background: var(--blue-ghost); border: 1px solid var(--blue-line); color: var(--blue); }
.soon-ico svg { width: 30px; height: 30px; }
.soon h2 { font-size: 26px; }
.soon p { max-width: 460px; color: var(--txt-2); font-size: 14.5px; line-height: 1.65; }

/* ================================================================== Anmelden */

.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--head-h)); }
.auth-art { position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.auth-art img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-art-txt { position: relative; z-index: 2; padding: 48px; }
.auth-art-txt h2 { font-size: 34px; line-height: 1.15; margin-bottom: 12px; text-shadow: 0 4px 22px rgba(0,0,0,.7); }
.auth-art-txt p { color: #c3d1ee; max-width: 420px; line-height: 1.65; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.auth-art-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.auth-art-list li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: #d3dffa; }
.auth-art-list svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-box { width: 100%; max-width: 396px; }
.auth-box h1 { font-size: 30px; margin-bottom: 6px; }
.auth-box > p { color: var(--txt-2); font-size: 14px; margin-bottom: 26px; }
.auth-box form { display: flex; flex-direction: column; gap: 15px; }
.auth-alt { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft);
            font-size: 13.5px; color: var(--txt-3); text-align: center; }
.auth-alt a { color: var(--blue-lite); font-weight: 600; }

/* ================================================================== Schmale Fenster */

@media (max-width: 1180px) {
  .modes { grid-template-columns: repeat(2, 1fr); }
  .home-low { grid-template-columns: 1fr 1fr; }
  .home-low > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .hd-nav, .hd-me-txt { display: none; }
  /* Kopf auf dem Handy nach Enricos Entwurf: Logo · (Avatar | Anmelden) · „Menü“ */
  .hd-burger { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
               min-width: 54px; height: 46px; padding: 0 9px; border-radius: 11px; color: var(--txt);
               background: rgba(255,255,255,.03); border: 1px solid var(--line); }
  .hd-burger svg { width: 20px; height: 20px; margin: 0; }
  .hd-burger span { font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--txt-2); }
  .hd-burger-punkt { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%;
                     background: #ef4444; box-shadow: 0 0 0 2px #0a1020; }
  .hd-burger-punkt[hidden] { display: none; }
  .hd-in .hd-gross { display: none; }
  .hd-anmelden { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 9px; height: 40px; padding: 0 13px; border-radius: 10px;
                 font: 700 13.5px/1 var(--f-head); color: #fff; background: rgba(47,144,255,.08); border: 1px solid rgba(47,144,255,.6); }
  .hd-anmelden svg { flex: none; width: 16px; height: 16px; color: var(--blue-lite); }
  .hd-glocke .hd-bell { display: none; }
  .hd-me { height: 46px; padding: 0 8px 0 5px; border-radius: 11px; border: 1px solid rgba(47,144,255,.6); background: rgba(47,144,255,.08); }
  .hd-me .av { width: 34px; height: 34px; border-radius: 7px; }
  .hd-me-arrow { width: 16px; height: 16px; color: var(--blue-lite); }
  .hd-ich.open .hd-me, .hd-ich[open] .hd-me { border-color: rgba(47,144,255,.8); background: rgba(47,144,255,.14); }
  .hd-ich.open .hd-me-arrow, .hd-ich[open] .hd-me-arrow { color: var(--blue-lite); }
  .hero { min-height: 470px; }
  .hero-h1 { font-size: 44px; }
  .hero-figure, .hero-note { display: none; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { min-height: 220px; }
  .ft-in { grid-template-columns: 1fr; justify-items: start; gap: 20px; }
  .ft-brand, .ft-links, .ft-rechts { justify-self: start; }
  .ft-links { justify-content: flex-start; margin-left: -12px; }
}
@media (max-width: 640px) {
  :root { --shell-pad: 16px; }
  .modes, .home-low, .status-grid { grid-template-columns: 1fr; }
  .hero { min-height: 420px; }
  .hero-h1 { font-size: 32px; }
  .hero-sub { font-size: 15px; }
  /* Nebeneinander passen die beiden Knoepfe nicht — und nebeneinander gequetscht trifft
     man auf einem Telefon den falschen. Also untereinander, jeder ueber die volle Breite. */
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { width: 100%; }
  .hero-feats { gap: 8px 16px; margin-top: 22px; }
  .hero-feat { font-size: 12.5px; }
  .hd-in { gap: 10px; }
  /* Der Login-Knopf steckt im Schubfach — im Kopf ist kein Platz fuer beide. */
  .hd-in .btn-ghost { display: none; }
  .ft-legal { font-size: 11px; }
}
/* Letzte Bremse gegen waagerechtes Scrollen. Sie steht NACH den echten Korrekturen, nicht
   statt ihrer: sie versteckt einen Ueberlauf, sie behebt ihn nicht. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---------------------------------------------------------------- Feststehender Name
   Wer angemeldet ist, tippt seinen Spielernamen nicht. Ein freies Feld waere hier eine
   Einladung, den Namen eines anderen einzutragen — und im harmlosen Fall nur ueberfluessig. */
.fest-name { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
             background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); }
.fest-name b { font-size: 14.5px; }
.fest-name i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--txt-4); }

/* Wartung (seit 23.09.2026): die Startseite sagt es, statt „Online“ zu zeigen. */
.status-wartung { margin: -6px 0 14px; padding: 9px 12px; border-radius: 9px; font-size: 13px; line-height: 1.5; color: var(--txt-2);
                  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); }

/* Anmeldung: gesperrtes Konto -> direkt zum Entbannungsantrag */
.form-err-weg { margin: -4px 0 14px; font-size: 13px; color: var(--txt-2); }
.form-err-weg a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #6cbcff; }
.form-err-weg svg { width: 13px; height: 13px; }

/* Fußzeile: Impressum, Datenschutz, AGB unter dem Trennstrich rechts (23.09.2026) */
.ft-recht { display: flex; align-items: center; gap: 18px; }
.ft-recht a { color: var(--txt-3); text-decoration: none; transition: color .15s ease; }
.ft-recht a:hover { color: var(--txt); }