:root{--bg:#0f1216;--panel:#161a20;--muted:#9aa3af;--text:#e5e7eb;--accent:#BBA14F;--border:#23272e}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--text);text-decoration:none}
a.link{color:var(--text);text-decoration:none}
.wrap{max-width:1200px;margin:24px auto;padding:0 14px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.logo{font-family:"Bebas Neue",sans-serif;font-size:40px;letter-spacing:2px;color:var(--text)}
.nav a{color:var(--accent);text-decoration:none;margin-left:10px;border:1px solid #9b8842;padding:8px 12px;border-radius:10px}
.nav a:hover{background:var(--accent);color:#0b0d10}
.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.35);margin-bottom:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #9b8842;background:var(--accent);color:#0b0d10;text-decoration:none;font-weight:700}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #9b8842;background:transparent;color:var(--accent);text-decoration:none}
.btn-outline:hover{background:var(--accent);color:#0b0d10}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #9b8842;border-radius:12px;background:transparent;color:var(--accent)}
.iconbtn:hover{background:var(--accent);color:#0b0d10}
input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a2f33;background:#0f1216;color:#e5e7eb}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:900px){.grid{grid-template-columns:1fr}}
.list{width:100%;border-collapse:collapse}
.list th,.list td{padding:12px 8px;border-bottom:1px solid var(--border);text-align:left}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid #3a3f46;background:#101316;color:#cdd3db;font-size:12px}
.muted{color:var(--muted)}
.err{background:#3a1a1a;border:1px solid #6a2a2a;color:#f5caca;padding:10px;border-radius:10px;margin:8px 0}
.ok{background:#1a3a1a;border:1px solid #2a6a2a;color:#c9f5ca;padding:10px;border-radius:10px;margin:8px 0}
/* -- Admin table: delete button klickbar machen -- */
.list tr { position: relative; }

/* falls Zeilen-Overlay/Hover existiert: Klicks nicht abfangen */
.list tr::before,
.list tr::after {
  pointer-events: none !important;
}

/* Buttons/Formulare in Tabellenzellen ganz nach oben */
.list td form,
.list td .btn-outline {
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
}

/* falls du irgendwo "stretch-link" nutzt, nimm der den Klick weg */
.stretch-link {
  pointer-events: none !important;
}
/* --- Click-Fix für Action-Buttons in Tabellen --- */
.list tr::before,
.list tr::after { pointer-events: none !important; }  /* evtl. Hover-Overlays entwaffnen */

.list td:last-child,
.list td.actions { position: relative; z-index: 20; }

.list td:last-child .btn-outline,
.list td:last-child .iconbtn,
.list td.actions .btn-outline,
.list td.actions .iconbtn {
  position: relative;
  z-index: 30;
  pointer-events: auto !important;   /* Button soll Clicks bekommen */
}

/* Falls irgendwo "stretch-link" oder Row-Links genutzt werden: neutralisieren */
.stretch-link,
.row-link { pointer-events: none !important; }
.badge-bot{
  border:1px solid #8457e6;
  background:rgba(132,87,230,.12);
  color:#d6c9ff;
}
/* Global Font */
body, button, input, textarea, select, table, th, td {
  font-family: 'Space Mono', monospace !important;
}

/* ===== Space Mono global (keine Größenänderung) ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
body, button, input, textarea, select, table, th, td {
  font-family: 'Space Mono', monospace !important;
}

/* ===== Mikreativo-Style für Server-Detail ===== */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #9b8842;border-radius:12px;background:transparent;color:var(--accent)}
.iconbtn:hover{background:var(--accent);color:#0b0d10}

.muted { color: var(--muted); }
.banner-img{
  display:block;
  width:560px;       /* Banner ist 560x95  – gleiche Größe wie die PNG */
  height:95px;
  border:1px solid rgba(187,161,79,.35);
  border-radius:10px;
  background:#0f1216;
}

.codebox{
  width:100%;
  min-height:84px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #23272e;
  background:#0f1216;
  color:#e5e7eb;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  resize:vertical;
}
/* ========== Base: flüssige Typo & Abstände ========== */
:root{
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --radius: 18px;
}
html { font-size: 16px; }
@media (max-width: 900px){ html { font-size: 15px; } }
@media (max-width: 680px){ html { font-size: 14px; } }

/* Container */
.wrap{max-width:1200px; margin:24px auto; padding:0 var(--space-2);}
@media (max-width: 680px){ .wrap{ margin:16px auto; } }

/* Karten/Flächen */
.card{ border-radius: var(--radius); padding: var(--space-3); }
@media (max-width: 680px){ .card{ padding: var(--space-2); } }

/* Topbar/Logo/Nav */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-3); margin-bottom: var(--space-2);
}
.logo{ font-size: clamp(26px, 3.2vw, 40px); }

.nav{ display:flex; gap: var(--space-2); flex-wrap:wrap; }
.nav a{ padding:8px 12px; border-radius:10px; }

/* Mobile Burger */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--border); border-radius:12px;
  background:transparent; color:var(--accent);
}
@media (max-width: 860px){
  .nav{ display:none; width:100%; flex-direction:column; gap:8px; }
  .nav.is-open{ display:flex; }
  .nav-toggle{ display:inline-flex; }
}

/* Grids */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-3); }
@media (max-width: 1100px){ .grid{ grid-template-columns: 1fr; } }

/* Chips/Badges */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:#101316; color:#cdd3db;
  padding:6px 10px; border-radius:999px; font-size:12px; line-height:1;
}
.chip.small{ font-size:11px; padding:4px 8px; }
.chip.green{ border-color:#1a5530; color:#7DFFA4; background:#0f1f16; }
.chip.red  { border-color:#5a2323; color:#ff9c9c; background:#1a0f0f; }

/* Buttons auf Mobile größer anklickbar */
.btn, .btn-outline, .iconbtn{
  min-height:40px; line-height:20px;
  touch-action: manipulation;
}

/* ========= Tabellen: zwei Modi ========= */

/* A) Kleine Tabellen: horizontales Scrollen */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll .list{ min-width:600px; }

/* B) Stacked Rows (schöne Kartenansicht) */
.table-stack .list{ width:100%; border-collapse:collapse; }
.table-stack .list thead{ display:none; }
.table-stack .list tr{
  display:block; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:10px; margin-bottom:10px;
}
.table-stack .list td{
  display:flex; justify-content:space-between; gap:10px;
  padding:8px 4px; border-bottom:1px dashed var(--border);
}
.table-stack .list td:last-child{ border-bottom:0; }
.table-stack .list td::before{
  content: attr(data-label);
  color: var(--muted); font-size: 12px; margin-right: 12px;
}

/* Breakpoint Auswahl: bis 760px gestapelt, sonst normal */
@media (max-width: 760px){
  .table-responsive { display:block; }
  .table-responsive .list{ width:100%; }
  .table-responsive.use-stack { display:block; }
  .table-responsive.use-stack .list{ min-width:0; }
  .table-responsive.use-stack{ /* nutzt table-stack Styles */ }
}

/* ========= Banner-Bereich (Preview) ========= */
.banner-card img{ width:100%; height:auto; display:block; border-radius:12px; }
.banner-kv{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
@media (max-width: 680px){
  .banner-kv { gap:8px; }
  .codebox{ height:110px; font-size:11px; }
}

/* ========= Wortumbrüche, damit nichts sprengt ========= */
a, .chip, td, th { word-break: break-word; }
.mono{ font-family: 'Space Mono', monospace; }

/* ========= Fix: Action-Buttons in Tabellen immer klickbar ========= */
.list tr{ position:relative; }
.list tr::before, .list tr::after{ pointer-events:none !important; }
.list td.actions, .list td.actions *{
  position:relative; z-index:10; pointer-events:auto !important;
}
/* ===== Homepage layout ===== */
.home-wrap { display: grid; gap: 18px; }

/* HERO */
.home-hero .hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}
@media (max-width: 1000px){
  .home-hero .hero-grid { grid-template-columns: 1fr; }
}
.home-hero h1 { margin: 0 0 8px; font-size: 28px; }
.home-hero .cta { display:flex; gap:10px; margin:12px 0; }
.hero-badges { display:flex; gap:8px; flex-wrap:wrap; }

.promo-banner {
  width: 100%; height: 160px;
  border:1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.15));
  display:flex; align-items:center; justify-content:center;
}
.promo-banner .promo-fallback { text-align:center; color: var(--muted); }
.promo-banner .promo-fallback div { font-weight:700; }

/* STATS */
.stats-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px){
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat { text-align:center; }
.stat-k { font-size: 28px; font-weight: 800; }
.stat-l { font-size: 12px; }

/* TWO COL FEEDS */
.two-col {
  display:grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1000px){
  .two-col { grid-template-columns: 1fr; }
}
.feed { list-style:none; padding:0; margin:0; }
.feed li {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.feed li:last-child { border-bottom:0; }
.feed .feed-main { display:flex; gap:10px; align-items:center; }
.feed .feed-main .muted { font-size: 12px; }
.feed .feed-side { display:flex; gap:8px; align-items:center; }

/* WIDE PROMO */
.promo-wide { display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; }
@media (max-width: 1000px){ .promo-wide { grid-template-columns: 1fr; } }
.promo-img {
  min-height: 160px; border:1px solid var(--border); border-radius:14px;
  background: radial-gradient(60% 70% at 70% 30%, rgba(255,255,255,.06), rgba(0,0,0,0));
}
.promo-copy .cta { margin-top:10px; display:flex; gap:10px; }

/* RANKING HEAD */
.ranking-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }

/* Minor polish */
.card h2 { margin: 0 0 6px; }
.mono { font-family: 'Space Mono', monospace; }
/* Gemeinsamer Container für alle Seiten */
.container{
  max-width: 1200px;   /* gewünschte feste Breite */
  margin: 0 auto;      /* zentriert */
  padding: 0 20px;     /* etwas Innenabstand links/rechts */
}
.flag {
  width: 20px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
}

.gicon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}