:root {
  --grund: #121216;
  --flaeche: #1b1b21;
  --flaeche-2: #24242c;
  --linie: #2f2f39;
  --text: #ececf1;
  --text-2: #a1a1ad;
  --text-3: #6d6d79;
  --akzent: #ffb347;
  --akzent-text: #1d1405;
  --gruen: #3ba55d;
  --rot: #e5484d;
  --radius: 12px;
  --kopf: "Bricolage Grotesque", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grund); color: var(--text); font: 14px/1.45 Inter, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img:not([src]), img[src=""] { visibility: hidden; }

/* Gast */
.gast { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 30%, #2a2116 0, var(--grund) 60%); }
.gast-karte { text-align: center; }
.gast-wuerfel { font-size: 72px; animation: rollen 3s ease-in-out infinite; }
.gast h1 { font: 800 56px/1 var(--kopf); margin: 8px 0 16px; letter-spacing: -.02em; }
.gast p { color: var(--text-2); font-size: 16px; }
.gast code { background: var(--flaeche-2); color: var(--akzent); padding: 3px 8px; border-radius: 6px; }
@keyframes rollen { 0%, 70%, 100% { transform: rotate(0) } 80% { transform: rotate(-14deg) } 90% { transform: rotate(10deg) } }

/* Kopf */
.kopf { display: flex; align-items: center; gap: 24px; padding: 12px 24px; border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; background: rgba(18, 18, 22, .9); backdrop-filter: blur(10px); z-index: 5; }
.marke { display: flex; align-items: center; gap: 10px; }
.marke img { width: 36px; height: 36px; border-radius: 10px; background: var(--flaeche-2); }
.marke-name { font: 800 18px/1 var(--kopf); }
.marke-server { color: var(--text-3); font-size: 12px; }
.reiter { display: flex; gap: 4px; background: var(--flaeche); padding: 4px; border-radius: 10px; }
.reiter button { border: 0; background: none; padding: 6px 14px; border-radius: 7px; cursor: pointer; color: var(--text-2); font-weight: 500; }
.reiter button.aktiv { background: var(--flaeche-2); color: var(--text); }
.ich { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.ich img { width: 28px; height: 28px; border-radius: 50%; }

/* Allgemein */
label, .etikett { display: block; color: var(--text-2); font-size: 12px; font-weight: 500; margin-bottom: 4px; }
label > input, label > select, label > textarea { margin-top: 4px; }
input, select, textarea { width: 100%; font-size: 14px; color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 8px;
  padding: 8px 10px; outline: none; transition: border-color .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--akzent); }
textarea { resize: vertical; }
button { cursor: pointer; }
.haupt, .zweit { border: 0; border-radius: 8px; padding: 9px 18px; font-weight: 600; white-space: nowrap; }
.haupt { background: var(--akzent); color: var(--akzent-text); }
.haupt:hover { filter: brightness(1.08); }
.zweit { background: var(--flaeche-2); }
.zweit:hover { background: var(--linie); }
.leise { background: none; border: 0; color: var(--text-2); padding: 4px 8px; border-radius: 6px; }
.leise:hover { background: var(--flaeche-2); color: var(--text); }
.gefahr:hover { color: var(--rot); }
.zeile { display: grid; gap: 12px; margin-bottom: 14px; }
.zeile.zwei { grid-template-columns: 1fr 1fr; }
.zeile.drei { grid-template-columns: repeat(3, 1fr); }
.status { color: var(--text-3); font-size: 12px; margin-right: auto; }
.status.fehler { color: var(--rot); }
.status.gut { color: var(--gruen); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; }
h2 { font: 600 20px/1.2 var(--kopf); margin: 0 0 16px; }

/* Vorlagen */
.vorlagen { display: grid; grid-template-columns: 220px minmax(380px, 1fr) minmax(420px, 1fr); min-height: calc(100vh - 61px); }
.liste { border-right: 1px solid var(--linie); padding: 16px 12px; }
.neu { width: 100%; border: 1px dashed var(--linie); background: none; border-radius: 8px; padding: 9px; color: var(--text-2); margin-bottom: 12px; }
.neu:hover { border-color: var(--akzent); color: var(--akzent); }
.liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.liste li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text-2); }
.liste li:hover { background: var(--flaeche); color: var(--text); }
.liste li.aktiv { background: var(--flaeche-2); color: var(--text); }
.liste li .punkt { width: 4px; align-self: stretch; border-radius: 2px; }
.liste li .em { font-size: 18px; width: 22px; text-align: center; }

.editor { padding: 24px; overflow: auto; }
.editor > label { margin-bottom: 14px; }
.emoji-feld { max-width: 90px; }
.emoji-feld input { text-align: center; font-size: 20px; padding: 4px; }
.zeile.zwei:has(.emoji-feld) { grid-template-columns: 90px 1fr; }
.farben { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.farben button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.farben button.aktiv { border-color: var(--text); }
.farben input[type=color] { width: 36px; height: 30px; padding: 2px; border-radius: 8px; cursor: pointer; }

.zeile.zwei:has(.bildwahl) { grid-template-columns: 1fr 120px; }
.ablage { position: relative; height: 110px; border: 1px dashed var(--linie); border-radius: 10px; display: grid; place-items: center;
  color: var(--text-3); font-size: 12px; cursor: pointer; overflow: hidden; background: var(--grund); transition: border-color .15s; }
.ablage:hover, .ablage.drueber { border-color: var(--akzent); color: var(--akzent); }
.ablage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ablage.laedt::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5) linear-gradient(90deg, transparent, rgba(255,179,71,.3), transparent) 0 0 / 200% 100%;
  animation: laden 1s linear infinite; }
@keyframes laden { to { background-position: -200% 0; } }
.bild-knoepfe { display: flex; gap: 4px; margin-top: 6px; }
.bild-knoepfe input { padding: 5px 8px; font-size: 12px; }

.block-kopf { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 8px;
  color: var(--text-2); font-size: 12px; font-weight: 500; }
.felder { display: grid; gap: 6px; margin-bottom: 8px; }
.feld { display: grid; grid-template-columns: 22px 1fr 1.4fr auto auto; gap: 6px; align-items: center; }
.feld .griff { color: var(--text-3); cursor: grab; text-align: center; user-select: none; }
.feld.zieht { opacity: .4; }
.feld .inline { white-space: nowrap; font-size: 12px; color: var(--text-3); border: 1px solid var(--linie); border-radius: 6px; padding: 6px 8px; background: none; }
.feld .inline.an { color: var(--akzent); border-color: var(--akzent); }
.knoepfe-eingabe label { display: flex; align-items: center; gap: 6px; margin: 0; }
.knoepfe-eingabe input { margin: 0; }

.aktionen { display: flex; gap: 8px; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); }

/* Vorschau */
.vorschau-spalte { background: #313338; border-left: 1px solid var(--linie); padding: 20px 0; position: sticky; top: 61px; height: calc(100vh - 61px); overflow: auto; }
.vorschau-kopf { display: flex; justify-content: space-between; align-items: center; padding: 0 20px 14px; color: #949ba4; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.umschalter { display: flex; background: #1e1f22; border-radius: 6px; padding: 2px; text-transform: none; letter-spacing: 0; }
.umschalter button { border: 0; background: none; color: #949ba4; padding: 3px 9px; border-radius: 4px; font-size: 12px; }
.umschalter button.aktiv { background: #404249; color: #f2f3f5; }

.discord { font-family: "gg sans", "Noto Sans", Inter, sans-serif; color: #dbdee1; font-size: 15px; line-height: 1.375; }
.dc-nachricht { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 4px 20px 4px 16px; }
.dc-nachricht:hover { background: #2e3035; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; background: #5865f2; display: grid; place-items: center; font-size: 20px; overflow: hidden; }
.dc-avatar img { width: 100%; height: 100%; }
.dc-kopf { display: flex; align-items: center; gap: 6px; }
.dc-name { color: #f2f3f5; font-weight: 500; }
.dc-tag { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 4px; border-radius: 3px; line-height: 14px; }
.dc-zeit { color: #949ba4; font-size: 12px; }
.dc-rolle { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-embed { margin-top: 4px; max-width: 520px; background: #2b2d31; border-left: 4px solid #5865f2; border-radius: 4px;
  display: grid; grid-template-columns: auto; padding: 8px 16px 16px 12px; }
.dc-embed.mit-thumb { grid-template-columns: 1fr 80px; column-gap: 16px; }
.dc-embed-inhalt { min-width: 0; }
.dc-titel { color: #f2f3f5; font-weight: 600; font-size: 16px; margin-top: 8px; }
.dc-text { font-size: 14px; margin-top: 8px; white-space: pre-wrap; word-wrap: break-word; }
.dc-felder { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 8px; }
.dc-feld { font-size: 14px; min-width: 0; }
.dc-feld-name { color: #f2f3f5; font-weight: 600; margin-bottom: 2px; }
.dc-feld-wert { white-space: pre-wrap; word-wrap: break-word; }
.dc-ts { background: rgba(78,80,88,.48); border-radius: 3px; padding: 0 2px; }
.dc-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; }
.dc-thumb { grid-column: 2; grid-row: 1; margin-top: 8px; width: 80px; height: 80px; border-radius: 4px; object-fit: cover; }
.dc-bild { grid-column: 1 / -1; margin-top: 16px; width: 100%; max-height: 300px; object-fit: cover; border-radius: 4px; }
.dc-fuss { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; color: #949ba4; }
.dc-knoepfe { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dc-knopf { border: 0; border-radius: 3px; padding: 2px 16px; height: 32px; font-size: 14px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 6px; }
.dc-knopf.gruen { background: #248046; }
.dc-knopf.grau { background: #4e5058; }
.dc-knopf.rot { background: #da373c; }
.discord strong { color: #f2f3f5; }
.discord code { background: #1e1f22; border-radius: 3px; padding: 0 3px; font-size: 13px; }

/* Abende */
.abende { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: 24px; padding: 24px; align-items: start; }
.ansage label { margin-bottom: 12px; }
.ansage .aktionen { margin-top: 8px; }
.abend-liste h2.spaeter { margin-top: 32px; color: var(--text-2); }
.abend { display: grid; grid-template-columns: 6px 1fr auto; gap: 14px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px 16px 14px 0; margin-bottom: 10px; overflow: hidden; }
.abend .streifen { margin: -14px 0; }
.abend-titel { font: 600 16px/1.3 var(--kopf); }
.abend-zeit { color: var(--text-2); font-size: 13px; }
.abend-leute { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.person { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--flaeche-2); }
.person.ja { background: rgba(59,165,93,.18); color: #7fd99a; }
.person.vielleicht { color: var(--text-2); }
.person.nein { color: var(--text-3); text-decoration: line-through; }
.abend-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.zahl { font: 800 26px/1 var(--kopf); color: var(--akzent); }
.zahl small { font-size: 13px; color: var(--text-3); font-weight: 600; }
.abend a { color: var(--text-2); font-size: 12px; text-decoration: none; }
.abend a:hover { color: var(--text); }
.abend.abgesagt { opacity: .5; }
.leer { color: var(--text-3); padding: 12px 0; }

@media (max-width: 1100px) {
  .vorlagen { grid-template-columns: 1fr; }
  .liste { border-right: 0; border-bottom: 1px solid var(--linie); }
  .liste ul { display: flex; flex-wrap: wrap; }
  .vorschau-spalte { position: static; height: auto; border-left: 0; }
  .abende { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kopf { flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
  .ich span { display: none; }
  .editor, .abende { padding: 16px; }
  .zeile.drei { grid-template-columns: 1fr; }
  .feld { grid-template-columns: 1fr 1fr auto auto; }
  .feld .griff { display: none; }
}