:root{
  --bg:#f7f7f9; --fg:#111; --muted:#6b7280;
  --card:#fff;  --border:#e5e7eb;
  --accent:#2563eb; --accent-2:#1e40af;
  --page-max: 1500px;   /* zentrale Arbeitsflächenbreite */

  /* ===== Neu: Topbar-Größen & -Farben ===== */
  --logo-h: 36px;         /* Basis-Logohöhe (Desktop) */
  --logo-scale: 2.10;     /* +10% Vergrößerung global */
  --tb-btn-bg: #fff;      /* Button-Hintergrund (Back & Avatar) */
  --tb-btn-fg: #111;      /* Button-Text/Icon */
  --tb-btn-border: var(--border);
}

/* ==========================================================
   BASIS-STYLES (Reset, Grundlayout)
   ========================================================== */
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto }
body.has-topbar{ padding-top:30px }

/* ==========================================================
   TOPBAR (Navigation oben, sticky)
   ========================================================== */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 12px; background:var(--bg); border-bottom:1px solid var(--border);
}
.topbar .left,.topbar .center,.topbar .right{ display:flex; align-items:center; gap:10px }
.topbar .center{ flex:1; justify-content:center }
.topbar h1{ margin:0; font-weight:700; letter-spacing:.3px; font-size:clamp(22px,3.6vw,36px) }
.topbar .left .logo-link{ order:1 }
.topbar .left #tbBackBtn{ order:2 }

/* ==========================================================
   SEITENRAHMEN & GRUNDRASTER
   ========================================================== */
.wrap{
  max-width:1280px;
  margin:24px auto;
  padding:0 16px 0 0;   /* rechts 16px, links 0 */
}
.container{
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr); /* Sidebar fix, Content flexibel */
  gap:16px;
  align-items:start;
}
.content{ min-width:0; } /* verhindert, dass Content das Grid sprengt */

/* ==========================================================
   SIDEBAR (Navigation links)
   ========================================================== */
.sidebar{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px;
  position:sticky; top:96px; height:fit-content; min-width:0;
}
.sidebar .nav-btn{
  display:block; width:100%; text-align:center;
  padding:12px 16px; margin-bottom:8px;
  border-radius:12px; border:1px solid var(--border); background:#fff; color:#111; text-decoration:none;
}
.sidebar .nav-btn:hover{ background:#f4f6fb }
.sidebar .nav-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent) }
.sidebar .nav-btn:last-child{ margin-bottom:0 }
.sidebar small{ display:block; color:var(--muted); margin-top:6px }

/* ==========================================================
   KARTEN / PANELS (Boxen für Inhalte)
   ========================================================== */
.card,.panel{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px;
}

/* ==========================================================
   TABELLEN
   ========================================================== */
.table-wrap{ overflow:auto }
.table-wrap table{ min-width:1000px } /* mehr Breite bei viel Inhalt */
table{ width:100%; border-collapse:separate; border-spacing:0 }
th,td{ padding:10px; border-bottom:1px solid var(--border); text-align:left; font-size:14px }
th{ font-weight:600; background:#fafafa }

/* ==========================================================
   DASHBOARD (Mobile Darstellung)
   ========================================================== */
@media (max-width:760px){
  .container{ grid-template-columns:1fr; gap:12px }
  .content{ order:1 } .sidebar{ order:2 }

  /* spezielles Layout für Dashboard-Karten */
  [data-page="dashboard"] .panel{ padding:12px; border-radius:12px }
}

/* ==========================================================
   USER-BADGE / PROFIL-BUTTON (oben rechts)
   ========================================================== */
.userwrap{ position:relative }

/* Einheitlicher Stil für Zurück-Button UND Avatar */
.topbar .backbtn,
.topbar .avatar{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--tb-btn-border);
  background:var(--tb-btn-bg);
  color:var(--tb-btn-fg);
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  text-decoration:none;
  line-height:1;
  transition: background .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.topbar .backbtn:hover,
.topbar .avatar:hover{
  background:#f9fafb;
}
.topbar .backbtn svg,
.topbar .avatar svg{
  width:18px;
  height:18px;
}

/* Avatar-spezifisch (Dropdown-Container) */
.menu{
  position:absolute; right:0; top:40px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); min-width:180px; padding:6px; display:none;
}
.menu.show{ display:block }
.menu a,.menu button{
  display:block; width:100%; text-align:left; background:#fff; border:0;
  padding:10px 12px; border-radius:8px; cursor:pointer; color:#111; text-decoration:none;
}
.menu a:hover,.menu button:hover{ background:#f3f4f6 }

/* auf kleinen Displays den Namen im Avatar ausblenden */
@media (max-width:680px){ .avatar .nm{ display:none } }

/* ==========================================================
   TOPBAR – LOGO (Größe & Ausrichtung fixen)
   ========================================================== */
.topbar .logo-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.topbar img.logo{
  height: calc(var(--logo-h) * var(--logo-scale)); /* global +10% */
  width:auto;
  display:block;
  object-fit:contain;
}
/* auf kleineren Screens das Logo leicht reduzieren */
@media (max-width:900px){
  .topbar img.logo{ height: calc(var(--logo-h) * var(--logo-scale) * .9); }
}

/* ==========================================================
   LISTEN/ARCHIV – Breites Layout & Spaltenlogik (zentral)
   ========================================================== */

/* Breitere Arbeitsfläche für Übersicht, Archiv und Dashboard (links-bündig) */
body[data-page="list"] .wrap,
body[data-page="archive"] .wrap,
body[data-page="dashboard"] .wrap{
  max-width: var(--page-max);  /* 1500px über :root --page-max */
  margin: 24px 0;              /* NICHT auto -> nicht zentrieren */
  padding: 0 16px;             /* gleiches Innenpadding links & rechts */
}

/* Tabellen-Basis */
.table-wrap{ width:100%; overflow-x:auto; }

/* "Wide"-Tische: dynamische Spalten */
table.wide{ width:100%; table-layout:auto; }

/* Für wide-Tabellen die generelle min-width aushebeln */
.table-wrap table.wide{ min-width:0; }

/* Grundlayout für Zellen */
table.wide th, table.wide td{
  vertical-align: top;
  white-space: normal;       /* standardmäßig darf Text umbrechen */
}

/* 1) ID – nie umbrechen, nur so breit wie nötig */
table.wide th:nth-child(1),
table.wide td:nth-child(1){
  width:1%;
  white-space:nowrap;
}
table.wide td:nth-child(1) a{
  display:inline-block;
  white-space:nowrap;
}

/* 2) Titel – bekommt extra Platz */
table.wide th:nth-child(2),
table.wide td:nth-child(2){
  min-width:360px;           /* falls dir das zu breit/schmal ist -> hier anpassen */
}

/* 3) Status/Prio – schmal & zentriert */
table.wide th:nth-child(3), table.wide td:nth-child(3){ min-width:90px;  text-align:center; }
table.wide th:nth-child(4), table.wide td:nth-child(4){ min-width:60px;  text-align:center; }

/* 4) Verantwortlicher – etwas breiter */
table.wide th:nth-child(5), table.wide td:nth-child(5){ min-width:160px; }

/* 5) Fällig / Erstellt – zentriert */
table.wide th:nth-child(6), table.wide td:nth-child(6){ min-width:140px; text-align:center; }
table.wide th:nth-child(7), table.wide td:nth-child(7){ min-width:160px; text-align:center; }