/* ── Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:      #0f0f0f;
  --surface: #181818;
  --border:  #2a2a2a;
  --border2: #383838;
  --fog:     #666;
  --silver:  #999;
  --white:   #ebebeb;
  --red:     #c0281a;
  --red-hot: #e03020;
  --green:   #2a7a3b;
}
html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border2); }

/* ── Admin Header ───────────────────────── */
.admin-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 40;
}
.logo {
  display: flex; align-items: baseline; gap: 0.4rem;
  text-decoration: none;
}
.logo-word {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 1.4rem;
  letter-spacing: 0.06em; color: var(--white); line-height: 1;
}
.logo-dot {
  width: 6px; height: 6px; background: var(--red);
  border-radius: 50%; align-self: center;
}
.admin-header-right {
  display: flex; align-items: center; gap: 1rem;
}
.admin-user { font-size: 0.78rem; color: var(--silver); }

/* ── Container ──────────────────────────── */
.admin-container {
  max-width: 820px; margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}
h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.6rem; font-weight: 800;
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.dashboard-top {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 1.5rem;
}
.dashboard-top h1 { margin-bottom: 0; }

/* ── Buttons ────────────────────────────── */
.btn-primary {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--red); color: white;
  border: none; padding: 0.6rem 1.4rem;
  cursor: pointer; text-decoration: none;
  display: inline-block;
  clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--red-hot); }
.btn-outline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: none; color: var(--silver);
  border: 1px solid var(--border2);
  padding: 0.55rem 1.2rem; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--white); color: var(--white); }
.btn-ghost {
  font-size: 0.78rem; color: var(--fog);
  background: none; border: none;
  cursor: pointer; text-decoration: none;
  transition: color 0.2s; padding: 0;
}
.btn-ghost:hover { color: var(--white); }
.btn-danger {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: none; color: var(--fog);
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem; cursor: pointer;
  transition: all 0.2s;
}
.btn-danger:hover { border-color: var(--red); color: var(--red); }
.btn-sm { padding: 0.3rem 0.75rem !important; font-size: 0.72rem !important; }

/* ── Alerts ─────────────────────────────── */
.alert-error {
  background: rgba(192,40,26,0.12);
  border: 1px solid var(--red);
  color: #f08070;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  border-radius: 2px;
}
.alert-success {
  background: rgba(42,122,59,0.15);
  border: 1px solid var(--green);
  color: #70c080;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  border-radius: 2px;
}

/* ── Post list ──────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: 0; }
.post-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.post-row-thumb {
  width: 60px; height: 46px;
  flex-shrink: 0; overflow: hidden;
  background: var(--border);
}
.post-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--border2);
}
.post-row-info { flex: 1; min-width: 0; }
.post-row-title {
  font-size: 0.9rem; font-weight: 500;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-row-meta {
  display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap; margin-top: 0.25rem;
  font-size: 0.7rem; color: var(--fog);
}
.tag-sm {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: white; background: var(--red);
  padding: 0.1rem 0.4rem;
}
.draft-badge {
  font-size: 0.65rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #a06020;
  border: 1px solid #503010; padding: 0.1rem 0.4rem;
}
.post-row-actions {
  display: flex; gap: 0.5rem; align-items: center;
  flex-shrink: 0; flex-wrap: wrap;
}

/* ── EasyMDE Dark Theme ─────────────────────────────── */
.EasyMDEContainer .CodeMirror {
  background: #1e1e1e;
  color: #e8e6e0;
  border: 1px solid var(--border);
  border-top: none;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.88rem;
  line-height: 1.7;
  padding: 0.8rem;
  min-height: 260px;
}
/* Kritisch: CodeMirror beim Vorschau-Modus korrekt verstecken */
.EasyMDEContainer .editor-preview-active .CodeMirror,
.EasyMDEContainer .editor-preview-active-fullscreen .CodeMirror {
  display: none !important;
}
.EasyMDEContainer .editor-preview-active .editor-preview,
.EasyMDEContainer .editor-preview-active-side .editor-preview-side {
  display: block !important;
}
.EasyMDEContainer .CodeMirror-cursor { border-color: var(--red-hot); }
.EasyMDEContainer .CodeMirror-selected { background: rgba(192,40,26,0.2); }
.editor-toolbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  opacity: 1;
}
.editor-toolbar button { color: var(--silver) !important; }
.editor-toolbar button:hover,
.editor-toolbar button.active {
  background: var(--border) !important;
  border-color: var(--border2) !important;
  color: var(--white) !important;
}
.editor-toolbar i.separator { border-color: var(--border2); }
.editor-preview,
.editor-preview-side {
  display: none;
  background: var(--asphalt2);
  color: var(--silver);
  border: 1px solid var(--border);
  border-top: none;
  padding: 1rem;
  min-height: 260px;
}
.editor-preview h1, .editor-preview h2, .editor-preview h3,
.editor-preview-side h1, .editor-preview-side h2, .editor-preview-side h3 {
  color: var(--white);
}
.editor-preview a, .editor-preview-side a { color: var(--red-hot); }
.editor-preview blockquote, .editor-preview-side blockquote {
  border-left: 3px solid var(--red); color: var(--fog);
}
.editor-preview p, .editor-preview-side p { margin-bottom: 0.9rem; }
.editor-statusbar { display: none; }

/* ── Kategorie Toggle ───────────────────────────────────── */
.cat-toggle { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.cat-option {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--border2);
  border-radius: 3px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fog); cursor: pointer;
  transition: all 0.15s;
}
.cat-option input[type="radio"] { display: none; }
.cat-option:hover { border-color: var(--silver); color: var(--silver); }
.cat-option.cat-active,
.cat-option:has(input:checked) {
  background: var(--red);
  border-color: var(--red-hot);
  color: var(--white);
}

/* ── Editor form ────────────────────────── */
.editor-wrap h1 { margin-bottom: 1.8rem; }

.meta-row {
  display: flex; gap: 1rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.meta-field {
  display: flex; flex-direction: column; gap: 0.4rem;
  min-width: 140px;
}
.meta-field span {
  font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fog);
}
.meta-field-grow { flex: 1; }
.meta-field-checkbox { flex-direction: row !important; align-items: center; gap: 0.6rem; }
.meta-field-checkbox input { width: 16px; height: 16px; accent-color: var(--red); }
.meta-field-checkbox span { text-transform: uppercase; font-size: 0.72rem; color: var(--silver); }

input[type="text"],
input[type="date"],
input[type="password"],
select,
textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 0.6rem 0.8rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  width: 100%;
  border-radius: 2px;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border2);
  box-shadow: 0 0 0 2px rgba(192,40,26,0.15);
}
select { cursor: pointer; }

/* ── Upload zone ────────────────────────── */
.field-section { margin-bottom: 1.6rem; }
.field-label {
  font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fog);
  margin-bottom: 0.6rem;
}
.field-hint {
  font-size: 0.62rem; color: var(--border2);
  letter-spacing: 0.04em; text-transform: none;
  margin-left: 0.5rem;
}
.field-label-row {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 0.5rem;
}

.drop-zone {
  border: 1px dashed var(--border2);
  background: var(--surface);
  padding: 1.8rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.drop-zone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--red);
  background: rgba(192,40,26,0.05);
}
.drop-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.6rem;
  color: var(--fog); font-size: 0.82rem;
  pointer-events: none;
}
.drop-inner small { color: var(--border2); font-size: 0.72rem; }

.image-thumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 0.8rem;
}
.thumb {
  width: 90px; height: 68px;
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: grab;
}
.thumb.dragging { opacity: 0.4; }
.thumb.drag-target { border-color: var(--red); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-video-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: white;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}
.thumb-remove {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,0.75); border: none;
  color: white; font-size: 0.6rem;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.thumb:hover .thumb-remove { opacity: 1; }
.thumb-drag {
  position: absolute; bottom: 3px; left: 3px;
  font-size: 0.7rem; color: rgba(255,255,255,0.5);
  line-height: 1; pointer-events: none;
}
.upload-status {
  font-size: 0.76rem; color: var(--silver); margin-top: 0.5rem; min-height: 1rem;
}
.upload-error { color: #f08070 !important; }

/* ── Markdown editor ────────────────────── */
.preview-toggle {
  display: flex; background: var(--surface);
  border: 1px solid var(--border); border-radius: 2px;
}
.preview-toggle button {
  background: none; border: none; color: var(--fog);
  font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.35rem 0.9rem;
  cursor: pointer; transition: color 0.15s;
}
.preview-toggle button.toggle-active {
  background: var(--border); color: var(--white);
}
.md-toolbar {
  display: flex; gap: 2px; margin-bottom: 4px;
}
.md-toolbar button {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--silver); padding: 0.3rem 0.65rem;
  font-size: 0.78rem; cursor: pointer;
  transition: all 0.15s; font-family: 'DM Sans', sans-serif;
}
.md-toolbar button:hover {
  border-color: var(--border2); color: var(--white);
  background: var(--border);
}
#mdEditor {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.88rem; line-height: 1.7;
  min-height: 280px; resize: vertical;
  background: #1e1e1e;
  color: #e8e6e0;
  border-color: #444;
  caret-color: var(--red-hot);
}
.md-preview {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.2rem;
  min-height: 280px;
  font-size: 0.9rem; line-height: 1.75;
  color: var(--silver);
}
.md-preview h1, .md-preview h2, .md-preview h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; text-transform: uppercase;
  color: var(--white); margin: 1.5rem 0 0.5rem;
}
.md-preview p { margin-bottom: 1rem; }
.md-preview strong { color: var(--white); }
.md-preview blockquote {
  border-left: 3px solid var(--red);
  padding-left: 1rem; color: var(--fog); font-style: italic; margin: 1rem 0;
}
.md-preview ul, .md-preview ol { margin: 0 0 1rem 1.5rem; }
.md-preview li { margin-bottom: 0.3rem; }
.md-preview a { color: var(--red-hot); }

/* ── Editor actions ─────────────────────── */
.editor-actions {
  display: flex; gap: 1rem; align-items: center;
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ── Login ──────────────────────────────── */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--red);
  padding: 2.5rem;
  width: 100%; max-width: 360px;
}
.login-logo {
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.login-box h1 {
  font-size: 1rem; text-transform: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400; color: var(--fog);
  margin-bottom: 1.5rem;
}
.login-box label {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fog);
  margin-bottom: 1rem;
}
.login-box input { width: 100%; }
.login-box button {
  width: 100%; margin-top: 0.5rem;
}

/* ── Empty state ────────────────────────── */
.empty-state {
  color: var(--fog); font-size: 0.9rem;
  padding: 3rem 0; text-align: center;
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 600px) {
  .post-row-actions { width: 100%; }
  .meta-field { min-width: 100%; }
  .editor-actions { flex-direction: column; align-items: stretch; }
  .editor-actions > * { text-align: center; }
}