/* Layout-Gerüst (neu) – Optik/Boxen kommt weiterhin aus /assets/css/app.css */

:root{
  --sidebar-w: 200px;
  --app-gap: 6px;
  --app-pad: 6px;
}

/* Gesamtfläche wie vorher: leichtes Grau + Innenabstand */
body{
  /* app.css hat ggf. schon eine Farbe, wir lassen das bewusst unangetastet.
     Wenn es vorher grau war, kommt es meist aus app.css.
     Falls nicht: kannst du das hier aktivieren:
     background: #f3f4f6;
  */
}

.app{
  display:flex;
  gap: var(--app-gap);
  padding: var(--app-pad);
  min-height: 100vh;
  box-sizing: border-box;
}

/* Sidebar links: Brand-Box + Menü-Box untereinander */
.sidebar{
  width: var(--sidebar-w);
  min-width: 100px;
  flex: 0 0 var(--sidebar-w);
  display:flex;
  flex-direction:column;
  gap: var(--app-gap);
  min-height: calc(100vh - (2 * var(--app-pad)));
}

/* Menü-Box soll “mitgehen” */
.sidebar .menu{
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
}

/* rechter Bereich */
.main{
  flex: 1 1 auto;
  min-width: 400px;
  display:flex;
  flex-direction:column;
  gap: var(--app-gap);
  min-height: calc(100vh - (2 * var(--app-pad)));
}

/* Topbar-Box (rechts oben) */
.topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.topbar .sep{
  opacity: .6;
  user-select:none;
}

/* Content-Box (rechts unten) */
.content{
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

/* Breadcrumbs im Content: klein oberhalb */
.content .crumbs{
  margin-bottom: 10px;
}