/* Aufgabenboard - AAM Demo, Everlast-Look: dunkel mit gelben Akzenten */

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

body {
  background: #0f1115;
  color: #e8eaf0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}

.kopf {
  padding: 28px 36px 18px;
  border-bottom: 1px solid #23262e;
}

.kopf h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.kopf h1::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 26px;
  background: #ffd60a;
  border-radius: 3px;
  margin-right: 14px;
  vertical-align: -4px;
}

.untertitel {
  color: #8a8f9c;
  font-size: 14px;
  margin-top: 6px;
}

.neue-karte {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  max-width: 480px;
}

.neue-karte input {
  flex: 1;
  background: #1a1d23;
  border: 1px solid #2c3039;
  border-radius: 8px;
  color: #e8eaf0;
  font-size: 15px;
  padding: 10px 14px;
}

.neue-karte input:focus {
  outline: 2px solid #ffd60a;
  outline-offset: -1px;
}

.neue-karte button {
  background: #ffd60a;
  border: none;
  border-radius: 8px;
  color: #0f1115;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
}

.neue-karte button:hover {
  background: #ffe14d;
}

.karte {
  background: #1a1d23;
  border: 1px solid #2c3039;
  border-radius: 10px;
  padding: 12px 34px 12px 14px;
  cursor: grab;
  position: relative;
}

.karte.wird-gezogen {
  opacity: 0.5;
}

.karte-titel {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.karte-loeschen {
  background: none;
  border: none;
  color: #565c69;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  position: absolute;
  right: 8px;
  top: 8px;
}

.karte-loeschen:hover {
  color: #ff6b6b;
}

.karten.ablage-aktiv {
  background: rgba(255, 214, 10, 0.06);
  border-radius: 10px;
  outline: 1px dashed #ffd60a;
}

/* Leerzustand: dezenter Hinweis, solange eine Spalte keine Karten hat */
.karten:empty::after {
  content: "Noch keine Karten";
  color: #565c69;
  display: block;
  font-size: 13px;
  padding: 8px 2px;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 20px;
  padding: 28px 36px;
  max-width: 1200px;
}

.spalte {
  background: #15181e;
  border: 1px solid #23262e;
  border-radius: 12px;
  padding: 16px;
  min-height: 320px;
}

.spalte h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #ffd60a;
  margin-bottom: 14px;
}

.karten {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}

@media (max-width: 860px) {
  .board {
    grid-template-columns: 1fr;
  }
}