/* ============================================================================ NERUX GAMESERVERS — das eine Stylesheet der Seite Seit der Vereinheitlichung (2026-08-11) gibt es genau EINE Welt: das Werksschild — Weiß, Beton, Graphit, 1px-Linien, Big Shoulders über IBM Plex. Ein Spiel bekommt keine eigene Welt mehr, sondern nur noch zwei Dinge: 1. seinen Akzent (--accent/--accent-ink, gesetzt am aus config.py) 2. sein offizielles Bildmaterial im dunklen Kopfband (.strip) Die früheren world-rust.css / world-pal.css sind damit ersatzlos entfallen. ========================================================================= */ /* ---- Schriften (selbst gehostet, keine externen Requests) ---------------- */ @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap; src:url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap; src:url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap; src:url("/static/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap; src:url("/static/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap; src:url("/static/fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2")} @font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap; src:url("/static/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2")} @font-face{font-family:"Arimo";font-style:normal;font-weight:400;font-display:swap; src:url("/static/fonts/arimo-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Arimo";font-style:normal;font-weight:700;font-display:swap; src:url("/static/fonts/arimo-latin-700-normal.woff2") format("woff2")} /* ---- Weltentoken --------------------------------------------------------- Die Dachmarke: Stahl und Beton. Weiß als Grund, Graphit als Schrift, ein einziger Signalton (das Warnorange der Industrie) für das, was gerade passiert. Keine Verläufe, keine weichen Schatten — Kanten und Linien. Die Farbe der Seite kommt aus den Spielen, nicht aus dem Rahmen. */ :root, [data-world="brand"]{ --bg:#ffffff; --bg2:#f4f5f6; --panel:#ffffff; --panel2:#eef0f1; --line:#dcdfe2; --line2:#c2c7cc; --ink:#11161a; --txt:#3d474e; --mut:#6b767e; --accent:#e2570f; /* Signalton, sparsam */ --accent-ink:#b8440a; /* dieselbe Farbe, lesbar auf Weiß */ --ok:#1f7a45; --focus:#11161a; --display:"Big Shoulders Display","Arimo",system-ui,sans-serif; --display-weight:800; --display-track:.005em; --display-caps:uppercase; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --r:0px; /* Beton hat keine Rundungen */ --top-bg:#ffffff; --top-ink:#11161a; --top-line:#dcdfe2; --cta-bg:#11161a; --cta-ink:#ffffff; --foot-bg:#11161a; --foot-line:#242d34; --foot-txt:#9aa5ad; --foot-mut:#6c7880; --foot-ink:#f2f5f7; /* Verlauf über dem Spielmaterial in den Spielbändern der Startseite */ --scrim1:rgba(10,14,17,.95); --scrim2:rgba(10,14,17,.86); --scrim3:rgba(10,14,17,.36); --scrim4:rgba(10,14,17,.04); --scrim-top:rgba(10,14,17,.26); --scrim-m1:rgba(10,14,17,.5); --scrim-m2:rgba(10,14,17,.8); --scrim-m3:rgba(10,14,17,.94); --art-credit:rgba(223,229,233,.55); } /* ---- Basis ---------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--txt); font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:var(--display-weight); letter-spacing:var(--display-track);text-transform:var(--display-caps);line-height:1.02; color:var(--ink);text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} code,kbd{font-family:var(--mono);font-size:.94em} button{font:inherit;color:inherit;cursor:pointer} /* Die Teile, die der Browser malt, gehören auch zum Entwurf. */ ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} *{scrollbar-color:var(--line2) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--bg2)} ::-webkit-scrollbar-thumb{background:var(--line2)} ::-webkit-scrollbar-thumb:hover{background:var(--mut)} .frame{width:min(1220px,100% - 40px);margin-inline:auto} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-9999px;top:0;z-index:120;padding:12px 18px; background:var(--cta-bg,var(--ink));color:var(--cta-ink,#fff);font-weight:700;text-decoration:none} .skip:focus{left:12px;top:12px} /* ========================================================================== KOPFZEILE — auf allen Seiten dieselbe ========================================================================== */ .top{position:sticky;top:0;z-index:60;background:var(--top-bg);color:var(--top-ink); border-bottom:1px solid var(--top-line)} .topbar{display:flex;align-items:center;gap:8px;min-height:60px} .mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none; flex-shrink:0;margin-right:14px} .mark img{width:36px;height:36px} .mark-text{display:flex;flex-direction:column;line-height:1} .mark-text b{font-family:var(--display);font-weight:800;font-size:22px; letter-spacing:.02em;text-transform:uppercase;color:var(--top-ink)} .mark-text span{margin-top:3px;font-family:var(--mono);font-size:9.5px;font-weight:600; letter-spacing:.26em;text-transform:uppercase;color:var(--mut);opacity:.9} #primary-nav{margin-left:auto;display:flex;align-items:center;gap:2px} #primary-nav > a,.menu > summary{display:inline-flex;align-items:center;gap:6px; padding:9px 13px;font-size:14.5px;font-weight:600;color:var(--mut); text-decoration:none;border:1px solid transparent;white-space:nowrap} #primary-nav > a:hover,.menu > summary:hover{color:var(--top-ink);background:var(--panel2)} #primary-nav > a.is-active{color:var(--top-ink);box-shadow:inset 0 -2px 0 var(--accent)} #primary-nav .who{padding:0 8px;font-family:var(--mono);font-size:12px;color:var(--mut)} /* Der Knopf trägt in jeder Welt deren Signalfarbe — --ink ist in den dunklen Welten hell und ergäbe hier Weiß auf Weiß. */ #primary-nav > a.cta{margin-left:8px;background:var(--cta-bg,var(--ink)); color:var(--cta-ink,#fff);border-color:var(--cta-bg,var(--ink))} #primary-nav > a.cta:hover{filter:brightness(1.12)} /* ---- Server-Menü ---------------------------------------------------------

: klappt ohne JavaScript, ist per Tastatur bedienbar. app.js ergänzt nur das Schließen bei Klick daneben und bei Escape. */ .menu{position:relative} .menu > summary{list-style:none;cursor:pointer;user-select:none} .menu > summary::-webkit-details-marker{display:none} .menu[data-here] > summary{color:var(--top-ink);box-shadow:inset 0 -2px 0 var(--accent)} .menu[open] > summary{color:var(--top-ink);background:var(--panel2)} .chev{width:14px;height:14px;transition:transform .18s ease} .menu[open] .chev{transform:rotate(180deg)} .menupanel{position:absolute;top:calc(100% + 1px);right:0;z-index:70; width:min(620px,calc(100vw - 32px));background:var(--panel); border:1px solid var(--line2)} .menugrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .menucol{padding:18px 20px 20px} .menucol + .menucol{border-left:1px solid var(--line)} .menugame{display:flex;align-items:baseline;gap:9px;text-decoration:none; padding-bottom:10px;border-bottom:2px solid var(--accent)} .menugame-name{font-family:var(--display);font-weight:800;font-size:21px; letter-spacing:.02em;text-transform:uppercase;color:var(--ink)} .menugame-sub{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--mut)} .menugame:hover .menugame-name{color:var(--accent-ink,var(--accent))} .menuservers{margin-top:10px;display:grid;gap:1px} .menuservers a{display:flex;align-items:center;gap:9px;padding:8px 9px; text-decoration:none;color:var(--txt);font-weight:600;font-size:14.5px} .menuservers a:hover{background:var(--panel2);color:var(--ink)} .menuserver-num{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--mut)} .menuserver-num b{color:var(--ink)} .menupages{margin-top:10px;padding-top:10px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:4px 14px} .menupages a{font-size:13.5px;color:var(--mut);text-decoration:none} .menupages a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .menufoot{padding:12px 20px;background:var(--bg2);border-top:1px solid var(--line); font-size:13px;color:var(--mut)} .menufoot b{font-family:var(--mono);color:var(--ink)} .dot{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:var(--mut);display:inline-block} .dot.on{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)} .dot.off{background:var(--line2);box-shadow:none} /* ---- Menüknopf (mobil) ---------------------------------------------------- */ .navtoggle{display:none;margin-left:auto;flex-direction:column;gap:4px;padding:11px; background:none;border:1px solid var(--line2);color:inherit} .navtoggle span{display:block;width:18px;height:2px;background:currentColor} @media(max-width:900px){ .navtoggle{display:flex} #primary-nav{display:none;order:3;width:100%;margin:0 0 12px;flex-direction:column; align-items:stretch;gap:0;border-top:1px solid var(--line)} #primary-nav.open{display:flex} #primary-nav > a,.menu > summary{padding:13px 4px;border-bottom:1px solid var(--line)} #primary-nav > a.cta{margin:12px 0 0;justify-content:center;padding:14px} .topbar{flex-wrap:wrap} .menu{position:static} .menupanel{position:static;width:auto;border:0;box-shadow:none;background:var(--bg2)} .menucol + .menucol{border-left:0;border-top:1px solid var(--line)} .menufoot{display:none} } /* ========================================================================== BEREICHSZEILE — nur auf Spielseiten, trägt die Spielfarbe ========================================================================== */ .secbar{background:var(--bg2);border-bottom:1px solid var(--line)} .secbar-inner{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:7px 0} .secbar-label{margin-right:14px;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--accent)} .secbar a{padding:7px 12px;font-size:14px;font-weight:600;color:var(--mut);text-decoration:none} .secbar a:hover{color:var(--ink);background:var(--panel2)} .secbar a.is-active{color:#fff;background:var(--accent)} /* ========================================================================== FUSSZEILE — auf allen Seiten dieselbe ========================================================================== */ .bottom{margin-top:0;background:var(--foot-bg,#11161a);color:var(--foot-txt,#96a1a9); border-top:1px solid var(--foot-line,#212a30)} .footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:34px;padding:48px 0 32px} @media(max-width:1100px){.footgrid{grid-template-columns:1.6fr 1fr 1fr}} .bottom .mark-text b{color:var(--foot-ink,#f2f5f7)} .footgrid nav{display:flex;flex-direction:column;gap:9px} .foot-h{margin-bottom:4px;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--foot-mut,#6c7880)} .footgrid a{font-size:14.5px;text-decoration:none;color:var(--foot-txt,#96a1a9)} .footgrid a:hover{color:var(--foot-ink,#f2f5f7);text-decoration:underline;text-underline-offset:3px} .foot-note{margin-top:14px;max-width:44ch;font-size:14px;color:var(--foot-mut,#6c7880)} .foot-ip{display:inline-block;margin-top:12px;padding:5px 11px;font-family:var(--mono); font-size:12.5px;color:var(--foot-ink,#f2f5f7);border:1px solid var(--foot-line,#212a30)} .footbase{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:16px 0 28px;border-top:1px solid var(--foot-line,#212a30); font-size:12.5px;color:var(--foot-mut,#6c7880)} .footbase a{color:inherit} .artcredit{font-size:12.5px} @media(max-width:820px){.footgrid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.footgrid{grid-template-columns:1fr;gap:26px}} /* ========================================================================== DACHMARKE — Startseite und globale Seiten Ein Werksschild: Raster, Linien, Tabellen. Nichts glänzt. ========================================================================== */ [data-world="brand"]{--foot-bg:#11161a;--foot-line:#242d34;--foot-txt:#9aa5ad; --foot-mut:#6c7880;--foot-ink:#f2f5f7} .slab{padding:64px 0 56px;border-bottom:1px solid var(--line); background: linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/68px 100%, var(--bg)} .slab-inner{max-width:52ch} .slab h1{font-size:clamp(40px,7.4vw,84px);line-height:.94;letter-spacing:.01em} .slab h1 em{font-style:normal;color:var(--accent-ink)} .slab-text{margin-top:20px;max-width:60ch;font-size:17.5px;color:var(--txt)} .slab-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .stamp{display:inline-flex;align-items:center;gap:7px;padding:6px 11px; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--txt);border:1px solid var(--line2);background:var(--panel)} .stamp svg{width:13px;height:13px;color:var(--accent-ink)} /* Betriebstafel: der Stand von gerade eben, als Tabelle gelesen. */ .board{margin-top:34px;border:1px solid var(--line2);background:var(--panel)} .board-head,.board-row{display:grid; grid-template-columns:minmax(150px,1.2fr) .7fr .8fr 1.2fr 26px; gap:18px;align-items:center;padding:0 20px;min-height:56px} .board-head{min-height:38px;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--mut); border-bottom:1px solid var(--line2);background:var(--bg2)} .board-row{position:relative;text-decoration:none;border-bottom:1px solid var(--line); transition:background .16s} .board-row:last-of-type{border-bottom:0} .board-row:hover{background:var(--bg2)} .board-game{display:flex;align-items:center;gap:10px;font-family:var(--display); font-weight:800;font-size:25px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)} .board-game::before{content:"";width:4px;height:22px;background:var(--accent)} .board-cell{font-family:var(--mono);font-size:13.5px;color:var(--mut)} .board-cell b{font-weight:600;font-size:17px;color:var(--ink)} .board-go{text-align:right;color:var(--line2);transition:transform .16s,color .16s} .board-go svg{width:17px;height:17px;margin-left:auto} .board-row:hover .board-go{color:var(--ink);transform:translateX(3px)} .board-foot{display:flex;align-items:center;gap:9px;padding:12px 20px;background:var(--bg2); border-top:1px solid var(--line2);font-family:var(--mono);font-size:12.5px;color:var(--mut)} .board-foot b{color:var(--ink);font-size:14.5px} @media(max-width:760px){ .board-head{display:none} .board-row{grid-template-columns:1fr auto;gap:4px 14px;padding:15px 18px} .board-game{grid-column:1;grid-row:1} .board-go{grid-column:2;grid-row:1} .board-cell{grid-column:1/-1} } /* Spielbänder auf der Startseite: je Spiel ein Streifen mit seinem echten Bildmaterial. Der Rahmen bleibt achromatisch, das Bild bringt die Farbe. */ .strip{position:relative;border-bottom:1px solid var(--line);overflow:hidden; background:#0d1114;color:#dfe5e9} .strip-inner{position:relative;z-index:2;padding:60px 0 64px} /* Mindesthöhe, damit von der Keyart in jedem Band ein vergleichbar großer Ausschnitt steht — sonst zeigt ein Spiel mit nur einem Server einen Streifen, in dem vom Bild kaum etwas übrig bleibt. */ .strip{min-height:430px;display:flex;align-items:center} .strip > .strip-inner{width:min(1220px,100% - 40px);margin-inline:auto} .strip-name{font-size:clamp(34px,5.4vw,56px);color:#fff} .strip-lede{max-width:52ch;margin-top:14px;color:#c3cdd4} .strip-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px} .strip-tags li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:#dfe5e9;border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.07)} .strip-tags svg{width:13px;height:13px;color:var(--accent);flex-shrink:0} .strip-rows{margin-top:24px;display:grid;gap:1px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.18)} .srow{display:grid;grid-template-columns:minmax(150px,1.1fr) auto auto minmax(210px,1.3fr) auto; gap:16px;align-items:center;padding:13px 16px;background:rgba(12,16,19,.86)} .srow-name{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.02em; text-transform:uppercase;color:#fff;display:block} .srow-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:#93a0a8} .srow-state{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px; font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#93a0a8;white-space:nowrap} .srow-state.on{color:#63d492} .srow-count{font-family:var(--mono);font-size:13px;color:#93a0a8;white-space:nowrap} .srow-count b{font-size:17px;color:#fff} .srow-more{font-size:13.5px;font-weight:700;text-decoration:none;color:#fff;white-space:nowrap} .srow-more:hover{color:var(--accent)} .strip-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} @media(max-width:900px){ .srow{grid-template-columns:1fr auto;gap:9px 14px} .srow-connect,.srow-more{grid-column:1/-1} } /* Verbindungsfeld: das Terminal, in das die Adresse gehört. */ .connect{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 6px 6px 12px; background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.2)} .connect code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:12.5px;color:#fff} [data-world="brand"] .slab .connect{background:var(--bg2);border-color:var(--line2)} [data-world="brand"] .slab .connect code{color:var(--ink)} /* ---- Knöpfe --------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 18px;font-family:var(--body);font-size:14px;font-weight:700; text-decoration:none;border:1px solid var(--line2);background:transparent; color:var(--ink);border-radius:var(--r);transition:background .16s,color .16s,border-color .16s} .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff} .btn--solid{background:var(--ink);border-color:var(--ink);color:#fff} .btn--solid:hover{background:var(--accent);border-color:var(--accent)} .btn--onart{border-color:rgba(255,255,255,.34);color:#fff} .btn--onart:hover{background:#fff;border-color:#fff;color:#0d1114} .btn--onart.btn--solid{background:#fff;color:#0d1114;border-color:#fff} .btn--onart.btn--solid:hover{background:var(--accent);border-color:var(--accent);color:#fff} .btn--sm{padding:7px 13px;font-size:13px} .btn[disabled]{opacity:.45;cursor:default;pointer-events:none} /* ---- Globale Textseiten (Regeln, FAQ, Impressum, Datenschutz) ------------- */ .page{padding:52px 0 72px} .page-head{max-width:62ch} .page-head h1{font-size:clamp(32px,5.2vw,56px)} .page-lede{margin-top:16px;font-size:17px;color:var(--txt)} .crumbs{display:flex;gap:8px;align-items:center;margin-bottom:16px;font-family:var(--mono); font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} .crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .doc{display:grid;grid-template-columns:210px 1fr;gap:40px;margin-top:38px;align-items:start} @media(max-width:860px){.doc{grid-template-columns:1fr;gap:24px}} .doc-toc{position:sticky;top:78px;display:flex;flex-direction:column;gap:2px; padding-left:14px;border-left:1px solid var(--line2)} @media(max-width:860px){.doc-toc{position:static;flex-direction:row;flex-wrap:wrap; gap:8px;padding:0;border-left:0}} .doc-toc-h{margin-bottom:8px;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--mut)} @media(max-width:860px){.doc-toc-h{display:none}} .doc-toc a{padding:5px 0;font-size:14.5px;font-weight:600;text-decoration:none;color:var(--mut)} .doc-toc a:hover{color:var(--accent-ink)} @media(max-width:860px){.doc-toc a{padding:6px 11px;border:1px solid var(--line)}} .sec{padding-top:6px} .sec + .sec{margin-top:40px;padding-top:34px;border-top:1px solid var(--line)} .sec h2{font-size:clamp(22px,3.2vw,30px)} .sec > p,.sec ul,.sec ol{margin-top:14px;max-width:72ch} .sec ul{display:grid;gap:11px} .sec ul li{position:relative;padding-left:20px} .sec ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px; background:var(--accent)} .sec li b{color:var(--ink)} .sec code{padding:1px 6px;background:var(--bg2);border:1px solid var(--line)} .note{margin-top:16px;max-width:72ch;font-size:14.5px;color:var(--mut)} /* FAQ-Klappen im Werksschild-Stil: Linien, kein Kartenstapel. */ .qa{margin-top:16px;border-top:1px solid var(--line)} .qa details{border-bottom:1px solid var(--line)} .qa summary{display:flex;align-items:center;gap:14px;padding:15px 2px;cursor:pointer; list-style:none} .qa summary::-webkit-details-marker{display:none} .qa summary h3{flex:1;font-family:var(--body);font-weight:700;font-size:16.5px; letter-spacing:0;text-transform:none;line-height:1.4;color:var(--ink)} .qa summary::after{content:"";width:11px;height:11px;flex-shrink:0; border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink); transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease} .qa details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)} .qa summary:hover h3{color:var(--accent-ink)} .qa details > p{padding:0 34px 18px 2px;max-width:76ch;color:var(--txt)} /* Sprachumschalter im Regelwerk */ .langtoggle{display:inline-flex;margin-top:18px;border:1px solid var(--line2)} .langbtn{padding:8px 17px;border:0;background:transparent;font-weight:700;font-size:14px; color:var(--mut)} .langbtn.is-active{background:var(--ink);color:#fff} /* ========================================================================== SPIELMATERIAL — in beiden Spielwelten gleich aufgebaut Das Keyart liegt hinter dem Kopf, darüber ein Verlauf, der von links so viel abdunkelt, wie der Text zum Lesen braucht, und nach rechts das Bild freigibt. Die vier Stufen setzt jede Welt selbst (--scrim1..4) — Rust dunkler und wärmer, Palworld kühler. ========================================================================== */ .hero-img{position:absolute;inset:0;z-index:0;display:block} .hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 46%} .hero-img::after{content:"";position:absolute;inset:0; background: linear-gradient(101deg,var(--scrim1) 0%,var(--scrim2) 34%,var(--scrim3) 62%,var(--scrim4) 100%), linear-gradient(180deg,var(--scrim-top) 0%,transparent 32%)} /* Auf dem Telefon steht der Text über der ganzen Breite — dort läuft der Verlauf von oben nach unten, nicht von links nach rechts. */ @media(max-width:700px){ .hero-img::after{background: linear-gradient(180deg,var(--scrim-m1) 0%,var(--scrim-m2) 38%,var(--scrim-m3) 100%)} } .hero-credit{position:absolute;right:14px;bottom:9px;z-index:2;font-size:11px; color:var(--art-credit,rgba(255,255,255,.55))} /* Szene aus dem Spiel im Fließtext, mit Bildunterschrift. */ .shot{margin-top:24px;background:var(--panel);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .shot img{width:100%;height:auto;display:block} .shot figcaption{padding:13px 18px;font-size:14.5px;color:var(--mut)} .shot-credit{opacity:.66;font-size:12.5px} /* ---- Bewegung nur, wenn erwünscht ---------------------------------------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ========================================================================== SPIELSEITEN — eine Welt, Akzent je Spiel (Vereinheitlichung 2026-08-11) Alles unterhalb dieser Marke sind die Bausteine der Spiel-, Server- und Vote-Seiten. Sie sprechen dieselbe Sprache wie die Startseite: Tabellen, 1px-Linien, Mono-Zahlen. Die Spielfarbe kommt aus --accent am . ========================================================================== */ /* ---- Kopfband einer Spielseite ------------------------------------------- Dieselbe Komponente wie die Spielstreifen der Startseite (.strip), nur als Seitenkopf: Keyart hinter dem Text, Brotkrumen, Titel, Fakten. Dadurch sieht der Kopf von /rust exakt aus wie das Rust-Band auf der Startseite. */ .strip--head{min-height:0;border-bottom:1px solid var(--line)} .strip--head .strip-inner{padding:44px 0 52px} .strip .crumbs{margin:0 0 16px;color:#93a0a8} .strip .crumbs a:hover{color:#fff} .strip .crumbs span{color:#c3cdd4} .strip--head h1{font-size:clamp(38px,6.4vw,74px);color:#fff;line-height:.96} .strip--head--compact h1{font-size:clamp(32px,5vw,54px)} /* Faktenzeile auf dem Bild: Live-Stand als Plakette */ .artplate{display:inline-flex;align-items:center;gap:9px;margin-top:22px; padding:10px 15px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em; color:#dfe5e9;border:1px solid rgba(255,255,255,.24);background:rgba(10,14,17,.55)} .artplate b{font-size:16px;font-weight:600;color:#fff} .strip .connect{max-width:600px;margin-top:20px} /* ---- Abschnittsüberschrift auf Weiß -------------------------------------- Trägt den 4px-Akzentbalken der Betriebstafel — dasselbe Zeichen wie auf der Startseite, damit Abschnitt und Marke zusammengehören. */ .hd{display:flex;align-items:center;gap:13px;margin:54px 0 20px; font-size:clamp(24px,3.4vw,34px)} .hd::before{content:"";width:5px;height:26px;flex-shrink:0;background:var(--accent)} .under{padding-bottom:80px} .lede-narrow{max-width:66ch;color:var(--txt)} /* ---- Serverkarten (Spielseite) ------------------------------------------- */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:22px} @media(max-width:840px){.grid{grid-template-columns:1fr}} /* Ein Spiel mit nur einem Server: die einzelne Karte bleibt Karteibreite, statt allein in einem Zweierraster zu hängen. */ .grid > .card:only-child{max-width:640px} .card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line2); background:var(--panel)} .cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px; padding:15px 18px 13px;border-bottom:1px solid var(--line)} .cardhead h3{font-size:27px} .status{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;white-space:nowrap; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;border:1px solid var(--line2);color:var(--mut)} .status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .status.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .mapbox{min-width:0} .card .mapbox{border-bottom:1px solid var(--line)} .mapbox a{display:block} .mapbox img{width:100%;height:auto;display:block;background:var(--bg2)} .card .mapbox img{aspect-ratio:16/10;object-fit:cover} .mapph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10; padding:14px;text-align:center;font-family:var(--mono);font-size:12.5px; color:var(--mut);background:var(--bg2);border-bottom:1px dashed var(--line2)} .maprow{display:flex;justify-content:space-between;gap:10px;padding:9px 18px; font-family:var(--mono);font-size:11.5px;color:var(--mut);border-bottom:1px solid var(--line)} .maprow a{color:var(--accent-ink);text-decoration:none} .maprow a:hover{text-decoration:underline;text-underline-offset:3px} .stats{padding:4px 18px} .stats li{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:9px 0;border-bottom:1px solid var(--line);font-size:14px} .stats li:last-child{border-bottom:0} .stats li span{color:var(--mut)} .stats li b{font-family:var(--mono);font-weight:600;font-size:13.5px;color:var(--ink)} .stats li b i{font-style:normal;color:var(--accent-ink)} .cd{font-family:var(--mono);font-weight:600} .perks{display:grid;gap:8px;padding:16px 18px 6px} .perks li{display:flex;align-items:center;gap:10px;padding:9px 12px; font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:var(--txt);border:1px solid var(--line);background:var(--bg2)} .perks svg{width:14px;height:14px;flex-shrink:0;color:var(--accent-ink)} .cardlinks{display:grid;gap:9px;margin-top:auto;padding:14px 18px 18px} .btn--block{display:flex;width:100%} /* Verbindungsfeld auf hellem Grund (in Karten und Panels) */ .card .connect,.panel .connect{margin:14px 18px 0;background:var(--bg2); border-color:var(--line2)} .card .connect code,.panel .connect code{color:var(--ink)} .connect-prompt{display:flex;align-items:center;padding-right:2px; font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent-ink);user-select:none} .strip .connect-prompt{color:var(--accent)} .copy{flex-shrink:0;padding:8px 14px;font-family:var(--mono);font-size:12px;font-weight:600; letter-spacing:.06em;border:1px solid var(--line2);background:var(--panel);color:var(--ink); transition:background .16s,color .16s,border-color .16s} .copy:hover{background:var(--ink);border-color:var(--ink);color:#fff} .strip .copy{background:transparent;border-color:rgba(255,255,255,.34);color:#fff} .strip .copy:hover{background:#fff;border-color:#fff;color:#0d1114} /* ---- Panels (Server-Detail: Karte / Live-Status) ------------------------- */ .panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line2); background:var(--panel)} .panel-h{padding:13px 18px;font-size:19px;border-bottom:1px solid var(--line2); background:var(--bg2)} .panel .stats{padding:4px 18px} .panel .mapbox img{aspect-ratio:auto} .panel-foot{padding:14px 18px 18px;margin-top:auto} /* ---- Verbinden-Schritte (die Reihenfolge ist die Information) ------------ */ .steps{counter-reset:st;display:grid;gap:10px;max-width:72ch;margin-top:18px} .steps li{position:relative;padding:13px 16px 13px 52px;border:1px solid var(--line); background:var(--panel);font-size:14.5px} .steps li::before{counter-increment:st;content:counter(st,decimal-leading-zero); position:absolute;left:16px;top:14px;font-family:var(--mono);font-size:12px; font-weight:600;color:var(--accent-ink)} .steps code{padding:1px 6px;background:var(--bg2);border:1px solid var(--line)} /* ---- Fließtext-Absätze (Server-Detail) ----------------------------------- */ .prose{display:grid;gap:14px;max-width:72ch;margin-top:16px} .prose b,.prose strong{color:var(--ink)} .prose a{color:var(--accent-ink)} .linkrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} /* ---- Map-Vote ------------------------------------------------------------ */ .votebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px; padding:14px 16px;border:1px solid var(--line2);background:var(--bg2)} .votebar form{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .votebar input{min-height:42px;padding:9px 12px;border:1px solid var(--line2); background:var(--panel);font:inherit;color:var(--ink)} .votebar input::placeholder{color:var(--mut)} .votebar .quiet{color:var(--mut);font-size:14px} .voteblock{margin-top:30px;border:1px solid var(--line2);background:var(--panel); scroll-margin-top:84px} .vbhead{display:flex;justify-content:space-between;align-items:center;gap:10px; flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--line2);background:var(--bg2)} .vbhead h2{font-size:27px} .vbmeta{display:flex;gap:8px;flex-wrap:wrap} .plate{display:inline-flex;align-items:center;gap:7px;padding:6px 11px; font-family:var(--mono);font-size:12px;color:var(--mut); border:1px solid var(--line2);background:var(--panel)} .plate b{font-weight:600;color:var(--ink)} .cands{display:grid;grid-template-columns:1fr 1fr} .cand{position:relative;display:flex;flex-direction:column;min-width:0} .cand + .cand{border-left:1px solid var(--line)} @media(max-width:700px){ .cands{grid-template-columns:1fr} .cand + .cand{border-left:0;border-top:1px solid var(--line)} } .cand .mapbox{border-bottom:1px solid var(--line)} .cand .mapbox img{aspect-ratio:1/1;object-fit:cover} .cand .mapph{aspect-ratio:1/1;border-bottom:1px dashed var(--line2)} .candbody{display:flex;flex-direction:column;gap:10px;padding:14px 18px 18px} .candtop{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .candtop b{font-family:var(--display);font-weight:800;font-size:20px; letter-spacing:.02em;text-transform:uppercase;color:var(--ink)} .candtop .muted,.mons{font-family:var(--mono);font-size:12px;color:var(--mut)} .mons{margin:0} /* Der eine inszenierte Moment der Seite: die Balken wachsen beim Laden. */ .bar{height:10px;border:1px solid var(--line2);background:var(--bg2)} .bar span{display:block;height:100%;background:var(--accent);transform-origin:left} @media(prefers-reduced-motion:no-preference){.bar span{animation:grow .6s cubic-bezier(.22,1,.36,1)}} @keyframes grow{from{transform:scaleX(0)}} .barrow{display:flex;justify-content:space-between;font-family:var(--mono); font-size:12.5px;color:var(--mut)} .barrow span:first-child{color:var(--ink);font-weight:600} .cand.won{outline:2px solid var(--accent);outline-offset:-2px} .yourvote{padding:9px 0 1px;text-align:center;font-family:var(--mono);font-size:11px; font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink)} .muted{color:var(--mut)} /* ---- Belegungs-Anzeige (Palworld: ein Kreis je Platz) --------------------- */ .meter{display:flex;flex-wrap:wrap;gap:6px} .meter span{width:13px;height:13px;border-radius:50%; border:1px solid var(--line2);background:var(--bg2)} .meter span.is-on{background:var(--accent);border-color:var(--accent)} .meter-cap{margin-top:12px;font-size:13.5px;color:var(--mut)} .meter-cap b{font-family:var(--mono);color:var(--ink)} /* ---- Einstellungs-Tabelle (Palworld-Server) ------------------------------- */ .spec{margin-top:20px;border:1px solid var(--line2);background:var(--panel)} .spec-row{display:grid;grid-template-columns:1.5fr auto;gap:2px 18px; padding:11px 18px;border-bottom:1px solid var(--line)} .spec-row:last-child{border-bottom:0} .spec-k{font-size:14.5px;color:var(--txt)} .spec-v{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--ink); text-align:right;white-space:nowrap} .spec-n{grid-column:1/-1;font-size:13px;color:var(--mut)} @media(max-width:560px){.spec-row{grid-template-columns:1fr}.spec-v{text-align:left}} /* ---- Spiel-FAQ ------------------------------------------------------------ */ .faqsec{margin-top:36px} .faqsec + .faqsec{margin-top:44px} .faq-foot{margin-top:28px} .faq-foot a,.note a{color:var(--accent-ink)} [data-lang-pane]{margin-top:34px} .candbody form{display:grid} /* ---- Sprachumschalter-Panes (Regeln DE/EN) -------------------------------- */ [data-lang-pane][hidden]{display:none!important} /* ---- Admin ----------------------------------------------------------------- */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .admintbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px} .admintbl th{font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--mut);text-align:left} .admintbl th,.admintbl td{padding:9px 10px;border-bottom:1px solid var(--line)} .admintbl td{font-family:var(--mono);font-size:13px} @media(max-width:768px){.admintbl{min-width:520px}} /* ---- Fehlerseiten (404/403) ---------------------------------------------- */ .errpage{padding:72px 0 90px} .errcode{font-family:var(--display);font-weight:800;font-size:clamp(88px,17vw,180px); line-height:.86;letter-spacing:.01em;color:var(--line2)} .errpage h1{margin-top:10px;font-size:clamp(28px,4.4vw,44px)} .errpage .page-lede{max-width:56ch} .errcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}