/* ══════════════════════════════════════════════════════════
   Regelwerk-Verwaltung — Oberfläche
   Gleiche Farbwelt wie die öffentliche Seite, aber ruhiger:
   Gold nur als Akzent, damit die Arbeitsfläche lesbar bleibt.
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:        #f2c200;
  --gold-bright: #ffe066;
  --gold-deep:   #7a6200;
  --green:       #3c8a3f;
  --green-hell:  #6fc275;
  --rot:         #c0392b;
  --rot-hell:    #e88a7f;
  --bg:          #07080a;
  --bg-2:        #0c0e12;
  --panel:       #11141a;
  --panel-2:     #171b23;
  --panel-3:     #1e232d;
  --line:        rgba(242, 194, 0, 0.16);
  --line-soft:   rgba(255, 255, 255, 0.08);
  --text:        #ece9e1;
  --muted:       #8d8b84;
  --muted-2:     #63615c;

  --head: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

/* ── Kopfleiste ─────────────────────────────────────────── */
.adminbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7, 8, 10, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.adminbar-in {
  width: min(100% - 2.5rem, 1360px); margin-inline: auto;
  display: flex; align-items: center; gap: 1.6rem; min-height: 60px;
  flex-wrap: wrap; padding: .4rem 0;
}
.brand {
  font-family: var(--head); font-size: 1.4rem; letter-spacing: .05em;
  color: var(--text); white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand b { color: var(--gold); font-weight: normal; }
.brand span {
  font-family: var(--cond); font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2); margin-left: .4rem;
}

.hauptmenue { display: flex; gap: .3rem; flex-wrap: wrap; }
.hauptmenue a {
  display: flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem; border-radius: 8px;
  font-family: var(--cond); font-size: .98rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid transparent;
}
.hauptmenue a:hover { background: var(--panel); color: var(--text); }
.hauptmenue a.aktiv {
  background: var(--panel-2); color: var(--gold);
  border-color: var(--line);
}

.adminbar .rechts { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.wer {
  display: flex; flex-direction: column; line-height: 1.15;
  font-family: var(--cond); font-size: .98rem; color: var(--text);
  text-align: right;
}
.wer small {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
}

/* ── Fläche ─────────────────────────────────────────────── */
.inhalt {
  width: min(100% - 2.5rem, 1360px); margin-inline: auto;
  padding: 1.8rem 0 3rem; flex: 1;
}
.adminfuss {
  border-top: 1px solid var(--line-soft); padding: 1.2rem 0;
  text-align: center; color: var(--muted-2); font-size: .86rem;
}

/* ── Seitenkopf ─────────────────────────────────────────── */
.seitenkopf {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.seitenkopf h1 {
  font-family: var(--head); font-size: 2.3rem; letter-spacing: .02em;
  line-height: 1; color: var(--text);
}
.seitenkopf .unterzeile { color: var(--muted); font-size: .95rem; }
.seitenkopf .werkzeuge { margin-left: auto; display: flex; gap: .55rem; flex-wrap: wrap; }

/* ── Knöpfe ─────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.05rem; border-radius: 8px; cursor: pointer;
  font-family: var(--cond); font-size: .96rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600;
  background: var(--gold); color: #14100a;
  border: 1px solid var(--gold); white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.knopf:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #14100a; }
.knopf-geist { background: transparent; color: var(--muted); border-color: var(--line-soft); }
.knopf-geist:hover { background: var(--panel-2); color: var(--gold); border-color: var(--gold-deep); }
.knopf-gefahr { background: transparent; color: var(--rot-hell); border-color: rgba(192,57,43,.4); }
.knopf-gefahr:hover { background: rgba(192,57,43,.15); color: var(--rot-hell); border-color: var(--rot); }
.knopf-klein { padding: .3rem .7rem; font-size: .86rem; }
.knopf[disabled] { opacity: .45; pointer-events: none; }

/* ── Hinweise ───────────────────────────────────────────── */
.hinweis {
  padding: .8rem 1.1rem; border-radius: 10px; margin-bottom: 1.2rem;
  border: 1px solid var(--line-soft); background: var(--panel);
  font-size: .96rem;
}
.hinweis-erfolg { border-color: rgba(60,138,63,.4);  background: rgba(60,138,63,.12);  color: var(--green-hell); }
.hinweis-fehler { border-color: rgba(192,57,43,.4);  background: rgba(192,57,43,.12);  color: var(--rot-hell); }
.hinweis-info   { border-color: var(--line);         background: rgba(242,194,0,.07);  color: var(--gold-bright); }

/* ── Karten und Tabellen ────────────────────────────────── */
.karte {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 1.2rem 1.35rem; margin-bottom: 1.1rem;
}
.karte > h2 {
  font-family: var(--cond); font-size: 1.15rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
  margin-bottom: .9rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem .7rem; text-align: left; vertical-align: middle; }
th {
  font-family: var(--cond); font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
  border-bottom: 1px solid var(--line-soft);
}
tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); }
tbody tr:hover { background: rgba(255,255,255,.02); }
td.eng { width: 1%; white-space: nowrap; }

/* ── Kennzeichen ────────────────────────────────────────── */
.marke {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .6rem; border-radius: 999px;
  font-family: var(--cond); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--line-soft);
  color: var(--muted); white-space: nowrap;
}
.marke-an     { border-color: rgba(60,138,63,.45); color: var(--green-hell); background: rgba(60,138,63,.12); }
.marke-aus    { border-color: rgba(255,255,255,.14); color: var(--muted-2); }
.marke-gold   { border-color: var(--line); color: var(--gold); background: rgba(242,194,0,.08); }
.marke-gefahr { border-color: rgba(192,57,43,.45); color: var(--rot-hell); background: rgba(192,57,43,.1); }

/* ── Formulare ──────────────────────────────────────────── */
.feld { margin-bottom: 1rem; }
.feld > label {
  display: block; margin-bottom: .32rem;
  font-family: var(--cond); font-size: .84rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.feld .erklaerung { font-size: .86rem; color: var(--muted-2); margin-top: .3rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], select, textarea {
  width: 100%; padding: .58rem .8rem;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 8px;
  font-family: var(--body); font-size: .98rem; line-height: 1.5;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(242,194,0,.1);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }

.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

.schalter { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.schalter input { width: auto; }

.formularfuss {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.formularfuss .rechts { margin-left: auto; display: flex; gap: .6rem; }

/* ── Abschnitts- und Regelliste ─────────────────────────── */
.abschnittskarte {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 12px; margin-bottom: 1rem; overflow: hidden;
}
.abschnittskarte.zieht { opacity: .4; }
.abschnittskarte.ziel  { border-color: var(--gold); }

.abschnittskopf {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1.1rem; background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.abschnittskopf .nr {
  font-family: var(--head); font-size: 1.5rem; color: var(--gold-deep);
  line-height: 1; min-width: 1.3em;
}
.abschnittskopf h2 {
  font-family: var(--cond); font-size: 1.25rem; font-weight: 600;
  letter-spacing: .02em; color: var(--text);
}
.abschnittskopf .werkzeuge { margin-left: auto; display: flex; gap: .4rem; align-items: center; }

.griff {
  cursor: grab; color: var(--muted-2); font-size: 1.1rem;
  padding: 0 .2rem; user-select: none;
}
.griff:active { cursor: grabbing; }

.regelliste { list-style: none; }
.regelzeile {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.04);
}
.regelzeile:last-child { border-bottom: none; }
.regelzeile:hover { background: rgba(255,255,255,.02); }
.regelzeile.zieht { opacity: .4; }
.regelzeile.ziel { box-shadow: inset 0 2px 0 var(--gold); }
.regelzeile .nr {
  font-family: var(--cond); font-weight: 700; color: var(--gold);
  min-width: 3rem; font-size: .96rem;
}
.regelzeile .haupt { flex: 1; min-width: 0; }
.regelzeile .titel { font-weight: 600; }
.regelzeile .auszug {
  color: var(--muted-2); font-size: .88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.regelzeile .werkzeuge { display: flex; gap: .35rem; align-items: center; }

.leerzeile { padding: 1rem 1.1rem; color: var(--muted-2); font-size: .93rem; }

/* ── Editor mit Vorschau ────────────────────────────────── */
.editor-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 1000px) { .editor-gitter { grid-template-columns: 1fr; } }

.werkzeugleiste {
  display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem;
}
.werkzeugleiste button {
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line-soft); border-radius: 6px;
  padding: .25rem .6rem; cursor: pointer;
  font-family: var(--cond); font-size: .85rem; letter-spacing: .06em;
}
.werkzeugleiste button:hover { color: var(--gold); border-color: var(--gold-deep); }

#editor { min-height: 340px; font-family: var(--body); font-size: 1rem; }

.vorschau {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 1rem 1.15rem; min-height: 340px;
  color: #d7d3c9;
}
.vorschau p + p, .vorschau ul, .vorschau ol, .vorschau blockquote { margin-top: .6rem; }
.vorschau ul, .vorschau ol { padding-left: 1.35rem; }
.vorschau strong { color: var(--text); }
.vorschau code {
  font-family: ui-monospace, Consolas, monospace; font-size: .88em;
  background: rgba(255,255,255,.06); padding: .1em .38em;
  border-radius: 5px; color: var(--gold-bright);
}
.vorschau blockquote {
  border-left: 3px solid var(--gold-deep); padding-left: .9rem; color: var(--muted);
}
.vorschau:empty::before { content: 'Die Vorschau erscheint, sobald du schreibst.'; color: var(--muted-2); }

/* ── Anmeldeseite ───────────────────────────────────────── */
body.anmelden {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.anmeldekarte { width: 100%; max-width: 420px; }
.anmeldekarte .logo { text-align: center; margin-bottom: 1.4rem; }
.anmeldekarte .logo h1 {
  font-family: var(--head); font-size: 2rem; letter-spacing: .05em; color: var(--text);
}
.anmeldekarte .logo h1 b { color: var(--gold); font-weight: normal; }
.anmeldekarte .logo p {
  font-family: var(--cond); font-size: .82rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted-2);
}
.anmeldekarte .kasten {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 1.6rem; box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.anmeldekarte .streifen {
  height: 3px; margin: -1.6rem -1.6rem 1.4rem;
  border-radius: 14px 14px 0 0;
  background: repeating-linear-gradient(90deg, var(--gold) 0 18px, #14100a 18px 36px);
}
.anmeldekarte .knopf { width: 100%; justify-content: center; margin-top: .4rem; }
.anmeldefuss { text-align: center; margin-top: 1.1rem; font-size: .86rem; color: var(--muted-2); }

/* ── Verlauf ────────────────────────────────────────────── */
.diff { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; white-space: pre-wrap; }
.diff ins { background: rgba(60,138,63,.2); color: var(--green-hell); text-decoration: none; }
.diff del { background: rgba(192,57,43,.2); color: var(--rot-hell); }

/* ── Kleinkram ──────────────────────────────────────────── */
.gedaempft { color: var(--muted); }
.leiser    { color: var(--muted-2); font-size: .88rem; }
.mono      { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
.nurlesen  { pointer-events: none; opacity: .5; }
.inline-form { display: inline; }