:root {
  --grund: #101a2c;
  --karte: #16243c;
  --hell: #eef3fb;
  --gedaempft: #9fb0cc;
  --rand: #2b3d5e;
  --gruen: #4fbb5f;
  --blau: #2f6fd0;
  --rot: #e4576f;
}

* { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--grund); color: var(--hell);
  line-height: 1.5;
}

.huelle { max-width: 1000px; margin: 0 auto; padding: 24px 18px 48px; }
.breit { max-width: 1240px; }

.kopfleiste {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--rand); margin-bottom: 26px;
}
.kopfleiste h1 { margin: 0; font-size: 24px; }
.kopfleiste .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.kopfleiste .wer { color: var(--gedaempft); font-size: 14px; }

h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 1.3px;
     color: var(--gedaempft); margin: 30px 0 12px; }

button, .knopf {
  background: #1e2e4b; color: var(--hell); border: 2px solid var(--rand);
  border-radius: 10px; padding: 9px 16px; font-size: 15px; font-family: inherit;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .12s;
}
button:hover:not(:disabled), .knopf:hover { background: #27395c; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.haupt { background: var(--gruen); border-color: #7ddc8c; color: #08240e; font-weight: 700; }
button.haupt:hover:not(:disabled) { background: #62d173; }
button.gefahr { border-color: #7a3242; color: #ef8fa2; }
button.klein { padding: 5px 11px; font-size: 13px; }

input, textarea, select {
  background: #0d1729; color: var(--hell); border: 2px solid var(--rand);
  border-radius: 9px; padding: 10px 13px; font-size: 15px; font-family: inherit;
  width: 100%;
}
input:focus, textarea:focus { outline: none; border-color: var(--blau); }
textarea { resize: vertical; min-height: 90px; }
label { display: block; font-size: 13px; color: var(--gedaempft); margin: 12px 0 5px; }

.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 14px;
}

.meldung { padding: 11px 15px; border-radius: 9px; margin: 12px 0; font-size: 14px; }
.meldung.fehler { background: #3a1520; border: 1px solid #7a3242; color: #ffb3c0; }
.meldung.gut { background: #14301b; border: 1px solid #2f7a42; color: #9fe6ae; }
.meldung.hinweis { background: #1a2740; border: 1px solid var(--rand); color: var(--gedaempft); }

.anmeldung { max-width: 380px; margin: 60px auto; }

/* Spielauswahl */
.spielgitter { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.spielkachel {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 16px;
  padding: 22px; text-decoration: none; color: inherit; display: block;
  transition: transform .12s, border-color .12s;
}
.spielkachel:hover { transform: translateY(-3px); border-color: var(--gruen); }
.spielkachel .tiere { font-size: 40px; letter-spacing: 4px; margin-bottom: 10px; }
.spielkachel h3 { margin: 0 0 6px; font-size: 21px; }
.spielkachel p { margin: 0; color: var(--gedaempft); font-size: 14px; }
.spielkachel .marke {
  display: inline-block; margin-top: 12px; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gruen); border: 1px solid #2f7a42;
  border-radius: 20px; padding: 3px 11px;
}
.bald { opacity: .4; pointer-events: none; }

/* Reiter im Backend */
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.reiter button.aktiv { background: var(--blau); border-color: #79aaf0; color: #fff; }
.blatt { display: none; }
.blatt.sichtbar { display: block; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rand); }
th { color: var(--gedaempft); font-weight: 600; font-size: 12px;
     text-transform: uppercase; letter-spacing: .8px; }

code, pre { font-family: "Cascadia Mono", Consolas, monospace; font-size: 13px; }
pre {
  background: #0b1424; border: 1px solid var(--rand); border-radius: 9px;
  padding: 13px; overflow: auto; max-height: 420px; white-space: pre-wrap;
  word-break: break-word;
}

.verlauf { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.blase { padding: 12px 16px; border-radius: 13px; max-width: 85%; white-space: pre-wrap; }
.blase.user { background: #1e3557; align-self: flex-end; }
.blase.assistant { background: var(--karte); border: 1px solid var(--rand); align-self: flex-start; }
.blase .wer { font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
              color: var(--gedaempft); margin-bottom: 5px; }

.hinweisbalken {
  border-left: 4px solid #d1a03a; background: #2a2413; color: #f0d9a0;
  padding: 12px 16px; border-radius: 0 10px 10px 0; margin-bottom: 18px; font-size: 14px;
}