/* Empire Life – Community-Roadmap (Startseite und Hub). Nutzt die Farben der
   jeweiligen Seite, wenn vorhanden, sonst die eigenen Werte. */
:root{ --er-gruen: #19d394; --er-blau: #1488ff; --er-violett: #b46cff; --er-gelb: #ffb72d; --er-pink: #f2057d; }
.eroad-wurzel{
  --er-flaeche: var(--surface, #0e0e14);
  --er-flaeche-2: var(--surface-up, var(--surface-2, #13131b));
  --er-linie: var(--line, #272733);
  --er-leise: var(--muted, #9b9ba9);
}
.eroad-zahlen{display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 28px; overflow:hidden; border:1px solid var(--er-linie); border-radius:12px; background:rgba(255,255,255,.018)}
.eroad-zahl{padding:18px 22px; border-right:1px solid var(--er-linie)}
.eroad-zahl:last-child{border-right:0}
.eroad-zahl strong{display:block; font-size:1.45rem; line-height:1}
.eroad-zahl span{display:block; margin-top:7px; color:var(--er-leise); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.eroad-spalten{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; align-items:start}
.eroad-spalte{display:flex; flex-direction:column; gap:10px; min-width:0}
.eroad-spalte-kopf{display:flex; align-items:center; gap:10px; margin:0; font-size:.78rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase}
.eroad-spalte-kopf::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--er-farbe, var(--er-leise)); box-shadow:0 0 14px var(--er-farbe, transparent)}
.eroad-spalte-kopf small{margin-left:auto; color:var(--er-leise); font-size:.72rem; letter-spacing:0}
.eroad-spalte-text{margin:-4px 0 4px; color:var(--er-leise); font-size:.74rem}
.eroad-in_arbeit{--er-farbe:var(--er-gruen)}
.eroad-geplant{--er-farbe:var(--er-blau)}
.eroad-pruefung{--er-farbe:var(--er-gelb)}
.eroad-umgesetzt{--er-farbe:var(--er-violett)}
.eroad-karte{position:relative; padding:18px 18px 16px; border:1px solid var(--er-linie); border-left:3px solid var(--er-farbe, var(--er-linie)); border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 44%),var(--er-flaeche)}
.eroad-kopf{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.eroad-bereich,.eroad-community{display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--er-linie); color:var(--er-leise)}
.eroad-b-zivil{color:#8cc4ff; border-color:rgba(67,156,246,.4)}
.eroad-b-fraktion{color:#d9a3ff; border-color:rgba(184,8,241,.4)}
.eroad-b-crime{color:#ff8fb0; border-color:rgba(235,0,76,.42)}
.eroad-community{color:#c8b5ff; border-color:rgba(120,69,255,.42); background:rgba(120,69,255,.1)}
.eroad-karte h3{margin:0 0 6px; font-size:1.02rem; line-height:1.35; overflow-wrap:anywhere}
.eroad-karte p{margin:0; color:var(--er-leise); font-size:.82rem; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere}
.eroad-fuss{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); color:var(--er-leise); font-size:.7rem}
.eroad-stand{color:var(--er-farbe); font-weight:800}
.eroad-mehr{margin:0; color:var(--er-leise); font-size:.74rem}
.eroad-pill{display:inline-flex; align-items:center; gap:6px; width:max-content; padding:.33rem .55rem; border-radius:999px; font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--er-farbe, #8dc1ff); border:1px solid currentColor; background:rgba(255,255,255,.03)}
.eroad-pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.eroad-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px; color:var(--er-leise); font-size:.86rem}
/* Spielerstimmen */
.eroad-stimm-wrap{margin-top:10px}
.eroad-stimmen{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.eroad-stimme{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--er-linie); border-radius:999px;
  background:rgba(255,255,255,.03); color:var(--er-leise); font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; transition:border-color .15s ease,color .15s ease,background .15s ease}
.eroad-stimme b{color:#fff; font-weight:800}
.eroad-stimme:hover{border-color:var(--er-farbe, var(--er-violett)); color:#fff}
.eroad-stimme:focus-visible{outline:2px solid var(--er-violett); outline-offset:2px}
.eroad-stimme.ist-an{border-color:var(--er-gruen); background:rgba(25,211,148,.12); color:#9ff0cf}
.eroad-minus.ist-an{border-color:var(--er-pink); background:rgba(242,5,125,.12); color:#ff9fcb}
.eroad-ic{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.eroad-ic.ist-runter{transform:scaleY(-1)}
.eroad-link{padding:0; border:0; background:none; color:var(--er-leise); font:inherit; font-size:.72rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.eroad-link:hover{color:#fff}
.eroad-feedback{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.eroad-feedback textarea{width:100%; min-height:56px; padding:8px 10px; resize:vertical; border:1px solid var(--er-linie); border-radius:8px;
  background:rgba(0,0,0,.25); color:#fff; font:inherit; font-size:.8rem; line-height:1.5}
.eroad-feedback textarea:focus{outline:2px solid var(--er-violett); outline-offset:1px}
.eroad-feedback-zeile{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.eroad-senden{padding:6px 14px; border:0; border-radius:999px; background:var(--er-violett); color:#fff; font:inherit; font-size:.74rem; font-weight:800; cursor:pointer}
.eroad-hinweis{margin:8px 0 0; color:var(--er-leise); font-size:.74rem}
.eroad-hinweis a{color:#fff}
.eroad-hinweis.ist-ok{color:#9ff0cf}
.eroad-hinweis.ist-fehler{color:#ff9fb0}
.eroad-klein{color:var(--er-leise); font-size:.72rem}
.eroad-stimm-hinweis{margin:18px 0 0; color:var(--er-leise); font-size:.8rem}
.eroad-update-tag{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; font-size:.6rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#9ff0cf; border:1px solid rgba(25,211,148,.4); background:rgba(25,211,148,.08)}
.eroad-update-tag .eroad-ic{width:11px; height:11px}

/* Updates und Patchnotes */
.eroad-updates{margin:0 0 30px}
.eroad-block-titel{margin:0 0 12px; font-size:.78rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase}
.eroad-update-reihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:22px}
.eroad-update{padding:18px 20px; border:1px solid var(--er-linie); border-radius:12px;
  background:linear-gradient(145deg,rgba(120,69,255,.1),transparent 55%),var(--er-flaeche)}
.eroad-update-kopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.eroad-update-kopf h4{margin:0; font-size:1.05rem; overflow-wrap:anywhere}
.eroad-update-kopf .eroad-pill{margin-left:auto}
.eroad-version{flex:none; padding:3px 9px; border-radius:999px; background:linear-gradient(90deg,#EB004C,#B808F1 50%,#338CFF); color:#fff; font-size:.7rem; font-weight:800}
.eroad-us-geplant{--er-farbe:var(--er-blau)} .eroad-us-in_arbeit{--er-farbe:var(--er-gruen)} .eroad-us-test{--er-farbe:var(--er-gelb)}
.eroad-update-ziel{margin:8px 0 10px; color:var(--er-leise); font-size:.8rem}
.eroad-balken{height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07)}
.eroad-balken span{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#EB004C,#B808F1 50%,#338CFF)}
.eroad-balken + .eroad-klein{margin:6px 0 0}
.eroad-update-text{margin:10px 0 0; color:var(--er-leise); font-size:.84rem; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere}
.eroad-update-eintraege{margin:12px 0 0; padding-left:18px; font-size:.82rem; line-height:1.7}
.eroad-update-eintraege a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px}
.eroad-patch{margin-bottom:10px; border:1px solid var(--er-linie); border-radius:12px; background:var(--er-flaeche)}
.eroad-patch summary{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; padding:14px 18px; cursor:pointer; list-style:none}
.eroad-patch summary::-webkit-details-marker{display:none}
.eroad-patch summary::after{content:"+"; margin-left:auto; color:var(--er-leise); font-weight:800}
.eroad-patch[open] summary::after{content:"–"}
.eroad-patch summary .eroad-update-kopf{flex:1 1 auto}
.eroad-patch-inhalt{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 22px; padding:0 18px 16px}
.eroad-patch-inhalt > .eroad-update-text{grid-column:1/-1; margin:0; padding:0; font-size:.84rem}
.eroad-patch-block h5{margin:0 0 6px; font-size:.66rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:var(--er-leise)}
.eroad-pb-zivil h5{color:#8cc4ff} .eroad-pb-fraktion h5{color:#d9a3ff} .eroad-pb-crime h5{color:#ff8fb0}
.eroad-patch-block ul{margin:0; padding-left:18px; font-size:.84rem; line-height:1.65}
.eroad-patch-block li{overflow-wrap:anywhere}
.eroad-zuletzt{margin:0 0 12px; color:var(--er-leise); font-size:.78rem}
.eroad-zuletzt a{color:#fff}
.eroad-panel .eroad-update{padding:12px 14px}
.eroad-panel .eroad-update-reihe{margin-bottom:12px}
.eroad-panel .eroad-stimme{padding:3px 8px}

/* Hub: kompakte Fassung über den Vorschlägen */
.eroad-panel{margin-bottom:1rem}
.eroad-panel .eroad-karte{padding:12px 14px}
.eroad-panel .eroad-karte h3{font-size:.86rem; margin:0}
.eroad-panel .eroad-kopf{margin-bottom:6px}
.eroad-panel .eroad-fuss{margin-top:8px; padding-top:6px}
@media (max-width:760px){
  .eroad-update-kopf .eroad-pill{margin-left:0}
  .eroad-zahlen{grid-template-columns:1fr 1fr}
  .eroad-zahl:nth-child(2){border-right:0}
  .eroad-zahl:nth-child(-n+2){border-bottom:1px solid var(--er-linie)}
}