/* ══════════════════════════════════════════════════════════════════════════════
 *  events.css: Aussehen der Event-Seite
 * ══════════════════════════════════════════════════════════════════════════════
 *  Nur die eigenen Regeln für die Event-Karten. Farben kommen ausschließlich aus
 *  den Variablen des dunklen Designs, keine festen Werte, damit die Seite zum
 *  Rest des Dashboards passt.
 * ────────────────────────────────────────────────────────────────────────── */

.ev-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.ev-status {
  color: var(--color-text-muted);
}

.ev-suche {
  max-width: 340px;
  flex: 1 1 240px;
}

.ev-leer {
  color: var(--color-text-muted);
  padding: 1rem 0;
}

.ev-liste {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ev-karte {
  margin: 0;
}

.ev-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ev-titel {
  margin: 0;
  font-size: 1.15rem;
  color: var(--color-text);
}

.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}

.ev-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
}

.ev-badge--zeit {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Status-Schilder: läuft (grün), startet bald (gelb), vorbei (gedämpft). */
.ev-badge--laeuft {
  background: var(--color-success-subtle, rgba(46, 160, 67, 0.18));
  color: var(--color-success, #3fb950);
  border-color: var(--color-success, #3fb950);
  font-weight: 600;
}

.ev-badge--bald {
  background: var(--color-warning-subtle, rgba(210, 153, 34, 0.18));
  color: var(--color-warning, #d29922);
  border-color: var(--color-warning, #d29922);
  font-weight: 600;
}

.ev-badge--vorbei {
  background: transparent;
  color: var(--color-text-tertiary, var(--color-text-muted));
  border-color: var(--color-border);
}

.ev-text {
  color: var(--color-text-secondary);
  line-height: 1.5;
  white-space: pre-line;
  margin: 0.4rem 0 0.8rem;
}

/* ── Der Beitrag 1:1 (gesäubertes Forum-HTML) ───────────────────────────── */

/* Eingeklappt: Deckel drauf, unten ein weicher Verlauf als Hinweis "da ist mehr". */
.ev-inhalt {
  position: relative;
}

.ev-inhalt--zu {
  max-height: 360px;
  overflow: hidden;
}

.ev-inhalt--auf {
  max-height: none;
  overflow: visible;
}

.ev-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-surface-raised));
}

.ev-inhalt--auf .ev-fade {
  display: none;
}

.ev-mehr-zeile {
  margin: 0.8rem 0 0.2rem;
}

/* Deutlicher Knopf zum Aufklappen, statt wie einfacher Text auszusehen. */
.ev-mehr {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ev-mehr:hover {
  background: var(--color-primary);
  color: #fff;
}

.ev-html {
  color: var(--color-text-secondary);
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* Ganz oben kein Abstand, sonst klafft die Karte über dem ersten Absatz. */
.ev-html > *:first-child {
  margin-top: 0;
}

.ev-html img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.9rem 0;
}

.ev-html h1,
.ev-html h2,
.ev-html h3,
.ev-html h4,
.ev-html h5 {
  color: var(--color-text);
  line-height: 1.3;
}

/* Überschriften trennen die Abschnitte. Sie bekommen deutlich Luft nach oben,
   damit man auf einen Blick sieht, wo ein neuer Teil anfängt, und wenig nach
   unten, damit die Überschrift zu ihrem Text gehört. */
.ev-html h1,
.ev-html h2 {
  font-size: 1.2rem;
  margin: 1.9rem 0 0.6rem;
}

.ev-html h3 {
  font-size: 1.06rem;
  margin: 1.5rem 0 0.5rem;
}

.ev-html h4,
.ev-html h5 {
  font-size: 1rem;
  margin: 1.2rem 0 0.4rem;
}

.ev-html p {
  margin: 0.75rem 0;
}

.ev-html a {
  color: var(--color-primary);
  text-decoration: none;
}

.ev-html a:hover {
  text-decoration: underline;
}

.ev-html ul,
.ev-html ol {
  padding-left: 1.9rem;
  margin: 0.6rem 0 0.9rem;
}

.ev-html li {
  margin: 0.4rem 0;
}

.ev-html table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6rem 0;
  font-size: 0.92rem;
}

.ev-html th,
.ev-html td {
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.ev-html th {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.ev-html blockquote {
  border-left: 3px solid var(--color-border);
  margin: 0.6rem 0;
  padding: 0.2rem 0 0.2rem 0.8rem;
  color: var(--color-text-muted);
}

.ev-fuss {
  display: flex;
  justify-content: flex-end;
}

.ev-forum {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.ev-forum:hover {
  text-decoration: underline;
}

.ev-weg {
  flex: 0 0 auto;
}