:root {
  /* Palette aus dem Maskottchen-Bild abgeleitet:
     Azurblau (Krawatte) als Akzent, Navy (Anzug) für Text/Strong,
     dunkles Navy als Log-Hintergrund. */
  --accent: #2E6BB0;        /* Azur — Buttons & Akzente */
  --accent-strong: #1E3A5F; /* Navy — Header/Strong */
  --black: #1d2733;         /* dunkles Slate-Navy statt reinem Schwarz */
  --border: rgba(30,52,84,0.45);
  --log-bg: #151b26;        /* dunkles Navy */
  --info: #6fb6ff;
  --ok: #7ee787;
  --warn: #ffc857;
  --done: #4dd0c8;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--black);
  margin: 0;
  background: #fff;
  line-height: 1.5;
}
.site-header {
  display: flex; align-items: center; gap: 12px;
  max-width: 720px; margin: 0 auto; padding: 24px 16px;
}
.logo-slot { width: 32px; height: 32px; background: var(--accent); border-radius: 6px; }
.site-header h1 { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--accent-strong); }
.container { max-width: 720px; margin: 0 auto; padding: 0 16px 64px; }
.hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.hero-text { flex: 1; }
.hero-title { font-size: 1.4rem; font-weight: 600; margin: 0 0 6px; line-height: 1.25; color: var(--accent-strong); }
.hero-sub { margin: 0; color: #666; }
.hero-img {
  width: 200px; max-width: 42%; height: auto; flex-shrink: 0;
  align-self: flex-end;
}
@media (max-width: 560px) {
  .hero { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .hero-img { max-width: 60%; align-self: center; }
}
.card {
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
.card h2 { font-size: 1rem; font-weight: 600; margin: 0 0 16px; }
.dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 40px 16px;
  text-align: center;
  cursor: pointer;
}
.dropzone.dragover { border-color: var(--accent); }
.dropzone .hint { color: #888; font-size: 0.85rem; }
.filename { font-size: 0.9rem; color: var(--accent); }
.process-list { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; }
.process-list li { padding: 6px 0; }
.process-list label { display: flex; gap: 8px; align-items: baseline; }
.process-list .steps { color: #888; font-size: 0.85rem; }
.select-all { display: inline-flex; gap: 8px; margin-bottom: 12px; font-weight: 600; }
.process-group { margin-bottom: 20px; }
.process-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 6px;
  margin-bottom: 8px;
}
.process-group-title { margin: 0; font-size: 1rem; color: var(--accent-strong); }
.process-group .select-all { margin-bottom: 0; font-size: 0.85rem; }
.select-mascot { display: block; width: 150px; max-width: 40%; height: auto; margin: 16px 0 0 auto; }
.mode-cards { display: flex; gap: 16px; margin-bottom: 20px; }
.mode-card {
  flex: 1; border: 2px solid transparent; outline: 0.5px solid var(--border);
  border-radius: 12px; padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.mode-card.selected { border-color: var(--accent); outline: none; }
.mode-card span { color: #666; font-size: 0.85rem; }
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 12px 24px; border-radius: 8px; font-size: 1rem; cursor: pointer;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  background: none; border: 0.5px solid var(--border);
  padding: 10px 20px; border-radius: 8px; cursor: pointer; margin-top: 16px;
}
.result-header { color: var(--black); }
.preview {
  height: 480px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  margin-bottom: 16px;
  background: #fff;
}
.preview-fallback {
  color: #888; font-size: 0.9rem; margin: 0 0 16px;
}
.log {
  background: var(--log-bg); color: #ddd;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem; padding: 16px; border-radius: 8px;
  max-height: 360px; overflow-y: auto; white-space: pre-wrap;
}
.log .lvl-INFO { color: var(--info); }
.log .lvl-OK { color: var(--ok); }
.log .lvl-WARN { color: var(--warn); }
.log .lvl-DONE { color: var(--done); }
.log .lvl-ERROR { color: #ff6b6b; }
.downloads { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.btn-download {
  border: 0.5px solid var(--border); border-radius: 8px;
  padding: 10px 16px; text-decoration: none; color: var(--black); font-size: 0.9rem;
}
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #ff6b6b; color: #fff; padding: 12px 20px; border-radius: 8px;
  max-width: 90%;
}
.overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
}
.spinner {
  width: 40px; height: 40px; border: 4px solid #ddd;
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }