:root{
  --bg:#0b0d0f;
  --panel:#12161a;
  --panel2:#0f1316;
  --border:#2a2f35;
  --title:#f3d24c;     /* gelb */
  --text:#d9cfb0;      /* beige */
  --muted:#a69d86;
  --accent:#ffd84f;
  --danger:#ff5a5a;
  --ok:#57ff8a;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:1800px; margin:0 auto; padding:18px; }

.topbar{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #0d1013, #07090b);
  position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:12px; padding:12px 18px; }
.brand .logo{
  width:34px; height:34px; border:1px solid var(--border);
  background: radial-gradient(circle at 30% 30%, #2b333b, #0c0f12);
  border-radius:6px;
}
.brand h1{ margin:0; font-size:18px; letter-spacing:1px; color:var(--title); text-transform:uppercase; }

.nav{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:0 18px 12px 18px;
}
.nav a{
  padding:8px 12px;
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:8px;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:0.7px;
}
.nav a.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(255,216,79,.25) inset;
}

.panel{
  background:linear-gradient(180deg, var(--panel), #0f1216);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
h2{
  margin:0 0 12px 0;
  color:var(--title);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:20px;
}
.small{ color:var(--muted); font-size:13px; }

.grid{ display:grid; grid-template-columns: 1fr; gap:14px; }
@media (min-width: 900px){ .grid{ grid-template-columns: 2fr 1fr; } }

.input, .select, .textarea{
  width:100%;
  border:1px solid var(--border);
  background:#0b0f12;
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  outline:none;
}
.textarea{ min-height:140px; resize:vertical; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:#10151a;
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.7px;
}
.btn:hover{ border-color:var(--accent); }
.btn.primary{ border-color:rgba(255,216,79,.6); background:#151b21; }
.btn.danger{ border-color:rgba(255,90,90,.5); color:#ffd0d0; }

.table{ width:100%; border-collapse:collapse; }
.table th, .table td{
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
}
.badge{
  display:inline-block;
  padding:4px 8px;
  border:1px solid var(--border);
  background:#0b0f12;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  margin-right:6px;
}
.footer{ margin-top:24px; color:var(--muted); font-size:12px; text-align:center; padding:18px; }
/* --- Normalize / Baseline --- */
input, select, textarea, button{
  font: inherit;
  color: inherit;
}

form{ margin:0; }
label{ display:block; }

/* --- Make native elements look like your .input/.select/.textarea --- */
input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea{
  width:100%;
  border:1px solid var(--border);
  background:#0b0f12;
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  outline:none;
}

/* Focus */
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,216,79,.7);
  box-shadow: 0 0 0 2px rgba(255,216,79,.18);
}

/* Textarea */
textarea{ min-height:140px; resize:vertical; }

/* Checkbox/Radio alignment */
input[type="checkbox"], input[type="radio"]{
  width:auto;
  margin:0;
  accent-color: var(--accent);
}
a.btn{ text-decoration:none; }
a.btn:hover{ text-decoration:none; }

button.btn{
  appearance:none;
  -webkit-appearance:none;
}

.btn{
  line-height:1;
  user-select:none;
}
table{
  width:100%;
  border-collapse:collapse;
}

table th, table td{
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
}

table thead th{
  color: var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:12px;
}
/* Better spacing in panels */
.panel .panel{
  box-shadow:none;
}

/* Headings inside nested panels */
.panel h2:last-child{ margin-bottom:0; }

/* Optional: nicer code blocks (falls Content HTML/Markdown enthält) */
pre, code{
  background:#0b0f12;
  border:1px solid var(--border);
  border-radius:10px;
}
pre{ padding:12px; overflow:auto; }

/* Badges in flex wrap use-case */
.badge{ white-space:nowrap; }
.mapbar select,
.mapbar input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(12,16,22,.85);
  color: #fff;
  outline: none;
  appearance: none;
}

.mapbar select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}

.mapbar select:focus,
.mapbar input:focus {
  border-color: rgba(120,180,255,.55);
  box-shadow: 0 0 0 3px rgba(120,180,255,.15);
}

/* Dropdown-Liste (option) — eingeschränkt je nach Browser */
.mapbar select option {
  background: #0b0f14;
  color: #fff;
}

/* Optional: breiterer Scrollbar-Look im Panel */
.mapbar {
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}