/* ==========================================================================
   Kundenaustausch · initiativ team
   Farben/Schriften wie Portal & Board (#0a0a0a / #97ce00, Bebas Neue, Syne, DM Sans)
   ========================================================================== */
:root {
  --g: #97ce00; --g-hi: #aad84a;
  --bg: #0a0a0a; --bg2: #141412; --bg3: #1b1b18; --bg3-h: #232320;
  --line: #2a2a26; --line2: #444440;
  --ink: #fbf9f5; --ink2: #dedbd3; --dim: #b6b5ab;
  --amber: #e0a83a; --red: #e5484d;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --r: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1100px 620px at 82% -8%, rgba(151,206,0,.10), transparent 60%),
              radial-gradient(900px 520px at 0% 108%, rgba(151,206,0,.05), transparent 55%);
}
a { color: var(--g); text-decoration: none; }
a:hover { color: var(--g-hi); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Kopfleiste ---------- */
.ka-top {
  display: flex; align-items: center; gap: 16px; padding: 18px 28px;
  border-bottom: 1px solid var(--line); background: rgba(10,10,10,.78);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10;
}
.ka-top .logo { height: 24px; display: block; }
.ka-top .sep { width: 1px; height: 22px; background: var(--line2); }
.ka-top .wort { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; }
.ka-top .luecke { flex: 1; }
.ka-top .wer { font-size: 13px; color: var(--dim); text-align: right; }
.ka-top .wer b { color: var(--ink2); font-weight: 600; }

/* ---------- Knöpfe & Felder ---------- */
.k-btn {
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  background: var(--bg3); color: var(--ink2); border: 1px solid var(--line2);
  border-radius: 8px; padding: 9px 14px; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.k-btn:hover { border-color: var(--g); color: var(--ink); }
.k-btn.haupt { background: var(--g); color: #0a0a0a; border-color: var(--g); }
.k-btn.haupt:hover { background: var(--g-hi); border-color: var(--g-hi); color: #0a0a0a; }
.k-btn.warn:hover { border-color: var(--red); color: var(--red); }
.k-btn:disabled { opacity: .45; cursor: default; }
.k-btn.klein { padding: 6px 10px; font-size: 10px; }
.k-feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.k-feld > span { font-size: 12px; color: var(--dim); }
.k-feld input, .k-feld select, .k-feld textarea, .k-eingabe {
  background: var(--bg); border: 1px solid var(--line2); border-radius: 8px;
  padding: 10px 12px; width: 100%; outline: none;
}
.k-feld input:focus, .k-feld select:focus, .k-feld textarea:focus, .k-eingabe:focus { border-color: var(--g); }
.k-hinweis { font-size: 13px; color: var(--dim); }
.k-fehler { color: var(--red); font-size: 14px; min-height: 1.4em; }
.k-ok { color: var(--g); font-size: 14px; }

/* ---------- Mittige Karten (Anmeldung, Einladung, Hinweise) ---------- */
.ka-mitte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 18px; text-align: center; }
.ka-mitte .ka-logo { height: 30px; margin-bottom: 28px; }
.ka-mitte h1 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 48px; letter-spacing: 1px; line-height: 1; margin-bottom: 12px; }
.ka-text { color: var(--ink2); max-width: 52ch; }
.ka-karte {
  width: 100%; max-width: 420px; text-align: left; margin-top: 8px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px;
  box-shadow: var(--shadow);
}
.ka-karte .eyebrow, .eyebrow {
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--g); margin-bottom: 10px; display: block;
}
.ka-karte h2 { font-family: 'Syne', sans-serif; font-size: 20px; line-height: 1.4; margin-bottom: 18px; }
.ka-karte .k-btn.haupt { width: 100%; padding: 12px; margin-top: 4px; }
.ka-fuss { padding: 18px; text-align: center; font-size: 12px; color: var(--dim); }

/* ---------- Dateiansicht ---------- */
.ka-inhalt { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 34px 28px 40px; }
.ka-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.ka-kopf h1 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(36px, 6vw, 56px); line-height: .95; letter-spacing: 1px; }
.ka-werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; }
.ka-pfad { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; color: var(--dim); margin-bottom: 12px; }
.ka-pfad a { color: var(--ink2); }
.ka-pfad a:hover { color: var(--g); }
.ka-pfad .trenner { color: var(--line2); }
.ka-tabelle { width: 100%; border-collapse: collapse; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ka-tabelle th { text-align: left; font-family: 'Syne', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ka-tabelle td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ka-tabelle tr:last-child td { border-bottom: 0; }
.ka-tabelle tbody tr:hover td { background: var(--bg3); }
.ka-tabelle .zahl { text-align: right; white-space: nowrap; color: var(--dim); font-variant-numeric: tabular-nums; }
.ka-tabelle .aktionen { text-align: right; white-space: nowrap; }
.ka-name { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); cursor: pointer; word-break: break-word; }
.ka-name:hover { color: var(--g); }
.ka-ico { width: 22px; flex: none; text-align: center; }
.ka-leer { padding: 34px; text-align: center; color: var(--dim); }

/* Ablagezone beim Ziehen */
.ka-ablage {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(10,10,10,.82); border: 3px dashed var(--g);
  font-family: 'Bebas Neue', sans-serif; font-size: 42px; letter-spacing: 1px; color: var(--g);
}
/* Fortschritt */
.ka-fortschritt { margin: 0 0 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.ka-balken { height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; margin-top: 8px; }
.ka-balken > i { display: block; height: 100%; width: 0; background: var(--g); transition: width .2s; }

/* ---------- Verwaltung ---------- */
.v-raster { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.v-liste { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.v-liste .kopf { padding: 14px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.v-kunde { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; }
.v-kunde:hover { background: var(--bg3); }
.v-kunde.aktiv { background: var(--bg3-h); box-shadow: inset 3px 0 0 var(--g); }
.v-kunde .n { display: block; font-weight: 600; }
.v-kunde .m { display: block; font-size: 12px; color: var(--dim); }
.v-kunde.gesperrt .n { color: var(--dim); text-decoration: line-through; }
.v-gruppe { padding: 10px 14px 4px; font-family: 'Syne', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.v-detail { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; min-height: 300px; }
.v-detail h2 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 38px; letter-spacing: 1px; line-height: 1; }
.v-reiter { display: flex; gap: 6px; margin: 18px 0; border-bottom: 1px solid var(--line); }
.v-reiter button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; color: var(--dim); font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v-reiter button.an { color: var(--ink); border-bottom-color: var(--g); }
.v-abschnitt { margin-bottom: 26px; }
.v-abschnitt h3 { font-family: 'Syne', sans-serif; font-size: 15px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; align-items: end; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.v-form .k-feld { margin: 0; }
.v-url { display: flex; gap: 8px; align-items: center; background: rgba(151,206,0,.08); border: 1px solid rgba(151,206,0,.4); border-radius: 8px; padding: 10px 12px; margin: 8px 0 12px; }
.v-url code { flex: 1; word-break: break-all; font-size: 13px; color: var(--ink); }
.v-raster > * { min-width: 0; }             /* sonst drückt eine breite Tabelle das Raster auf */
.ka-tabelle select.k-eingabe { min-width: 200px; padding: 7px 10px; }
.v-tabelle { overflow-x: auto; }
.v-tabelle .ka-tabelle { min-width: 640px; }
.ka-tabelle tr.v-zusatz td { padding-top: 0; }
.ka-tabelle tbody tr.v-zusatz:hover td, .ka-tabelle tbody tr:has(+ tr.v-zusatz) td { border-bottom: 0; }
.ka-tabelle tbody tr.v-zusatz:hover td { background: none; }
.v-url .k-btn { flex: none; }
.marke { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--dim); white-space: nowrap; }
.marke.gruen { color: var(--g); border-color: rgba(151,206,0,.45); }
.marke.rot { color: var(--red); border-color: rgba(229,72,77,.45); }
.marke.gelb { color: var(--amber); border-color: rgba(224,168,58,.45); }
.klein { font-size: 12px; color: var(--dim); }

@media (max-width: 1100px) {
  .v-raster { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ka-top { padding: 14px 16px; gap: 10px; }
  .ka-top .sep, .ka-top .wort { display: none; }
  .ka-inhalt { padding: 22px 16px 30px; }
  .ka-tabelle .spalte-zeit { display: none; }
  .ka-tabelle td, .ka-tabelle th { padding: 10px; }
}