/* ── Reset & Basis ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:        #1e2f5c;   /* Sidebar, Ueberschriften, Zahlenwerte */
  --navy-tief:   #172548;   /* Kopfzeile der Sidebar                */
  --indigo:      #3b4dbf;   /* Buttons, aktiver Eintrag, Balken     */
  --indigo-hell: #e8ebfa;   /* Badges, helle Akzentflaechen         */
  --himmel:      #9fb4e8;   /* Gruppentitel in der Sidebar          */
  --tinte:       #26324b;   /* Haupttext                            */
  --tinte-2:     #5a6884;   /* Sekundaertext, Labels                */
  --flaeche:     #f7f8fc;   /* Seitenhintergrund                    */
  --karte:       #ffffff;
  --rand:        #e4e8f2;
  --gruen:       #16a34a;
  --orange:      #d97706;   /* Schwelle ab 80 Prozent               */
  --orange-text: #b45309;
  --rot:         #dc2626;   /* Schwelle ab 90 Prozent               */
  --rot-text:    #b91c1c;
}

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--flaeche);
  color: var(--tinte);
  font-size: 18px;
  line-height: 1.55;
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  /* Waechst mit der Schrift mit. Bei 16px Grundschrift reichten 292px, bei
     276px war schon die Beschriftung des zweiten Klapp-Knopfes abgeschnitten.
     Mit 18px Grundschrift braucht dieselbe Beschriftung entsprechend mehr. */
  width: 330px;
  flex-shrink: 0;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 23.5px;
  font-weight: 700;
  padding: 22px 20px;
  background: var(--navy-tief);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-brand img {
  display: block;
  flex-shrink: 0;
}

/* Alles auf-/zuklappen. Zwei Knoepfe statt eines Umschalters, damit der
   Zustand des Knopfes nie im Widerspruch zur Sidebar stehen kann.        */
.klapp-leiste { display: flex; gap: 8px; padding: 14px 12px 2px; }
.klapp-leiste button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: #c9d4ee;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.1px;
  padding: 8px 4px;
  cursor: pointer;
  white-space: nowrap;
}
.klapp-leiste button:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.40);
  color: #fff;
}
.klapp-leiste svg { flex-shrink: 0; }

.sidebar-nav { padding: 12px 10px 18px; flex: 1; }

/* Eine Gruppe = klickbarer Kopf plus einklappbarer Rumpf. Das Zuklappen
   laeuft ueber grid-template-rows, damit die Hoehe ohne feste Pixelwerte
   animiert werden kann.                                                  */
.nav-group { margin-top: 8px; }

.group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--himmel);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 12px 12px 8px;
  cursor: pointer;
  text-align: left;
}
.group-head:hover { color: #fff; }
.group-head .pfeil { font-size: 12.5px; transition: transform .22s ease; }
.nav-group.zu .group-head .pfeil { transform: rotate(-90deg); }

.group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .24s ease;
}
.group-body > div { overflow: hidden; }
.nav-group.zu .group-body { grid-template-rows: 0fr; }

/* Beim Seitenaufbau darf nichts animieren, sonst klappt die Sidebar bei
   jedem Laden sichtbar zusammen. Die Klasse nimmt das JS nach dem ersten
   Frame wieder weg.                                                      */
.sidebar.startet .group-body,
.sidebar.startet .group-head .pfeil { transition: none; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  padding: 11px 14px;
  border-radius: 9px;
  color: #e9edf8;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.sidebar-link:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar-link.active {
  background: var(--indigo);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(23, 37, 72, .35);
}
.sidebar-icon { font-size: 20.5px; width: 26px; text-align: center; flex-shrink: 0; }

/* Alte Gruppenbeschriftung ohne Klappfunktion. Bleibt als Rueckfallebene,
   falls irgendwo noch ein .sidebar-group im Markup steht.                */
.sidebar-group {
  font-size: 14.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--himmel); padding: 12px 12px 8px;
}

/* ── Content ──────────────────────────────────────────────────────────────── */
.content {
  flex: 1;
  /* Mit der Schrift mitgewachsen. Bleibt die Breite gleich, passen weniger
     Zeichen in eine Zeile und die Cronjob-Tabelle bricht frueher um. */
  max-width: 1300px;
  margin: 0 auto;
  padding: 36px 40px;
  width: 100%;
}

.section h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 22px;
}

/* ── Karten ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 15px;
  margin-bottom: 26px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(30, 47, 92, .06);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rand);
  gap: 12px;
  flex-wrap: wrap;
}

.card-title { font-weight: 600; font-size: 19.5px; color: var(--navy); }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card-notiz { font-size: 14.5px; color: var(--tinte-2); }

.subheader {
  font-size: 14.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .7px; color: var(--tinte-2);
  padding: 16px 24px 8px; border-top: 1px solid var(--rand);
}

.subheader-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 8px; border-top: 1px solid var(--rand);
  flex-wrap: wrap; gap: 8px;
}
.subheader-row span:first-child {
  font-size: 14.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .7px; color: var(--tinte-2);
}

.info-text { padding: 16px 24px; color: var(--tinte-2); }
.meta-info { font-size: 14.5px; color: var(--tinte-2); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 600;
  padding: 9px 18px;
  font-family: inherit;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.12); }

.btn-secondary { background: #fff; color: var(--tinte); border: 1.5px solid #d3d9e8; }
.btn-secondary:hover { border-color: var(--indigo); color: var(--indigo); filter: none; }

.btn-run { background: var(--indigo); color: #fff; font-size: 15px; padding: 7px 14px; }

.btn-remove {
  background: #fdeced; color: var(--rot-text);
  border: 1px solid #f6ccce; font-size: 15px;
  padding: 6px 12px; white-space: nowrap;
}
.btn-remove:hover { background: #f9d6d8; filter: none; }

/* ── Tabellen ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.3; }

th {
  text-align: left;
  padding: 8px 12px;
  background: #fafbfe;
  border-bottom: 1px solid var(--rand);
  font-weight: 600;
  color: var(--tinte-2);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

td { padding: 9px 12px; border-bottom: 1px solid #f0f2f8; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8f9fd; }

/* Buendig mit dem 24px-Raster der Karten-Header: nur die aeusseren Zellen
   tragen die volle Kartenkante, dazwischen reichen die engeren 12px. */
th:first-child, td:first-child { padding-left: 24px; }
th:last-child, td:last-child { padding-right: 24px; }

/* Name soll ein-, hoechstens zweizeilig stehen (z.B. "Draegerwerk
   Vorzugsaktie (Vz)"). Platz kommt von den drei schmalen Tag-Spalten, die nur
   je eine Checkbox tragen; noetigenfalls greift .table-wrap { overflow-x }. */
.name-col { min-width: 300px; }
.tag-col { width: 44px; padding: 9px 6px; text-align: center; }

.befehl-cell {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 15px; color: #4b5877;
  max-width: 460px; word-break: break-all;
}
.isin-cell {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 15px; color: var(--tinte-2);
}

/* Bestandsueberwachung (Lagebild): Abstand-Spalten schmaler, damit ISIN Platz
   fuer die normale Tabellenschrift bekommt statt der kompakteren .isin-cell-
   Groesse (Andre-Auftrag 17.08.2026). Eigener Scope ueber .lage-tabelle, damit
   die Bestandsanpassung-Watchlist-Tabelle (isin-cell dort bewusst kompakt)
   unveraendert bleibt. */
.lage-tabelle .abstand-col { width: 100px; }
.lage-tabelle .isin-cell { font-size: 17px; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.badge-ok      { background: #e6f6ec; color: #15803d; }
.badge-xetra   { background: var(--indigo-hell); color: var(--indigo); }
.badge-neutral { background: #eef1f8; color: var(--tinte-2); }
.badge-projekt { background: var(--indigo-hell); color: var(--indigo); }
.badge-vollverkauf { background: #fdeced; color: var(--rot-text); }
.badge-teilverkauf { background: #fdf3e2; color: var(--orange-text); }

/* ── Log-Box ──────────────────────────────────────────────────────────────── */
.log-box {
  background: #f4f6fb;
  border: 1px solid var(--rand);
  color: #33405e;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 15px;
  line-height: 1.7;
  padding: 18px 22px;
  margin: 4px 24px 24px;
  border-radius: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 420px;
  overflow-y: auto;
}

/* ── Server-Status und Auslastung ─────────────────────────────────────────── */
/* Die Luecke von 2px auf farbigem Grund erzeugt die Trennlinien, ohne dass
   jede Kachel eigene Raender braucht.                                      */
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--rand);
  border-top: 1px solid var(--rand);
}
.status-grid.drei { grid-template-columns: repeat(3, 1fr); }

.status-item { background: var(--karte); padding: 20px 24px 22px; min-width: 0; }

.status-label {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--tinte-2);
  font-weight: 600;
  margin-bottom: 7px;
}

.status-value {
  display: block;
  font-size: 22.5px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.status-value b { font-weight: 700; }

/* Die Erklaerzeile unter jedem Wert. Traegt Einordnung und Warntext, damit
   eine Farbe nie die einzige Information ist.                             */
.status-hinweis {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  color: var(--tinte-2);
  white-space: pre-line; /* je Zeile ein Projekt/Job, z.B. Backup-Fehlerliste */
}
.status-hinweis.warn { color: var(--orange-text); font-weight: 600; }
.status-hinweis.krit { color: var(--rot-text);    font-weight: 600; }

.punkt-ok, .punkt-warn, .punkt-fehler {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 9px;
  position: relative; top: -2px;
}
.punkt-ok     { background: var(--gruen);  box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
.punkt-warn   { background: var(--orange); box-shadow: 0 0 0 3px rgba(217,119,6,.16); }
.punkt-fehler { background: var(--rot);    box-shadow: 0 0 0 3px rgba(220,38,38,.16); }

.meter {
  margin-top: 11px;
  height: 7px;
  border-radius: 99px;
  background: #e8ecf6;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--indigo);
  transition: width .3s ease, background .3s ease;
}
.meter-fill.warn { background: var(--orange); }
.meter-fill.krit { background: var(--rot); }

/* ── Neuaufnahmen ─────────────────────────────────────────────────────────── */
/* Bewusst neutral: diese Titel tragen noch kein Signal und sollen auch nicht
   wie eines aussehen. Kein Gruen, kein Rot, nur ein grauer Grund, der den
   Block von der Watchlist darueber abgrenzt.                               */
.neuaufnahme-box {
  background: #f4f6fb;
  border-top: 1px solid var(--rand);
}
.neuaufnahme-box table { background: transparent; }
.neuaufnahme-box th { background: #eef1f8; }
.neuaufnahme-box tr:hover td { background: #eaeef7; }

/* Zeile unter dem Namen: Aufnahmedatum und Restlaufzeit. */
.zeilen-notiz {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--tinte-2);
  font-weight: 400;
}

/* ── Laden-Anzeige ────────────────────────────────────────────────────────── */
.loading {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(23, 37, 72, .35);
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Schmale Fenster ──────────────────────────────────────────────────────── */
/* Bewusst knapp gehalten: das Dashboard laeuft am Rechner, nicht am Handy.
   Der Block verhindert nur, dass bei einem schmalen Fenster nichts mehr
   lesbar ist.                                                             */
@media (max-width: 900px) {
  .status-grid, .status-grid.drei { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .content { padding: 24px 18px; }
}